🚧 Basic structure for widgets

src/components/Widgets/WidgetBase.vue

@@ -0,0 +1,52 @@
+<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" />
+  </Collapsable>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Widgets/Clock.vue';
+import Collapsable from '@/components/LinkItems/Collapsable.vue';
+
+export default {
+  name: 'Widget',
+  components: {
+    Collapsable,
+    Clock,
+  },
+  props: {
+    widget: Object,
+    index: Number,
+  },
+  computed: {
+    displayData() {
+      return this.widget.displayData || {};
+    },
+    groupId() {
+      return `widget-${this.index}`;
+    },
+    widgetType() {
+      return this.widget.type.toLowerCase();
+    },
+    widgetOptions() {
+      return this.widget.options || {};
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
+</style>

src/components/Widgets/WidgetGroup.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <WidgetBase
+      v-for="(widget, widgetIndex) in widgets"
+      :key="widgetIndex"
+      :widget="widget"
+      :index="widgetIndex"
+    />
+  </div>
+</template>
+
+<script>
+import WidgetBase from '@/components/Widgets/WidgetBase';
+
+export default {
+  name: 'WidgetGroup',
+  components: {
+    WidgetBase,
+  },
+  props: {
+    widgets: Array,
+  },
+  computed: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
+</style>

src/views/Home.vue

@@ -27,6 +27,8 @@
         + (singleSectionView ? 'single-section-view ' : '')
         + (this.colCount ? `col-count-${this.colCount} ` : '')"
       >
+      <!-- Display any dynamic widget content -->
+      <WidgetGroup v-if="!singleSectionView" :widgets="widgets" />
       <Section
         v-for="(section, index) in filteredTiles"
         :key="index"
@@ -61,6 +63,7 @@
 
 import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import Section from '@/components/LinkItems/Section.vue';
+import WidgetGroup from '@/components/Widgets/WidgetGroup';
 import EditModeSaveMenu from '@/components/InteractiveEditor/EditModeSaveMenu.vue';
 import ExportConfigMenu from '@/components/InteractiveEditor/ExportConfigMenu.vue';
 import AddNewSection from '@/components/InteractiveEditor/AddNewSectionLauncher.vue';
@@ -74,6 +77,7 @@ export default {
   name: 'home',
   components: {
     SettingsContainer,
+    WidgetGroup,
     EditModeSaveMenu,
     ExportConfigMenu,
     AddNewSection,
@@ -96,6 +100,9 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    widgets() {
+      return this.$store.getters.widgets;
+    },
     modalOpen() {
       return this.$store.state.modalOpen;
     },