Adding vue and stats

pointMaster/js/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "vue-cli-service build --mode development --watch",
+    "build": "vue-cli-service build"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "apexcharts": "^4.0.0",
+    "axios": "^1.7.7",
+    "vue": "^3.5.13",
+    "vue-class-component": "^7.2.6"
+  },
+  "devDependencies": {
+    "vue-cli-service": "^5.0.10"
+  }
+}

pointMaster/js/src/components/HelloWorld.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="stat-dashboard">
+        <div>
+            <h1>Stats</h1>
+            <div class="stats" v-for="data in StatData">
+                <div>
+
+                </div>
+            </div>
+        </div>
+        <div>
+            <p class="stat-title">Point over tid</p>
+            <div id="chart"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import ApexCharts, { ApexOptions } from 'apexcharts';
+import axios from 'axios';
+import { defineComponent, onMounted } from 'vue';
+
+
+export default defineComponent({
+    name: 'HelloWorld',
+    setup() {
+        var StatData: Stat[] = [];
+
+        const GetStats = async () => {
+            var data = (await axios.get("/api/getstats")).data as Stat[];
+
+            StatData = data;
+        }
+
+        onMounted(async () => {
+            await GetStats();
+            await Chart();
+        });
+    }
+});
+
+const Chart = async () => {
+    var options: ApexOptions = {
+        chart: {
+            type: "line",
+            toolbar: {
+                show: false,
+            },
+        },
+        xaxis: {
+            type: "datetime"
+        },
+        series: []
+    };
+    const chart = new ApexCharts(document.querySelector("#chart"), options);
+    chart.render();
+
+    const data = (await axios.get("/api/GetPointsOverTime")).data;
+
+    console.log(data);
+
+    chart.updateOptions({
+        series: data
+    } as ApexOptions)
+}
+</script>
+
+<style lang="css">
+.stat-dashboard {
+    display: flex;
+    height: 60vh;
+    justify-content: space-between;
+}
+
+#chart {
+    height: 300px;
+    width: 500px;
+}
+
+.stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    max-width: 50vw;
+}
+
+.stat {
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    height: 7rem;
+    width: 10rem;
+    border-radius: 5px;
+    text-align: center;
+}
+
+.stat-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+}
+
+.stat .stat-value {
+    font-size: 2rem;
+}
+</style>

pointMaster/js/src/components/Stats.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="stat-dashboard">
+        <div>
+            <h1>Stats</h1>
+            <div class="stats">
+                <div class="stat" v-for="(data, index) in StatData" :key="index">
+                    <p class="stat-title">{{ data.Title }}</p>
+                    <p class="stat-value">{{ data.Value }}</p>
+                </div>
+            </div>
+        </div>
+        <div>
+            <p class="stat-title">Point over tid</p>
+            <div id="chart"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import ApexCharts, { ApexOptions } from 'apexcharts';
+import axios from 'axios';
+import { defineComponent, onMounted, ref } from 'vue';
+
+
+export default defineComponent({
+    name: "Stats",
+    setup() {
+        const StatData = ref<Stat[]>([]);
+
+        const GetStats = async () => {
+            const data = (await axios.get("/api/getstats")).data as Stat[]
+
+            StatData.value = data;
+        };
+
+        const initializeChart = async () => {
+            const options: ApexOptions = {
+                chart: {
+                    type: "line",
+                    toolbar: {
+                        show: false,
+                    },
+                },
+                xaxis: {
+                    type: "datetime"
+                },
+                series: []
+            };
+
+            const chart = new ApexCharts(document.querySelector("#chart"), options);
+            chart.render();
+
+            const data = (await axios.get("/api/GetPointsOverTime")).data;
+
+            chart.updateOptions({
+                series: data
+            } as ApexOptions);
+        };
+
+        onMounted(async () => {
+            await GetStats();
+            await initializeChart();
+        });
+
+        return {
+            StatData
+        }
+    }
+})
+
+</script>
+
+<style lang="css">
+.stat-dashboard {
+    display: flex;
+    height: 60vh;
+    justify-content: space-between;
+}
+
+#chart {
+    height: 300px;
+    width: 500px;
+}
+
+.stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    max-width: 50vw;
+}
+
+.stat {
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    height: 7rem;
+    width: 10rem;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
+}
+
+.stat-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+}
+
+.stat .stat-value {
+    font-size: 2rem;
+}
+</style>

pointMaster/js/src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from "vue";
+import HelloWorld from "./components/HelloWorld.vue";
+import Stats from "./components/Stats.vue";
+
+const app = createApp({});
+
+app.component("hello-world", Stats);
+
+(window as any).app = app;
+
+app.mount("#app");

pointMaster/js/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

pointMaster/js/src/typings.d.ts

@@ -0,0 +1,13 @@
+type Point = {
+    Id: number;
+    Points: number;
+    Turnout: number;
+    postName: string;
+    patruljeName: string;
+    DateCreated: Date;
+}
+
+type Stat = {
+    Title: string;
+    Value: string;
+}

pointMaster/js/tsconfig.json

@@ -0,0 +1,42 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "experimentalDecorators": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strictNullChecks": false,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": [
+            "webpack-env"
+        ],
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        },
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.iterable",
+            "scripthost"
+        ],
+        "skipLibCheck": true,
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "tests/**/*.ts",
+        "tests/**/*.tsx",
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}

pointMaster/js/vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    outputDir: "../wwwroot/js/dist", // Output everything into the `dist` folder
+    assetsDir: "", // Prevent nested `assets` folder
+    publicPath: "./", // Use relative paths for assets
+    filenameHashing: false, // Disable hash in filenames
+    runtimeCompiler: true, // Enable runtime compilation
+    configureWebpack: {
+        resolve: {
+            extensions: ['.vue', '.js', '.json'],
+        },
+        output: {
+            filename: '[name].js', // Keep the main app filename dynamic
+            chunkFilename: '[name].js', // Ensure chunk filenames are unique
+        },
+    },
+    chainWebpack: config => {
+        config.optimization.splitChunks(false); // Disable chunk splitting
+    },
+};