From 126ae5f155821999236f5ee1dac177c0d71e00bc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 11 Aug 2021 05:04:32 +0100
Subject: [PATCH] :construction: Adds new component to handle multi-tasking

---
 .../Workspace/MultiTaskingWebComtent.vue      | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/Workspace/MultiTaskingWebComtent.vue

diff --git a/src/components/Workspace/MultiTaskingWebComtent.vue b/src/components/Workspace/MultiTaskingWebComtent.vue
new file mode 100644
index 00000000..2be51dd5
--- /dev/null
+++ b/src/components/Workspace/MultiTaskingWebComtent.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="web-content" ref="container">
+    <button @click="launchApp">Click Me</button>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import WebContent from '@/components/Workspace/WebContent';
+
+export default {
+  name: 'WebContent',
+  props: {
+    url: String,
+    currentApp: String,
+  },
+  data: () => ({
+    openApps: [],
+    activeApp: '',
+  }),
+  methods: {
+    launchApp() {
+      if (this.openApps.includes(this.url)) {
+        this.openExistingApp();
+      } else {
+        this.openApps.push(this.url);
+        this.appendNewApp();
+      }
+    },
+    appendNewApp() {
+      const ComponentClass = Vue.extend(WebContent);
+      const instance = new ComponentClass({
+        propsData: { url: this.url },
+      });
+      instance.$mount(); // pass nothing
+      this.$refs.container.appendChild(instance.$el);
+    },
+    openExistingApp() {
+      console.log('Already Exists', this.url);
+      // TODO: Find open frame, and set visibility
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+iframe {
+  position: absolute;
+  left: var(--side-bar-width);
+  height: calc(100% - var(--header-height));
+  width: calc(100% - var(--side-bar-width));
+  border: none;
+  background: white;
+}
+
+</style>