Implement dashboard content

Signed-off-by: Knut Ahlers <knut@ahlers.me>

ci/build.mjs

@@ -11,6 +11,7 @@ const buildOpts = {
   entryPoints: ['src/main.ts'],
   legalComments: 'none',
   loader: {
+    '.md': 'text',
     '.ttf': 'file',
     '.woff2': 'file',
   },

package.json

@@ -3,6 +3,7 @@
     "@fortawesome/fontawesome-free": "^6.5.2",
     "bootstrap": "^5.3.3",
     "codejar": "^4.2.0",
+    "marked": "^13.0.0",
     "mitt": "^3.0.1",
     "prismjs": "^1.29.0",
     "vue": "^3.4.28",
@@ -22,4 +23,4 @@
     "eslint-plugin-vue": "^9.26.0",
     "typescript": "^5.4.5"
   }
-}
+}

src/components/_headNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg bg-body-tertiary user-select-none">
+  <nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary user-select-none">
     <div class="container-fluid">
       <span class="navbar-brand user-select-none">
         <i class="fas fa-robot fa-fw me-1 text-info" />
@@ -91,7 +91,7 @@ export default defineComponent({
 })
 </script>
 
-<style>
+<style scoped>
 .nav-profile-image {
   max-width: 24px;
 }

src/components/_toast.vue

@@ -20,7 +20,6 @@
   </div>
 </template>
 
-
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import { Toast } from 'bootstrap'

src/components/app.vue

@@ -33,6 +33,7 @@ import Toaster from './_toaster.vue'
   min-height: calc(100vh - 56px);
   min-width: 1;
   padding-left: 225px;
+  padding-top: 56px;
   position: relative;
 }
 

src/components/dashboard.vue

@@ -1,13 +1,54 @@
 <template>
-  <div class="container">
-    <!---->
+  <div class="container my-3">
+    <div class="row justify-content-center">
+      <!-- Here Number Scheduled Events Panel -->
+      <div
+        v-for="component in statusComponents"
+        :key="component"
+        class="col col-2"
+      >
+        <component
+          :is="component"
+        />
+      </div>
+    </div>
+
+    <div class="row mt-3">
+      <div class="col">
+      <!-- Here Bot-Logs: #44 -->
+      </div>
+      <div class="col">
+        <DashboardChangelog />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import DashboardActiveRaffles from './dashboard/activeRaffles.vue'
+import DashboardBotScopes from './dashboard/scopes.vue'
+import DashboardChangelog from './dashboard/changelog.vue'
+import DashboardHealthCheck from './dashboard/healthcheck.vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
+  components: {
+    DashboardActiveRaffles,
+    DashboardBotScopes,
+    DashboardChangelog,
+    DashboardHealthCheck,
+  },
+
+  data() {
+    return {
+      statusComponents: [
+        'DashboardHealthCheck',
+        'DashboardBotScopes',
+        'DashboardActiveRaffles',
+      ],
+    }
+  },
+
   name: 'TwitchBotEditorDashboard',
 })
 </script>

src/components/dashboard/_statuspanel.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    :class="cardClass"
+    @click="navigate"
+  >
+    <div class="card-body">
+      <div class="fs-6 text-center">
+        {{ header }}
+      </div>
+      <template v-if="loading">
+        <div class="fs-1 text-center">
+          <i class="fa-solid fa-circle-notch fa-spin" />
+        </div>
+      </template>
+      <template v-else>
+        <div :class="valueClass">
+          {{ value }}
+        </div>
+      </template>
+      <div
+        v-if="caption"
+        class="text-muted text-center"
+      >
+        <small>{{ caption }}</small>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { type RouteLocationRaw } from 'vue-router'
+
+export default defineComponent({
+  computed: {
+    cardClass(): string {
+      const classList = ['card user-select-none']
+
+      if (this.clickRoute) {
+        classList.push('pointer-click')
+      }
+
+      return classList.join(' ')
+    },
+
+    valueClass(): string {
+      const classList = ['fs-1 text-center']
+
+      if (this.valueExtraClass) {
+        classList.push(this.valueExtraClass)
+      }
+
+      return classList.join(' ')
+    },
+  },
+
+  methods: {
+    navigate(): void {
+      if (!this.clickRoute) {
+        return
+      }
+
+      this.$router.push(this.clickRoute)
+    },
+  },
+
+  name: 'DashboardStatusPanel',
+
+  props: {
+    caption: {
+      default: null,
+      type: String,
+    },
+
+    clickRoute: {
+      default: null,
+      type: {} as PropType<RouteLocationRaw>,
+    },
+
+    header: {
+      required: true,
+      type: String,
+    },
+
+    loading: {
+      default: false,
+      type: Boolean,
+    },
+
+    value: {
+      required: true,
+      type: String,
+    },
+
+    valueExtraClass: {
+      default: null,
+      type: String,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.pointer-click {
+  cursor: pointer;
+}
+</style>

src/components/dashboard/activeRaffles.vue

@@ -0,0 +1,52 @@
+<template>
+  <StatusPanel
+    :header="$t('dashboard.activeRaffles.header')"
+    :loading="loading"
+    :value="value"
+    :click-route="{name: 'rafflesList'}"
+    :caption="$t('dashboard.activeRaffles.caption')"
+  />
+</template>
+
+<script lang="ts">
+import BusEventTypes from '../../helpers/busevents'
+import { defineComponent } from 'vue'
+import StatusPanel from './_statuspanel.vue'
+
+export default defineComponent({
+  components: { StatusPanel },
+
+  computed: {
+    value(): string {
+      return `${this.activeRaffles}`
+    },
+  },
+
+  data() {
+    return {
+      activeRaffles: 0,
+      loading: true,
+    }
+  },
+
+  methods: {
+    fetchRaffleCount(): void {
+      fetch('raffle/', this.$root?.fetchOpts)
+        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
+        .then((data: any) => {
+          this.activeRaffles = data.filter((raffle: any) => raffle.status === 'active').length
+          this.loading = false
+        })
+    },
+  },
+
+  mounted() {
+    this.bus.on(BusEventTypes.RaffleChanged, () => {
+      this.fetchRaffleCount()
+    })
+    this.fetchRaffleCount()
+  },
+
+  name: 'DashboardBotRaffles',
+})
+</script>

src/components/dashboard/changelog.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card user-select-none">
+    <div class="card-header">
+      {{ $t('dashboard.changelog.heading') }}
+    </div>
+    <div
+      class="card-body"
+      v-html="changelog"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-ignore - Has an esbuild loader to be loaded as text
+import ChangeLog from '../../../History.md'
+
+import { defineComponent } from 'vue'
+import { parse as marked } from 'marked'
+
+export default defineComponent({
+  computed: {
+    changelog(): string {
+      const latestVersions = (ChangeLog as string)
+        .split('\n')
+        .filter((line: string) => line) // Remove empty lines to fix broken output
+        .join('\n')
+        .split('#')
+        .slice(0, 3) // Last 2 versions (first element is empty)
+        .join('###')
+
+      const parts = [
+        latestVersions,
+        '---',
+        this.$t('dashboard.changelog.fullLink'),
+      ]
+
+      return marked(parts.join('\n'), {
+        async: false,
+        breaks: false,
+        extensions: null,
+        gfm: true,
+        hooks: null,
+        pedantic: false,
+        silent: true,
+        tokenizer: null,
+        walkTokens: null,
+      }) as string
+    },
+  },
+
+  name: 'DashboardChangelog',
+})
+</script>
+
+<style scoped>
+.card-body {
+  user-select: text !important;
+}
+</style>