add Python server backend

src/composables/api.ts

@@ -0,0 +1,56 @@
+import createClient from 'openapi-fetch'
+import { navTypeToApiTypeMapping } from '@/utils/types'
+import type { Window, NavTypes } from '@/utils/types'
+import { computed, ref, watch } from 'vue'
+
+import type { paths } from '@/api'
+
+type Props = {
+  activeWindow: Window
+  activeType: NavTypes | undefined
+}
+
+type ApiParameters =
+  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['parameters']['path']
+
+type ApiResponse =
+  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['responses']['200']['content']['application/json']
+
+type ApiError =
+  paths['/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}']['get']['responses']['422']['content']['application/json']
+
+export function useApi(props: Props) {
+  const client = createClient<paths>({ baseUrl: import.meta.env.MODE === 'development' ? 'http://localhost:3000' : '' })
+
+  const chartData = ref<ApiResponse | null>(null)
+  const chartError = ref<ApiError | null>(null)
+  const isLoading = ref(false)
+
+  const apiParameters = computed<ApiParameters>(() => {
+    const [start_date, end_date] = [props.activeWindow.getStart(), props.activeWindow.getEnd()]
+
+    return {
+      type: navTypeToApiTypeMapping[props.activeType || 'temperatuur'],
+      start_date,
+      end_date,
+      sample: Math.round((start_date - end_date) / 60 / 288) || 1
+    }
+  })
+
+  const getData = async () => {
+    isLoading.value = true
+    const { data } = await client.GET('/type/{type}/startDate/{start_date}/endDate/{end_date}/sample/{sample}', {
+      params: { path: apiParameters.value }
+    })
+    if (data) chartData.value = data
+    isLoading.value = false
+  }
+
+  watch([() => [props.activeType, props.activeWindow]], () => getData(), { immediate: true })
+
+  return {
+    chartData,
+    chartError,
+    isLoading
+  }
+}