This commit is contained in:
cupcakearmy 2021-02-17 16:13:36 +01:00
parent 5bff67a53e
commit 69460312b0
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
12 changed files with 5368 additions and 128 deletions

View File

@ -1,32 +0,0 @@
kind: pipeline
name: default
steps:
- name: build
image: node:12-alpine
pull: always
commands:
- node -v
- npm -v
- yarn
- yarn run build
- name: deploy
image: cupcakearmy/drone-deploy
pull: always
settings:
host: nicco.io
user: root
key:
from_secret: ssh_key
port: 1312
target: /srv/web/rauchmelder
sources:
- ./dist
- ./docker-compose.prod.yml
commands:
- docker-compose -f docker-compose.prod.yml down
- docker-compose -f docker-compose.prod.yml up -d
when:
event: push
branch: master

1
.gitignore vendored
View File

@ -7,3 +7,4 @@ dist
.idea .idea
.vscode .vscode
.vercel

View File

@ -1,22 +0,0 @@
version: '3.6'
services:
home:
image: nginx:alpine
restart: always
ports:
- 80
volumes:
- ./dist:/usr/share/nginx/html:ro
networks:
- traefik
labels:
- traefik.enable=true
- traefik.port=80
- traefik.docker.network=traefik
- traefik.backend=rauchmelder
- traefik.frontend.rule=Host:rauchmelder.nicco.io
networks:
traefik:
external: true

View File

@ -1,10 +0,0 @@
version: '3'
services:
home:
image: nginx:alpine
restart: always
ports:
- 80
volumes:
- ./public:/usr/share/nginx/html:ro

View File

@ -7,18 +7,18 @@
], ],
"scripts": { "scripts": {
"dev": "parcel ./src/index.html", "dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html" "build": "parcel build --no-source-maps ./src/index.html"
}, },
"dependencies": { "dependencies": {
"moment": "^2.24.0", "dayjs": "^1.10.4",
"react": "16.9", "react": "16.9",
"react-dom": "16.9" "react-dom": "16.9"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "16.9", "@types/react": "16.9",
"@types/react-dom": "16.9", "@types/react-dom": "16.9",
"stylus": "^0.54.7",
"parcel-bundler": "^1.12.4", "parcel-bundler": "^1.12.4",
"stylus": "^0.54.7",
"typescript": "^3.7" "typescript": "^3.7"
} }
} }

View File

@ -1,20 +1,24 @@
import React, { useState, useCallback } from 'react' import React, { useState, useCallback } from 'react'
import moment from 'moment' import Duration from 'dayjs/plugin/duration'
import RelativeTime from 'dayjs/plugin/relativeTime'
import dj from 'dayjs'
dj.extend(Duration)
dj.extend(RelativeTime)
import ShowTime from './ShowTime' import ShowTime from './ShowTime'
import Switcher from './Switcher' import Switcher from './Switcher'
export const Glories = { export const Glories = {
Cosi: moment('2019-02-12').unix(), Cosi: dj('2019-02-12').unix(),
Georg: moment('2019-11-08').unix() Georg: dj('2019-11-08').unix(),
} }
export type Person = keyof typeof Glories export type Person = keyof typeof Glories
const init: Person = window.localStorage.getItem('selected') as Person || 'Cosi' const init: Person = (window.localStorage.getItem('selected') as Person) || 'Cosi'
const App: React.FC = () => { const App: React.FC = () => {
const [person, setPerson] = useState(init) const [person, setPerson] = useState(init)
const _set = useCallback((p: Person) => { const _set = useCallback((p: Person) => {
@ -22,7 +26,8 @@ const App: React.FC = () => {
setPerson(p) setPerson(p)
}, []) }, [])
return <div id="app"> return (
<div id="app">
<Switcher onChange={_set} /> <Switcher onChange={_set} />
<div> <div>
<div id={'title'}>💨 Rauchmelder 💨</div> <div id={'title'}>💨 Rauchmelder 💨</div>
@ -30,6 +35,7 @@ const App: React.FC = () => {
<ShowTime glory={Glories[person]} /> <ShowTime glory={Glories[person]} />
</div> </div>
</div> </div>
)
} }
export default App export default App

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import moment from 'moment' import dj from 'dayjs'
type Props = { type Props = {
glory: number glory: number
@ -8,19 +8,20 @@ type Props = {
const ShowTime: React.FC<Props> = ({ glory }) => { const ShowTime: React.FC<Props> = ({ glory }) => {
const [refresh, setRefresh] = useState(0) const [refresh, setRefresh] = useState(0)
const now = (Date.now() / 1000) | 0
const now = Date.now() / 1000 | 0 const delta = dj.duration(now - glory, 'seconds')
const delta = moment.duration(now - glory, 'seconds')
useEffect(() => { useEffect(() => {
setTimeout(() => setRefresh(refresh + 1), 1000) setTimeout(() => setRefresh(refresh + 1), 1000)
}, [refresh]) }, [refresh])
return <div id={'text'}> return (
<div id={'text'}>
{delta.humanize()} {delta.humanize()}
<br /> <br />
{delta.asSeconds()} {delta.asSeconds()}
</div> </div>
)
} }
export default ShowTime export default ShowTime

View File

@ -1,20 +1,20 @@
import React, { useMemo } from 'react' import React from 'react'
import { Glories, Person } from './App' import { Glories, Person } from './App'
type Props = { type Props = {
onChange: (p: Person) => void, onChange: (p: Person) => void
} }
const Switcher: React.FC<Props> = ({ onChange }) => { const Switcher: React.FC<Props> = ({ onChange }) => {
return <div id={'switcher'}> return (
{Object.keys(Glories).map((glory, i) => <span <div id="switcher">
key={i} {Object.keys(Glories).map((glory, i) => (
onClick={() => onChange(glory as Person)} <span key={i} onClick={() => onChange(glory as Person)}>
>
{glory} {glory}
</span> </span>
)} ))}
</div> </div>
)
} }
export default Switcher export default Switcher

View File

@ -1,16 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>💨</title> <title>💨</title>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<main id="root"></main> <main id="root"></main>
<script src="./main.tsx"></script> <script src="./main.tsx"></script>
</body> </body>
</html> </html>

View File

@ -7,7 +7,7 @@ html, body, #root
width 100% width 100%
height 100% height 100%
overflow hidden overflow hidden
font-family 'PT Sans', sans-serif font-family: 'Inconsolata', monospace
font-weight bold font-weight bold
#app #app

View File

@ -4,5 +4,4 @@ import * as ReactDOM from 'react-dom'
import './main.styl' import './main.styl'
import App from './Components/App' import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root')) ReactDOM.render(<App />, document.getElementById('root'))

5298
yarn.lock Normal file

File diff suppressed because it is too large Load Diff