scss active color fix + dependency updates

src/components/Chart.vue

@@ -11,6 +11,8 @@ import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
+import type { navType } from '@/utils/types'
+import { typeApi } from '@/utils/types'
 
 Highcharts.setOptions({
   time: {
@@ -20,7 +22,7 @@ Highcharts.setOptions({
 
 const props = defineProps<{
   activeWindow: Window
-  activeType: string
+  activeType: navType | null
 }>()
 
 const data = ref([])
@@ -28,19 +30,13 @@ const loading = ref(false)
 const chart = ref<HTMLElement | null>(null)
 const { activeWindow, activeType } = toRefs(props)
 
-const fetchData = async (window: Window, type: string) => {
+const fetchData = async (window: Window, type: navType) => {
   loading.value = true
-  const typeApi = {
-    temperatuur: 'temperature',
-    luchtvochtigheid: 'humidity'
-  }
   try {
     const [start, end] = [window.getStart(), window.getEnd()]
     const sample = Math.round((end - start) / 60 / 288) || 1
     const host = import.meta.env.MODE === 'development' ? 'http://localhost:3000' : ''
-    const fetchUrl = `${host}/type/${
-      typeApi[type as keyof typeof typeApi]
-    }/startDate/${start}/endDate/${end}/sample/${sample}`
+    const fetchUrl = `${host}/type/${typeApi[type]}/startDate/${start}/endDate/${end}/sample/${sample}`
     const response = await fetch(fetchUrl)
     loading.value = false
     return response.json()
@@ -79,7 +75,7 @@ const renderChart = () => {
       title: { text: null },
       minTickInterval: 0.1
     },
-    series: [{ name: capitalizeFirstLetter(activeType.value), data: chartData, type: 'line' }],
+    series: [{ name: capitalizeFirstLetter(activeType.value || ''), data: chartData, type: 'line' }],
     credits: { enabled: false }
   })
 }

src/components/Main.vue

@@ -16,17 +16,18 @@ import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
 import type { Window } from '@/utils/types'
+import type { navType } from '@/utils/types'
 
 const defaultWindow = windows[1]
 
-const activeType = ref<string>('')
+const activeType = ref<navType | null>(null)
 const activeWindow = ref<Window>(defaultWindow)
 
 const router = useRouter()
-const currentRoute = useRoute()
-if (currentRoute.params.type) activeType.value = currentRoute.params.type as string
-if (currentRoute.params.window) {
-  activeWindow.value = windows.find((w) => w.label === currentRoute.params.window) || defaultWindow
+const route = useRoute()
+if (route.params.type) activeType.value = route.params.type as navType
+if (route.params.window) {
+  activeWindow.value = windows.find((w) => w.label === route.params.window) || defaultWindow
 }
 
 const updateRoute = () => {
@@ -42,7 +43,7 @@ const updateRoute = () => {
   }
 }
 
-const setType = (newType: string) => {
+const setType = (newType: navType) => {
   activeType.value = newType
   updateRoute()
 }

src/components/NavBar.vue

@@ -7,7 +7,7 @@
         class="navbar-burger burger"
         aria-label="menu"
         aria-expanded="false"
-        data-target="navbarBasicExample"
+        data-target="navbar"
         :class="{ 'is-active': toggled }"
         @click="toggleMenu"
       >
@@ -17,7 +17,7 @@
       </a>
     </div>
 
-    <div class="navbar-menu" :class="{ 'is-active': toggled }">
+    <div class="navbar-menu" id="navbar" :class="{ 'is-active': toggled }">
       <div class="navbar-start">
         <a
           class="navbar-item"
@@ -33,28 +33,26 @@
 </template>
 <script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
+import type { navType } from '@/utils/types'
 
 const props = defineProps<{
-  activeType: string
+  activeType: navType | null
 }>()
 
 const emit = defineEmits<{
-  (e: 'set-type', type: string): void
+  'set-type': [type: navType]
 }>()
 
-const toggled = ref(false)
-const navTypes = ref<string[]>(['temperatuur', 'luchtvochtigheid'])
-onMounted(() => {
-  if (!props.activeType) {
-    emit('set-type', navTypes.value[0])
-  }
-})
-const toggleMenu = () => (toggled.value = !toggled.value)
-const setType = (type: string) => {
+const setType = (type: navType) => {
   toggled.value = false
   emit('set-type', type)
 }
+
+const toggled = ref(false)
+const navTypes: navType[] = ['temperatuur', 'luchtvochtigheid']
+if (!props.activeType) setType(navTypes[0])
+const toggleMenu = () => (toggled.value = !toggled.value)
 </script>
 <style scoped lang="scss">
 @import '@/style/_variables.scss';

src/components/TimeWindows.vue

@@ -21,6 +21,6 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'set-window', window: Window): void
+  'set-window': [window: Window]
 }>()
 </script>

src/utils/types.ts

@@ -5,3 +5,10 @@ export interface Window {
   format: string
   interval: number
 }
+
+export const typeApi = {
+  temperatuur: 'temperature',
+  luchtvochtigheid: 'humidity'
+}
+
+export type navType = keyof typeof typeApi