tormakris/cf-workers-status-page
1
0
Fork 0
mirror of https://github.com/tormachris/cf-workers-status-page.git synced 2025-07-05 11:32:48 +02:00
Code Releases Activity

refactor: switch css framework to tailwind

Browse Source
This commit is contained in:
Alex
2020-11-20 17:05:13 +01:00
parent 42f422c455
commit fb134bbf74
20 changed files with 1997 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/api/triggerCron.js
View File

@ -1,6 +1,6 @@
import { processCronTrigger } from '../../src/functions/cronTrigger'
export default async event => {
export default async (event) => {
// used only for local debugging
//return processCronTrigger(event)
}

155
pages/index.js
View File

@ -1,115 +1,97 @@
import Head from 'flareact/head'
import MonitorHistogram from '../src/components/monitorHistogram'
import {
getMonitors,
useKeyPress,
} from '../src/functions/helpers'
import config from '../config.yaml'
import MonitorStatusLabel from '../src/components/monitorStatusLabel'
import MonitorStatusHeader from '../src/components/monitorStatusHeader'
import MonitorFilter from '../src/components/monitorFilter'
import { Store } from 'laco'
import { useStore } from 'laco-react'
import Head from 'flareact/head'
const MonitorStore = new Store(
{
monitors: config.monitors,
visible: config.monitors,
activeFilter: false
}
)
import { getMonitors, useKeyPress, switchTheme } from '../src/functions/helpers'
import config from '../config.yaml'
import MonitorCard from '../src/components/monitorCard'
import MonitorFilter from '../src/components/monitorFilter'
import MonitorStatusHeader from '../src/components/monitorStatusHeader'
import ThemeSwitcher from '../src/components/themeSwitcher'
const filterByTerm = (term) => MonitorStore.set(
state => ({ visible: state.monitors.filter((monitor) => monitor.name.toLowerCase().includes(term)) })
)
const MonitorStore = new Store({
monitors: config.monitors,
visible: config.monitors,
activeFilter: false,
})
const filterByTerm = (term) =>
MonitorStore.set((state) => ({
visible: state.monitors.filter((monitor) =>
monitor.name.toLowerCase().includes(term),
),
}))
export async function getEdgeProps() {
// get KV data
const {value: kvMonitors, metadata: kvMonitorsMetadata } = await getMonitors()
const {
value: kvMonitors,
metadata: kvMonitorsMetadata,
} = await getMonitors()
return {
props: {
config,
kvMonitors: kvMonitors || {},
kvMonitorsMetadata: kvMonitorsMetadata || {}
kvMonitorsMetadata: kvMonitorsMetadata || {},
},
// Revalidate these props once every x seconds
revalidate: 5,
}
}
export default function Index({
config,
kvMonitors,
kvMonitorsMetadata,
}) {
export default function Index({ config, kvMonitors, kvMonitorsMetadata }) {
const state = useStore(MonitorStore)
const slash = useKeyPress('/')
return (
<div>
<div className="min-h-screen">
<Head>
<title>{config.settings.title}</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css"
crossOrigin="anonymous"
/>
<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="./style.css" />
<script>
{`
function setTheme(theme) {
document.documentElement.classList.remove("dark", "light")
document.documentElement.classList.add(theme)
localStorage.theme = theme
}
(() => {
const query = window.matchMedia("(prefers-color-scheme: dark)")
query.addListener(() => {
setTheme(query.matches ? "dark" : "light")
})
if (["dark", "light"].includes(localStorage.theme)) {
setTheme(localStorage.theme)
} else {
setTheme(query.matches ? "dark" : "light")
}
})()
`}
</script>
</Head>
<div className="ui basic segment container">
<div className="horizontal flex between">
<h1 className="ui huge marginless title header">
<img
className="ui middle aligned tiny image"
src={config.settings.logo}
/>
{config.settings.title}
</h1>
<MonitorFilter
active={slash}
callback={filterByTerm}
/>
<div className="container mx-auto px-4">
<div className="flex flex-row justify-between items-center p-4">
<div className="flex flex-row items-center">
<img className="h-8 w-auto" src={config.settings.logo} />
<h1 className="ml-4 text-3xl">{config.settings.title}</h1>
</div>
<div className="flex flex-row items-center">
{typeof window !== 'undefined' && <ThemeSwitcher />}
<MonitorFilter active={slash} callback={filterByTerm} />
</div>
</div>
<MonitorStatusHeader
kvMonitorsMetadata={kvMonitorsMetadata}
/>
<MonitorStatusHeader kvMonitorsMetadata={kvMonitorsMetadata} />
{state.visible.map((monitor, key) => {
return (
<div key={key} className="ui segment">
<div
className="ui horizontal flex between"
style={{ marginBottom: '8px' }}
>
<div className="ui marginless header">
{monitor.description && (
<span data-tooltip={monitor.description}>
<i className="blue small info circle icon" />
</span>
)}
<div className="content">{monitor.name}</div>
</div>
<MonitorStatusLabel
kvMonitor={kvMonitors[monitor.id]}
/>
</div>
<MonitorHistogram
monitorId={monitor.id}
kvMonitor={kvMonitors[monitor.id]}
/>
<div className="horizontal flex between grey-text">
<div>{config.settings.daysInHistogram} days ago</div>
<div>Today</div>
</div>
</div>
<MonitorCard
key={key}
monitor={monitor}
data={kvMonitors[monitor.id]}
/>
)
})}
<div className="horizontal flex between grey-text">
<div className="flex flex-row justify-between mt-4 text-sm">
<div>
Powered by{' '}
<a href="https://workers.cloudflare.com/" target="_blank">
@ -129,6 +111,15 @@ export default function Index({
</a>
</div>
</div>
<script>
{`
function setTheme(theme) {
document.documentElement.classList.remove("dark", "light")
document.documentElement.classList.add(theme)
localStorage.theme = theme
}
`}
</script>
</div>
</div>
)