Version 1.1.0 (#5)

* feat: inbound webhooks

* feat: store some form values in local storage

* chore: update deps

* feat: add trigger system

* feat: add lockdown triggers

* feat more triggers and  outbound webhooks

* fix: lint issues

* feat: docs link in page

* chore: update deps

* feat: docs links on webhooks

* feat: add log viewer

Author: Arcath

app/lib/constants.ts

@@ -1,8 +1,20 @@
-export const VERSION = '1.0.2'
+export const VERSION = '1.1.0'
 
 export const RequiredVersions = {
   controller: VERSION,
   tts: '1.0.1',
   piper: '1.2.0',
   sounder: '1.1.1'
 }
+
+export const DOCS_URL = `https://openschoolbell.co.uk`
+
+export const EVENT_TYPES = [
+  'action',
+  'newAction',
+  'deleteAction',
+  'ignore',
+  'lockdownEnd',
+  'lockdownStart',
+  'login'
+] as const

app/lib/hooks/use-local-storage.ts

@@ -0,0 +1,33 @@
+import {useState, useEffect} from 'react'
+
+export const useLocalStorage = <ValueType extends string>(
+  key: string,
+  initial: ValueType
+): [ValueType, (newValue: ValueType) => void] => {
+  const set = (newValue: ValueType) => {
+    localStorage.setItem(key, newValue)
+  }
+
+  if (typeof window === 'undefined') {
+    return [initial, set]
+  }
+
+  const value = localStorage.getItem(key) as ValueType | null
+
+  return [value ? value : initial, set]
+}
+
+export const useStatefulLocalStorage = <ValueType extends string>(
+  key: string,
+  initial: ValueType
+) => {
+  const [lsValue, setLS] = useLocalStorage(key, initial)
+
+  const [value, set] = useState(lsValue)
+
+  useEffect(() => {
+    setLS(value)
+  }, [value, setLS])
+
+  return [value, set] as const
+}

app/lib/lockdown.server.ts

@@ -3,6 +3,7 @@ import {asyncForEach} from '@arcath/utils'
 import {getSetting, setSetting} from './settings.server'
 import {getPrisma} from './prisma.server'
 import {addJob} from './queues.server'
+import {trigger} from './trigger'
 
 export const startLockdown = async () => {
   await setSetting('lockdownMode', '1')
@@ -11,6 +12,8 @@ export const startLockdown = async () => {
 
   const sounders = await prisma.sounder.findMany()
 
+  await trigger('🔐 Lockdown Start', 'lockdownStart')
+
   return asyncForEach(sounders, async ({ip, key}) => {
     await addJob('lockdown', {ip, key})
   })
@@ -23,6 +26,8 @@ export const endLockdown = async () => {
 
   const sounders = await prisma.sounder.findMany()
 
+  await trigger('🔐 Lockdown End', 'lockdownEnd')
+
   return asyncForEach(sounders, async ({ip, key}) => {
     await addJob('lockdown', {ip, key})
   })

app/lib/queues.server.ts

@@ -14,6 +14,7 @@ export type Jobs = {
     times: number
   }
   lockdown: {ip: string; key: string}
+  outboundWebhook: {target: string; key: string}
 }
 
 export type JobName = keyof Jobs

app/lib/trigger.ts

@@ -0,0 +1,20 @@
+import {getPrisma} from './prisma.server'
+import {addJob} from './queues.server'
+
+import {type EVENT_TYPES} from './constants'
+
+type EventType = (typeof EVENT_TYPES)[number]
+
+export const trigger = async (logMessage: string, event: EventType) => {
+  const prisma = getPrisma()
+
+  await prisma.log.create({data: {message: logMessage}})
+
+  const outboundWebhooks = await prisma.outboundWebhook.findMany({
+    where: {event}
+  })
+
+  outboundWebhooks.forEach(({target, key}) => {
+    void addJob('outboundWebhook', {target, key})
+  })
+}

app/lib/ui.tsx

@@ -1,5 +1,7 @@
 import {NavLink} from '@remix-run/react'
 
+import {docsLink} from './utils'
+
 export const SidebarLink: React.FC<{
   to: string
   children: React.ReactNode
@@ -24,12 +26,22 @@ export const Page: React.FC<{
   children: React.ReactNode
   title: string
   wide?: boolean
-}> = ({title, wide, children}) => {
+  helpLink?: string
+}> = ({title, wide, children, helpLink}) => {
   return (
     <div className={`grid ${wide ? 'grid-cols-wide' : 'grid-cols-narrow'}`}>
       <div className="col-start-2">
         <h1 className="font-light mb-2 pb-2 border-b-stone-200 border-b">
           {title}
+          {helpLink ? (
+            <span className="float-right text-base pt-3">
+              <a href={docsLink(helpLink)} target="_blank">
+                📖 Docs
+              </a>
+            </span>
+          ) : (
+            ''
+          )}
         </h1>
         {children}
       </div>

app/lib/utils.ts

@@ -1,3 +1,5 @@
+import {DOCS_URL} from './constants'
+
 export const makeKey = () => {
   let result = ''
   const characters =
@@ -17,3 +19,7 @@ export const INPUT_CLASSES =
 export const pageTitle = (...parts: string[]) => {
   return ['Open School Bell', ...parts].join(' / ')
 }
+
+export const docsLink = (path: string) => {
+  return `${DOCS_URL}${path}`
+}

app/root.tsx

@@ -14,6 +14,8 @@ import LogoutIcon from '@heroicons/react/24/outline/ArrowRightStartOnRectangleIc
 import ComputerIcon from '@heroicons/react/24/outline/ComputerDesktopIcon'
 import LockClosedIcon from '@heroicons/react/24/outline/LockClosedIcon'
 import MusicIcon from '@heroicons/react/24/outline/MusicalNoteIcon'
+import CodeIcon from '@heroicons/react/24/outline/CodeBracketIcon'
+import LogIcon from '@heroicons/react/24/outline/ClipboardDocumentCheckIcon'
 
 import './tailwind.css'
 
@@ -76,6 +78,9 @@ const App = () => {
         <SidebarLink to="/actions">
           <ArrowIcon className="w-6 mr-2" /> <span>Actions</span>
         </SidebarLink>
+        <SidebarLink to="/webhooks">
+          <CodeIcon className="w-6 mr-2" /> <span>Webhooks</span>
+        </SidebarLink>
         <SidebarLink to="/zones">
           <Square3StackIcon className="w-6 mr-2" /> <span>Zones</span>
         </SidebarLink>
@@ -89,6 +94,9 @@ const App = () => {
         <SidebarLink to="/about">
           <InfoIcon className="w-6 mr-2" /> <span>About</span>
         </SidebarLink>
+        <SidebarLink to="/log">
+          <LogIcon className="w-6 mr-2" /> <span>Log</span>
+        </SidebarLink>
         <SidebarLink to="/backup">
           <BoxIcon className="w-6 mr-2" /> <span>Backup</span>
         </SidebarLink>

app/routes/about.tsx

@@ -4,11 +4,10 @@ import {
   redirect
 } from '@remix-run/node'
 import {useLoaderData} from '@remix-run/react'
-import {asyncForEach} from '@arcath/utils'
+import {asyncForEach, nl2br} from '@arcath/utils'
 import semver from 'semver'
 import fs from 'fs'
 import path from 'path'
-import {nl2br} from '@arcath/utils'
 
 import {pageTitle} from '~/lib/utils'
 import {Page} from '~/lib/ui'

app/routes/actions.$action.delete.tsx

@@ -1,10 +1,17 @@
 import {type ActionFunctionArgs, redirect} from '@remix-run/node'
 
 import {getPrisma} from '~/lib/prisma.server'
+import {trigger} from '~/lib/trigger'
 
 export const action = async ({params}: ActionFunctionArgs) => {
   const prisma = getPrisma()
 
+  const action = await prisma.action.findFirstOrThrow({
+    where: {id: params.action}
+  })
+
+  await trigger(`Deleted action: ${action.name}`, 'deleteAction')
+
   await prisma.action.delete({where: {id: params.action}})
 
   return redirect('/actions')