From efc4bcd61a010de2e7f99b175233955224f3e87f Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Sat, 23 Apr 2022 14:38:17 +0100
Subject: [PATCH] added toggle switch to header to toggle between fullview and
 default view

---
 src/views/dashboard/panel/Tool.vue | 34 ++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 2c079d76..8232403e 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -104,6 +104,20 @@ limitations under the License. -->
           </i>
         </el-tooltip>
       </div>
+
+      <div class="switch">
+        <span style="margin-right: 5px">Toggle full view</span>
+        <el-switch
+          v-model="dashboardStore.fullView"
+          active-text="Full view"
+          inactive-text="FV"
+          size="small"
+          inline-prompt
+          active-color="#409eff"
+          inactive-color="#999"
+          @change="toggleFullView"
+        />
+      </div>
       <div class="switch">
         <el-switch
           v-model="dashboardStore.editMode"
@@ -121,7 +135,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { reactive, ref, computed, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import {
@@ -144,6 +158,13 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
+const path = useRoute();
+const router = useRouter();
+if (!path.path.includes("fullview")) {
+  dashboardStore.setViewMode(false)
+}else{
+  dashboardStore.setViewMode(true)
+}
 const toolIcons = ref<{ name: string; content: string; id: string }[]>(
   EndpointRelationTools
 );
@@ -387,7 +408,16 @@ function changeDestPods(pod: any) {
     selectorStore.setCurrentDestPod(null);
   }
 }
-
+function toggleFullView(e) {
+  dashboardStore.setViewMode(e);
+  if (dashboardStore.fullView) {
+    const newPath = path.path.replace("dashboard", "fullview");
+    router.push(newPath);
+  } else {
+    const newPath = path.path.replace("fullview", "dashboard");
+    router.push(newPath);
+  }
+}
 function changeMode() {
   if (dashboardStore.editMode) {
     ElMessage.warning(t("editWarning"));