add Python server backend

src/components/Chart.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="chart-container">
-    <Loader v-if="loading"></Loader>
+    <Loader v-if="isLoading"></Loader>
     <div class="chart" id="chart" ref="chart" v-else></div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import * as Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
-import type { Window, NavType } from '@/utils/types'
-import { typeApi } from '@/utils/types'
-import { useFetch } from '@vueuse/core'
+import type { Window, NavTypes } from '@/utils/types'
+import { useApi } from '@/composables/api'
 
 Highcharts.setOptions({
   time: {
@@ -22,26 +21,12 @@ Highcharts.setOptions({
 
 const props = defineProps<{
   activeWindow: Window
-  activeType: NavType | undefined
+  activeType: NavTypes | undefined
 }>()
 
 const chart = ref<HTMLElement | null>(null)
 
-const fetchUrl = computed(() => {
-  const [start, end] = [props.activeWindow.getStart(), props.activeWindow.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[props.activeType || 'temperatuur']
-  }/startDate/${start}/endDate/${end}/sample/${sample}`
-  return fetchUrl
-})
-
-interface ChartDataPoint {
-  date: Number
-  value: Number
-}
-const { data: chartData, isFetching: loading } = useFetch(fetchUrl, { refetch: true }).json<ChartDataPoint[]>()
+const { chartData, isLoading } = useApi(props)
 
 watch([chart, chartData], () => {
   if (chart.value && chartData.value) renderChart()

src/components/Main.vue

@@ -15,11 +15,13 @@ import NavBar from '@/components/NavBar.vue'
 import TimeWindows from '@/components/TimeWindows.vue'
 import Chart from '@/components/Chart.vue'
 import { windows } from '@/utils/helpers'
-import type { Window, NavType } from '@/utils/types'
+import type { Window, NavTypes } from '@/utils/types'
+import { navTypes } from '@/utils/types'
 
 const defaultWindow = windows[1]
+const defaultType = navTypes[0]
 
-const activeType = ref<NavType>()
+const activeType = ref<NavTypes>()
 const activeWindow = ref<Window>(defaultWindow)
 
 const router = useRouter()
@@ -27,9 +29,10 @@ const route = useRoute()
 
 const urlEncodeWindow = (label: string) => label.replace(' ', '-')
 
-if (route.params.type) activeType.value = route.params.type as NavType
+if (route.params.type)
+  // activeType.value = (navTypes.includes(route.params.type.toString()) ? route.params.type : navTypes[0]) as NavTypes
+  activeType.value = (navTypes.find((t) => t === route.params.type) || defaultType) as NavTypes
 if (route.params.window) {
-  console.log(route.params.window, windows)
   activeWindow.value = windows.find((w) => urlEncodeWindow(w.label) === route.params.window) || defaultWindow
 }
 

src/components/NavBar.vue

@@ -34,17 +34,17 @@
 <script setup lang="ts">
 import { capitalizeFirstLetter } from '@/utils/helpers'
 import { ref } from 'vue'
-import type { NavType } from '@/utils/types'
+import type { NavTypes } from '@/utils/types'
 
-const activeType = defineModel<NavType>()
+const activeType = defineModel<NavTypes>()
 
-const setType = (type: NavType) => {
+const setType = (type: NavTypes) => {
   toggled.value = false
   activeType.value = type
 }
 
 const toggled = ref(false)
-const navTypes: NavType[] = ['temperatuur', 'luchtvochtigheid']
+const navTypes: NavTypes[] = ['temperatuur', 'luchtvochtigheid']
 if (!activeType.value) setType(navTypes[0])
 const toggleMenu = () => (toggled.value = !toggled.value)
 </script>