✨ Creates an embedable webpage widget

src/components/Widgets/IframeWidget.vue

@@ -0,0 +1,35 @@
+<template>
+<div class="iframe-widget">
+  <iframe v-if="frameUrl" :src="frameUrl" />
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ErrorHandler from '@/utils/ErrorHandler';
+
+export default {
+  mixins: [WidgetMixin],
+  computed: {
+    frameUrl() {
+      const usersChoice = this.options.url;
+      if (!usersChoice || typeof usersChoice !== 'string') {
+        ErrorHandler('Iframe widget expects a URL');
+        return null;
+      }
+      return usersChoice;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.iframe-widget {
+  iframe {
+    width: 100%;
+    min-height: 240px;
+    border: 0;
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -1,30 +1,19 @@
 <template>
-  <div>
-    <Collapsable
-      :title="widget.name"
-      :icon="widget.icon"
-      :uniqueKey="groupId"
-      :collapsed="displayData.collapsed"
-      :cols="displayData.cols"
-      :rows="displayData.rows"
-      :color="displayData.color"
-      :customStyles="displayData.customStyles"
-    >
-      <Clock v-if="widgetType === 'clock'" :options="widgetOptions" />
-      <Weather v-else-if="widgetType === 'weather'" :options="widgetOptions" />
-      <WeatherForecast v-else-if="widgetType === 'weather-forecast'" :options="widgetOptions" />
-      <TflStatus v-else-if="widgetType === 'tfl-status'" :options="widgetOptions" />
-      <CryptoPriceChart v-else-if="widgetType === 'crypto-price-chart'" :options="widgetOptions" />
-      <CryptoWatchList v-else-if="widgetType === 'crypto-watch-list'" :options="widgetOptions" />
-      <XkcdComic v-else-if="widgetType === 'xkcd-comic'" :options="widgetOptions" />
-      <ExchangeRates v-else-if="widgetType === 'exchange-rates'" :options="widgetOptions" />
-      <StockPriceChart v-else-if="widgetType === 'stock-price-chart'" :options="widgetOptions" />
-      <Jokes v-else-if="widgetType === 'joke'" :options="widgetOptions" />
-    </Collapsable>
-  </div>
+  <Clock v-if="widgetType === 'clock'" :options="widgetOptions" />
+  <Weather v-else-if="widgetType === 'weather'" :options="widgetOptions" />
+  <WeatherForecast v-else-if="widgetType === 'weather-forecast'" :options="widgetOptions" />
+  <TflStatus v-else-if="widgetType === 'tfl-status'" :options="widgetOptions" />
+  <CryptoPriceChart v-else-if="widgetType === 'crypto-price-chart'" :options="widgetOptions" />
+  <CryptoWatchList v-else-if="widgetType === 'crypto-watch-list'" :options="widgetOptions" />
+  <XkcdComic v-else-if="widgetType === 'xkcd-comic'" :options="widgetOptions" />
+  <ExchangeRates v-else-if="widgetType === 'exchange-rates'" :options="widgetOptions" />
+  <StockPriceChart v-else-if="widgetType === 'stock-price-chart'" :options="widgetOptions" />
+  <Jokes v-else-if="widgetType === 'joke'" :options="widgetOptions" />
+  <IframeWidget v-else-if="widgetType === 'iframe'" :options="widgetOptions" />
 </template>
 
 <script>
+import ErrorHandler from '@/utils/ErrorHandler';
 import Clock from '@/components/Widgets/Clock.vue';
 import Weather from '@/components/Widgets/Weather.vue';
 import WeatherForecast from '@/components/Widgets/WeatherForecast.vue';
@@ -35,12 +24,11 @@ import XkcdComic from '@/components/Widgets/XkcdComic.vue';
 import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
 import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
 import Jokes from '@/components/Widgets/Jokes.vue';
-import Collapsable from '@/components/LinkItems/Collapsable.vue';
+import IframeWidget from '@/components/Widgets/IframeWidget.vue';
 
 export default {
   name: 'Widget',
   components: {
-    Collapsable,
     Clock,
     Weather,
     WeatherForecast,
@@ -51,19 +39,21 @@ export default {
     ExchangeRates,
     StockPriceChart,
     Jokes,
+    IframeWidget,
   },
   props: {
     widget: Object,
     index: Number,
   },
   computed: {
-    displayData() {
-      return this.widget.displayData || {};
-    },
     groupId() {
       return `widget-${this.index}`;
     },
     widgetType() {
+      if (!this.widget.type) {
+        ErrorHandler('Missing type attribute for widget');
+        return null;
+      }
       return this.widget.type.toLowerCase();
     },
     widgetOptions() {