first commit

frontend/src/components/CronSlider.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {ref, onMounted} from 'vue';
+
+const hours = ref(1);
+const saving = ref(false);
+
+onMounted(async () => {
+  const h = await fetch('/settings/cron').then(r => r.json());
+  hours.value = h.hours;
+});
+
+async function update() {
+  saving.value = true;
+  await fetch('/settings/cron', {
+    method: 'PUT',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({hours: hours.value})
+  });
+  saving.value = false;
+}
+</script>
+<template>
+  <div class="p-4 bg-white rounded shadow">
+    <label class="block font-semibold mb-2">Fetch Interval (Stunden)</label>
+    <input type="range" min="0.5" max="24" step="0.5" v-model="hours" @change="update"
+           class="w-full"/>
+    <p class="text-sm mt-2">{{ hours }} h <span v-if="saving" class="animate-pulse">…</span></p>
+  </div>
+</template>