[add] webapp on localhost:10501 (default)

2020-05-03 15:26:16 +02:00
parent 1577230a12
commit 24d9d6578a
15 changed files with 4066 additions and 53 deletions
--- a/src/dwatcher.ts
+++ b/src/dwatcher.ts
@@ -2,6 +2,7 @@ import * as minimist from 'minimist'
 import * as path from 'path'
 import {dwatch} from './lib/dwatch'
 import {Watcher} from "./lib/types/state";
+import {webappServe} from "./lib/webserver";

 process.on('uncaughtException', (err) => {
  // Dunno why this specific exception is not caught
@@ -22,8 +23,8 @@ process.on('unhandledRejection', (err) => {

  try {
    const watchers: Watcher[] = await dwatch(argv.conf || path.join(__dirname, '../app.yml'))
+    webappServe(watchers)
  } catch (e) {
-    // webappServe(watchers)
    console.error(e)
  }
 })()
--- a/src/lib/webserver.ts
+++ b/src/lib/webserver.ts
@@ -0,0 +1,18 @@
+import * as express from "express";
+import {Watcher} from "./types/state";
+import * as path from "path";
+import * as cors from "cors";
+
+export function webappServe(watchers: Watcher[], host = 'localhost', port = 10501) {
+  const webapp = express()
+
+  webapp.use(cors())
+
+  webapp.get('/status', (req, res) => {
+    res.send(watchers)
+  })
+
+  webapp.use('/', express.static(path.join(__dirname, '../../dist/')))
+
+  webapp.listen(port, host, () => console.log(`webserver listening at http://${host}:${port}`))
+}
--- a/src/webapp/Index.vue
+++ b/src/webapp/Index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="mt-3">
+        <ul>
+            <li v-for="w in watchers">
+                <i class="fas" v-bind:class="watcherClass(w)"></i>
+                {{ w.name }} <span>{{ w.state }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import {api} from "./api";
+
+    export default {
+        data: function() {
+            return {
+                watchers: []
+            }
+        },
+        async created() {
+            const dwatcherAPI = api('http://localhost:10501')
+            this.watchers = await dwatcherAPI.getStatus()
+
+        },
+        methods: {
+            watcherClass(watcher) {
+                if (watcher.state === 'OK') {
+                    return ['fa-check', 'text-success']
+                }
+                if (watcher.state === 'FAILURE') {
+                    return ['fa-times', 'text-danger']
+                }
+                return []
+            }
+        }
+    }
+</script>
+
+<!--<style scoped>-->
+<!--</style>-->
--- a/src/webapp/api.js
+++ b/src/webapp/api.js
@@ -0,0 +1,15 @@
+import * as axios from "axios";
+
+export function api(baseURL) {
+
+    const instance = axios.default.create({
+        baseURL
+    })
+
+    return {
+        async getStatus() {
+            const status = await instance.get('/status')
+            return status.data
+        }
+    }
+}
--- a/src/webapp/index.html
+++ b/src/webapp/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <div id="app">
+    </div>
+</body>
+</html>
+
+
--- a/src/webapp/index.js
+++ b/src/webapp/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './Index.vue'
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+new Vue({
+    el: '#app',
+    render: h => h(App)
+})