add web-fetcher

src/views/obs/WebFetcherOBS.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const webFetcher = useWebFetcher()
+
+onMounted(() => {
+  webFetcher.Start()
+})
+onUnmounted(() => {})
+</script>
+
+<template>
+  <div
+    class="web-fetcher-status"
+    :style="{
+      backgroundColor: webFetcher.isStarted ? '#6dc56d' : '#e34a4a',
+    }"
+  ></div>
+</template>
+
+<style scoped>
+.web-fetcher-status {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
+  border: 3px solid #00000033;
+  animation: animated-border 3s infinite;
+  transition: background-color 0.5s;
+}
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
+  }
+}
+</style>