types: widgets: Add iframe

src/components/widgets/IFrame.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="w-full h-full relative">
+    <iframe
+      v-show="iframe_loaded"
+      :src="widget.options.source"
+      frameborder="0"
+      height="100%"
+      width="100%"
+      @load="loadFinished"
+    />
+    <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
+      <v-card class="pa-2">
+        <v-card-title>Iframe Source</v-card-title>
+        <v-card-text>
+          <v-text-field
+            label="Iframe Source"
+            variant="underlined"
+            :model-value="widget.options.source"
+            outlined
+            @change="widget.options.source = $event.srcElement.value"
+            @keydown.enter="widget.options.source = $event.srcElement.value"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" @click="widget.managerVars.configMenuOpen = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onBeforeMount, ref, toRefs } from 'vue'
+
+import type { Widget } from '@/types/widgets'
+
+const props = defineProps<{
+  /**
+   * Widget reference
+   */
+  widget: Widget
+}>()
+const widget = toRefs(props).widget
+
+const iframe_loaded = ref(false)
+
+onBeforeMount(() => {
+  if (Object.keys(widget.value.options).length !== 0) {
+    return
+  }
+
+  widget.value.options = {
+    source: 'http://blueos.local',
+  }
+})
+
+/**
+ * Called when iframe finishes loading
+ */
+function loadFinished(): void {
+  console.log('Finished loading')
+  iframe_loaded.value = true
+}
+</script>
+
+<style scoped>
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+}
+</style>

src/types/widgets.ts

@@ -10,6 +10,7 @@ export enum WidgetType {
   Compass = 'Compass',
   DepthHUD = 'DepthHUD',
   CompassHUD = 'CompassHUD',
+  IFrame = 'IFrame',
   ImageViewer = 'ImageViewer',
   Indicators = 'Indicators',
   Map = 'Map',

src/views/WidgetsView.vue

@@ -21,6 +21,9 @@
           <template v-if="widget.component === WidgetType.CompassHUD">
             <CompassHUD :widget="widget" />
           </template>
+          <template v-if="widget.component === WidgetType.IFrame">
+            <IFrame :widget="widget" />
+          </template>
           <template v-if="widget.component === WidgetType.ImageViewer">
             <ImageView :widget="widget" />
           </template>
@@ -58,6 +61,7 @@ import Attitude from '../components/widgets/Attitude.vue'
 import Compass from '../components/widgets/Compass.vue'
 import CompassHUD from '../components/widgets/CompassHUD.vue'
 import DepthHUD from '../components/widgets/DepthHUD.vue'
+import IFrame from '../components/widgets/IFrame.vue'
 import Indicators from '../components/widgets/Indicators.vue'
 import Map from '../components/widgets/Map.vue'
 import MiniWidgetsBar from '../components/widgets/MiniWidgetsBar.vue'