widgets: create ImageView

src/components/widgets/ImageView.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <img :src="src" />
+    <v-btn
+      class="options-btn"
+      icon="mdi-dots-vertical"
+      size="x-small"
+      variant="text"
+      flat
+      @click="showOptionsDialog = !showOptionsDialog"
+    />
+    <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+      <v-card class="pa-2">
+        <v-card-title>Image URL</v-card-title>
+        <v-card-text>
+          <v-text-field v-model="src" label="Image URL" outlined></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" text @click="showOptionsDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const src = ref<string | undefined>()
+const showOptionsDialog = ref(false)
+</script>
+
+<style scoped>
+img {
+  object-fit: cover;
+  width: 100%;
+}
+div {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/types/widgets.ts

@@ -17,6 +17,7 @@ export enum WidgetType {
   PowerSupply = 'PowerSupply',
   VideoPlayer = 'VideoPlayer',
   VideoRecorder = 'VideoRecorder',
+  ImageViewer = 'ImageViewer',
 }
 
 export type Widget = {

src/views/WidgetsView.vue

@@ -50,6 +50,9 @@
           <template v-if="widget.component === WidgetType.VideoRecorder">
             <VideoRecorder :widget="widget" />
           </template>
+          <template v-if="widget.component === WidgetType.ImageViewer">
+            <ImageView :widget="widget" />
+          </template>
           <!-- TODO: Use the line below instead of the 12 lines above -->
           <!-- <component :is="componentFromType(widget.component)"></component> -->
         </WidgetHugger>
@@ -65,6 +68,7 @@ import {
   ref,
 } from 'vue'
 
+import ImageView from '@/components/widgets/ImageView.vue'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import { WidgetType } from '@/types/widgets'