Update SSE

SSE.md

@@ -69,3 +69,87 @@ const infoCount = async (comico, event = () => { }) => {
 
 export { infoCount }
 ```
+
+
+# ./server/admin/command/command.mustache
+
+```html
+<style>
+  #commands {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+  }
+
+  button {
+    padding: 5px;
+  }
+
+  #result {
+    margin-block: 1em;
+    width: 100%;
+    height: 45vh;
+  }
+</style>
+<main id="container">
+  <div id="commands">
+    {{#list}}
+    <button data-id="{{id}}">{{name}}</button>
+    {{/list}}
+  </div>
+
+  <textarea id="result"></textarea>
+</main>
+
+<script type="module">
+  const result = document.getElementById('result')
+  const commands = document.getElementById('commands')
+
+  const clear = () => {
+    result.value = ''
+  }
+
+  const add = (msg) => {
+    result.value += msg + '\n'
+  }
+
+  const disabled = () => {
+    commands.querySelectorAll('button').forEach(b => b.disabled = true)
+  }
+
+  const enabled = () => {
+    commands.querySelectorAll('button').forEach(b => b.disabled = false)
+  }
+
+  const commandOnClick = (evt) => {
+    const { target } = evt
+    const { id } = target.dataset
+    disabled()
+    clear()
+
+    const url = `{{{url}}}/run/${id}`
+    const eventSource = new EventSource(url)
+
+    eventSource.addEventListener('start', (e) => {
+      add('Running: ' + e.data)
+    })
+    eventSource.addEventListener('log', (e) => {
+      add(e.data)
+    })
+    eventSource.addEventListener('stop', (e) => {
+      add('DONE')
+      eventSource.close()
+      enabled()
+    })
+
+    eventSource.onerror = function (event) {
+      console.log('Error occurred:', event)
+      eventSource.close()
+      enabled()
+    }
+  }
+
+  commands.querySelectorAll('button').forEach(button => button.addEventListener('click', commandOnClick))
+  clear()
+</script>
+```