cleanup and adding scss

pointMaster/js/src/components/HelloWorld.vue

@@ -1,104 +0,0 @@
-<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

@@ -143,14 +143,16 @@ export default defineComponent({
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
         margin: auto;
     }
-}
 
-.stat-title {
+    &-title {
     font-weight: 700;
     font-size: 1.25rem;
-}
+    margin: 0;
+    }
 
-.stat .stat-value {
+    &-value {
-    font-size: 2rem;
+    font-weight: 400;
+    font-size: 1.5rem;
+}
 }
 </style>

pointMaster/js/src/main.ts

@@ -1,7 +1,5 @@
 import { createApp } from "vue";
-import HelloWorld from "./components/HelloWorld.vue";
 import Stats from "./components/Stats.vue";
-import Test from "./components/Test.vue";
 
 const app = createApp({});
 

pointMaster/js/vue.config.js

@@ -4,6 +4,14 @@ module.exports = {
     publicPath: "./", // Use relative paths for assets
     filenameHashing: false, // Disable hash in filenames
     runtimeCompiler: true, // Enable runtime compilation
+    css: {
+        extract: false,
+        loaderOptions: {
+            sass: {
+                implementation: require('sass'),
+            }
+        }
+    },
     configureWebpack: {
         resolve: {
             extensions: ['.vue', '.js', '.json'],