From acf2e639c585710d086cbf7a8b9a6eaa59f7f6d5 Mon Sep 17 00:00:00 2001
From: JesusPerez <jpl@jesusperez.pro>
Date: Tue, 19 Oct 2021 21:45:43 +0100
Subject: [PATCH] chore: fix request parse

---
 src/views/Home.vue  | 375 +++++++++++++++++++++++++++++++-------------
 src/views/Login.vue |   3 +-
 2 files changed, 268 insertions(+), 110 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 405b25d..39eebc2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,27 +1,145 @@
+<template>
+  <NavMenu v-if="use_nav" :usetitle="false" :title="title" navtitle="" :items="navMenuItems" @on-nav-menu="onNavMenu">
+    <template #opslist v-if="clds_groups.length > 0 ">
+		  <li class="mr-3">
+		  <select id="cld-select" class="rounded-xl bg-light-300 form-select p-2 mt-1 block w-full ddark:hover:bg-gray-800 ddark:bg-gray-500 ddark:text-gray-200 bg-gray-200 text-gray-800" @change="update_cloud_selection">
+				<option
+					v-for="(cld, index) in clouds_options"
+					:key="index"
+					class="bg-gray-200 text-gray-800 appearance-none border-none inline-block py-3 pl-3 pr-8 rounded leading-tight ddark:hover:bg-gray-800 ddark:bg-gray-500 ddark:text-gray-200"
+				  :selected="cld_sel_idx === index"
+				>
+					{{ cld.name }}
+				</option>
+			</select>
+			</li>
+    </template>
+    <template #search v-if="(cld_selected.cloud && cld_selected.cloud.size > 0 ) || cld_selected.apps && cld_selected.apps.size > 0">
+				<input id="search" v-model="search" class="rounded-l-full w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none" type="text" :placeholder="t('nav.Search','Search')">
+				<div class="p-1">
+					<button
+						class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none flex items-center justify-center"
+						@click="on_search"
+					>
+						<span class="text-xs">
+							<carbon-search class="align-bottom" />
+						</span>
+					</button>
+				</div>
+    </template>
+    <template #lastitems>
+		    <li class="mr-3">
+				 <MenuLocales :label-mode="localesLabelMode" :include-current="includeCurrLocale" />
+				</li>
+    </template>
+  </NavMenu>
+	<Profile v-if="show_profile" />
+	<div id="tophome">
+		<div v-if="cld_selected.cloud && cld_selected.cloud.size > 0" class="-mt-2 text-gray-800 lg:p-1">
+			<CloudGroups
+				:title="t('nav.Tasks','Services')"
+				target="tsksrvcs"
+				:groups="cld_selected.cloud"
+				:search="search"
+				:hide="tasks_hide"
+				@on-cloud-group="onCloudGroup"
+			/>
+		</div>
+		<div v-if="cld_selected.apps && cld_selected.apps.size > 0" class="mt-1 text-gray-800 p-2 lg:p-4">
+			<CloudGroups
+				:title="t('nav.Apps','Apps')"
+				target="appsrvcs"
+				:groups="cld_selected.apps"
+				:search="search"
+				:hide="apps_hide"
+				@on-cloud-group="onCloudGroup"
+			/>
+		</div>
+		<div v-if="cld_selected.infos && cld_selected.infos.length > 0" class="shadow-lg mx-auto bg-gray-100 text-gray-800 mt-4 md:mt-2 bg-light-800 dark:bg-gray-600 w-full p-2 rounded-l">
+			<Infos :items="cld_selected.infos" :title="t('nav.Informations','Informations')" 
+				@on-cloud-info-item="onCloudInfoItem"
+			/>
+		</div>
+	</div>
+</template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
 import CloudGroups from '~/components/CloudGroups.vue'
 // import ProfileView from '~/components/ProfileView.vue'
 import NavMenu from '~/components/NavMenu.vue'
-import AccordionView from '~/components/AccordionView.vue'
+import Infos from '~/views/Infos.vue'
+import Profile from '~/components/Profile.vue'
 import { load_data } from '~/hooks/utils'
 // import { translate, show_message } from '~/hooks/utils'
 import useState from '~/hooks/useState'
-import { StatusItemType, StatusItemDataType, ResCloudDataCheck, CloudGroupServcType } from '~/typs/clouds'
-import { MenuItemType } from '~/typs'
+import { StatusItemType, StatusItemDataType, ResCloudDataCheckDefs, CloudGroupServcType, CloudDataCheck,CloudOptionType } from '~/typs/clouds'
+import { SideMenuItemType } from '~/typs/cmpnts'
+import MenuLocales from '@/menus/MenuLocales.vue'
+import { AppDefsAction } from '~/store/types'
+// import { AppDataAction, AppCheckAction, AppDefsAction } from '~/store/types'
+
+enum LocalesLabelModes {
+  value = 'val',
+  translation = 'trans',
+}
+
+const router = useRouter()
+const map_key = router.currentRoute.value.meta.mapkey as string || 'ui'
+const use_nav = router.currentRoute.value.meta.useNav as boolean
+const ctx = router.currentRoute.value.meta.ctx || ''
+const localesLabelMode = ref(LocalesLabelModes.translation)
+const includeCurrLocale = true
+
+const store = useStore()
+const { t } = useI18n()
 const title = ref('Services Status')
-const search = ref('')
+const search = useState().search
 // const router = useRouter()
 // const go = () => {
 //   if (name.value)
 //     router.push(`/hi/${encodeURIComponent(name.value)}`)
 // }
-const menu_items = useState().menu_items
+const show_profile = computed(() => useState().show_profile.value)
+const defs = computed(() => store.state.app_defs.main.get(map_key) || {})
+
+const menu_items = computed((): SideMenuItemType[] => {
+  const defsMenuItems = defs.value && defs.value.sidebar && defs.value.sidebar.menu_items ? defs.value.sidebar.menu_items : [] as SideMenuItemType[]
+  const all_items = [].concat(defsMenuItems || []) // .concat(useState().sidebarMenuItems.value as SideMenuItemType[] | any)
+	useState().sidebarMenuItems.value = all_items.filter((itm: SideMenuItemType) => {
+	  if (itm.ctx && itm.ctx === ctx) {
+			return true
+		} else if (itm.ctx && itm.ctx !== ctx) {
+			return false
+		} else {
+			return true
+		}
+	})
+	return useState().sidebarMenuItems.value
+})
+const navMenuItems = computed(() => {
+   const menu_items_active = menu_items.value.filter(menuitem => {
+		  switch (menuitem.click) {
+				case 'tsksrvcs':
+					return cld_selected.value.cloud && cld_selected.value.cloud.size > 0
+					break
+        case 'appsrvcs':
+					return cld_selected.value.apps && cld_selected.value.apps.size > 0
+					break
+        case 'srvcstatus':
+					return cld_selected.value.infos &&  cld_selected.value.infos.length > 0
+					break
+				default:
+					return false
+			}
+	 })
+	 return menu_items_active
+}) 
 const on_search = () => {
 }
 const tasks_hide = ref(false)
 const apps_hide = ref(false)
-const on_cloud_group = (target: string) => {
+const onCloudGroup = (target: string) => {
   if (target) {
     switch (target) {
       case useState().tsksrvcs:
@@ -34,15 +152,29 @@ const on_cloud_group = (target: string) => {
     }
   }
 }
-const on_nav_menu = (item: MenuItemType) => {
+const onAppHome = () => {
+	const dom_id = document.getElementById('tophome')
+  if (dom_id) {
+    dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+    setTimeout(() => window.scrollBy(0, -40), 1000)
+  }
+}
+useState().app_home_click.value = onAppHome
+useState().backdrop_blur.value = 2
+useState().back_opacity.value = 100
+useState().panels.value.search = { style: 'h-auto'}
+
+const onNavMenu = (item: SideMenuItemType) => {
   if (item) {
-    const dom_id = document.getElementById(item.id)
+    const dom_id = document.getElementById(item.click as string)
     if (dom_id) {
       dom_id.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
       setTimeout(() => window.scrollBy(0, -40), 1000)
     }
-    menu_items.value = menu_items.value.map(i => ({ ...i, active: i.id !== item.id ? false : !i.active }))
-    switch (item.id) {
+ 	  // const new_defs = JSON.parse(JSON.stringify(store.state.app_defs.main.get(map_key)))
+		// new_defs.sidebar.menu_items = menu_items.value.map(i => ({ ...i, active: i.click !== item.click? false : !i.active }))
+		// store.dispatch(AppDefsAction.addDefs, new_defs)
+    switch (item.click) {
       case useState().tsksrvcs:
         tasks_hide.value = false
         break
@@ -53,26 +185,65 @@ const on_nav_menu = (item: MenuItemType) => {
     }
   }
 }
-const status_entries = ref([] as StatusItemType[])
-const statusitems: StatusItemType[] = [
-  {
-    title: 'Why do I need Rust?',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iure quas laudantium dicta impedit, est id delectus molestiae deleniti enim nobis rem et nihil.',
-    isOpen: true,
-  },
-  {
-    title: 'Why am I so awesome?',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
-    isOpen: false,
-  },
-  {
-    title: 'Why learn on THIS?',
-    text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cumque, nulla harum aspernatur veniam ullam provident neque temporibus autem itaque odit.',
-    isOpen: false,
-  },
-]
+useState().side_menu_click.value = onNavMenu
+const cld_default_name = 'ma'
+const clds_groups = ref([] as CloudDataCheck[])
+const cld_sel_idx= ref(0)
+const cld_selected = ref({} as CloudDataCheck)
 
-const groups = ref(new Map() as Map<string, Map<string, CloudGroupServcType>>)
+const clouds_options = computed(() => {
+	const options = [] as CloudOptionType[]
+	clds_groups.value.forEach((it,idx) => {
+    options.push({
+			name: it.name,
+			option: idx,
+		})
+	})
+  return options
+})
+const update_cloud_selection = (e: any) => {
+	if (clds_groups.value[e.target.selectedIndex]) {
+		cld_sel_idx.value=e.target.selectedIndex
+		cld_selected.value = clds_groups.value[cld_sel_idx.value] 
+	}
+}
+const onCloudInfoItem = (item: StatusItemType) => {
+	if (item) {
+    clds_groups.value[cld_sel_idx.value].infos = clds_groups.value[cld_sel_idx.value].infos.map((i: StatusItemType) => ({ ...i, isOpen: i.title !== item.title ? false : !i.isOpen }))
+		cld_selected.value = clds_groups.value[cld_sel_idx.value]
+	}
+}
+const sortInfos = (data: StatusItemType[], rev: boolean): StatusItemType[] => {
+	const mapped = data.map(function(el, i) {
+    return { index: i, value: parseInt(el.datetime.replaceAll(' ','').replaceAll('/','').replaceAll(':',''),0) || 0 };
+  })
+	mapped.sort(function(a, b) {
+		if (a.value > b.value) {
+			return rev ? -1 : 1;
+		}
+		if (a.value < b.value) {
+			return rev ? 1 : -1;
+		}
+		return 0;
+	});
+	const result = mapped.map(function(el){
+		return data[el.index];
+	});
+	return result
+}
+onBeforeUnmount(() => {
+	useState().sidebarMenuItems.value = useState().sidebarMenuItems.value.filter((itm: SideMenuItemType) => {
+	  if (itm.ctx && itm.ctx === ctx) {
+			return false
+		} else if (itm.ctx && itm.ctx !== ctx) {
+			return false
+		} else {
+			return true
+		}
+	})
+	useState().side_menu_click.value = () => router.push('/')
+	useState().app_home_click.value = () => router.push('/')
+})
 onMounted(async() => {
 //  await nextTick()
   const use_local = false
@@ -81,88 +252,76 @@ onMounted(async() => {
   if (!use_local)
     url = `${rooturl}/info`
  
-  await load_data(url, 0, 2000, (res: ResCloudDataCheck) => {
+	clds_groups.value = [] as CloudDataCheck[]
+  await load_data(url, 0, 2000, (res: ResCloudDataCheckDefs) => {
     // use Map to keep objects order
     // use Object.keys + sort to map same result order
-    if (res.group_apps) {
-      Object.keys(res.group_apps).sort().forEach((grp_key) => {
-        const data: Map<string, CloudGroupServcType> = new Map()
-        Object.keys(res.group_apps[grp_key]).sort().forEach((key) => {
-          data.set(key, res.group_apps[grp_key][key])
-        })
-        groups.value.set(grp_key, data)
-      })
-    }
-    if (res.group_cloud) {
-      Object.keys(res.group_cloud).forEach((grp_key) => {
-        Object.keys(res.group_cloud[grp_key]).sort().forEach((key) => {
-          const data: CloudGroupServcType[] = res.group_cloud[grp_key][key]
-          data.forEach((it, index) => {
-						if (groups.value.get(grp_key)) {
-							const m = groups.value.get(grp_key)
-							if (m && m.get(key) && it.tsksrvcs) {
-								const m_data = m.get(key)
-								if (m_data && m_data[index]) {
-									m_data[index].tsksrvcs = it.tsksrvcs
-									const new_data: Map<string, CloudGroupServcType> = new Map()
-									new_data.set(key, m_data)
-									groups.value.set(grp_key, new_data)
+		const clouds_groups =  [] as CloudDataCheck[]
+		res.check.forEach((kld,kldidx) => {
+			if (kld.name === cld_default_name)
+	      cld_sel_idx.value=kldidx
+			const check_data: Map<string, Map<string, CloudGroupServcType>> = new Map()
+			clouds_groups[kldidx] = {} as CloudDataCheck
+			Object.keys(kld.apps).sort().forEach((grp_key) => {
+					const data: Map<string, CloudGroupServcType> = new Map()
+					Object.keys(kld.apps[grp_key]).sort().forEach((key) => {
+						const grp_res: CloudGroupServcType[] = kld.apps[grp_key][key].filter((it:CloudGroupServcType) => it.tsksrvcs.length > 0 || it.appsrvcs.length > 0)
+						if (grp_res.length > 0)
+							data.set(key, kld.apps[grp_key][key])
+					})
+					if (data.size > 0)
+				  	check_data.set(grp_key, data)
+			})
+			clouds_groups[kldidx] = {
+				name: kld.name,
+				apps: check_data,
+				cloud: kld.cloud ? new Map() : check_data,
+				infos: [] as StatusItemType[],
+			}
+			if (kld.cloud) {
+				Object.keys(kld.cloud).sort().forEach((grp_key) => {
+					Object.keys(kld.cloud[grp_key]).sort().forEach((key) => {
+						const data: CloudGroupServcType[] = kld.cloud[grp_key][key]
+						data.forEach((it, index) => {
+							if (clouds_groups[kldidx].apps.get(grp_key)) {
+								const m = clouds_groups[kldidx].apps.get(grp_key)
+								if (m && m.size > 0 && m.get(key) && it.tsksrvcs) {
+									const m_data = m.get(key)
+									if (m_data && m_data[index]) {
+										m_data[index].tsksrvcs = it.tsksrvcs
+										const new_data: Map<string, CloudGroupServcType> = new Map()
+										new_data.set(key, m_data)
+										clouds_groups[kldidx].cloud.set(grp_key, new_data)
+									}
 								}
-							}
-						} 	
-          })
-        })
-      })
-    }
-    if (res.statusentries) {
-      const statusentries: StatusItemType[] = []
-      res.statusentries.forEach((it: StatusItemDataType) => {
-        statusentries.push({ ...it, isOpen: false })
-      })
-      status_entries.value = statusentries
-    }
-    else {
-      status_entries.value = statusitems
-    }
+							} 	
+						})
+					})
+				})
+			}
+			let infos: StatusItemType[] = []
+      if (kld.infos) {
+				kld.infos.forEach((it: StatusItemDataType) => {
+					infos.push({ ...it, isOpen: false })
+				})
+				infos = sortInfos(infos,true)
+			}
+			clouds_groups[kldidx].infos = infos
+		})
+		clds_groups.value = clouds_groups
+		cld_selected.value = clds_groups.value[cld_sel_idx.value]
+		if (res.defs) {
+			store.dispatch(AppDefsAction.addDefs, { key: map_key, defs: res.defs })
+		}
+		useState().sidebarMenuItems.value = res.defs.sidebar.menu_items.filter((itm: SideMenuItemType) => {
+			if (itm.ctx && itm.ctx === ctx) {
+				return true
+			} else if (itm.ctx && itm.ctx !== ctx) {
+				return false
+			} else {
+				return true
+			}
+		})
   })
 })
 </script>
-
-<template>
-  <NavMenu :title="title" :items="menu_items" @on-nav-menu="on_nav_menu">
-    <template #search>
-      <input id="search" v-model="search" class="rounded-l-full w-full py-2 px-2 text-gray-700 leading-tight focus:outline-none" type="text" placeholder="Search">
-      <div class="p-1">
-        <button
-          class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none flex items-center justify-center"
-          @click="on_search"
-        >
-          <span class="text-xs">
-            <carbon-search class="align-bottom" />
-          </span>
-        </button>
-      </div>
-    </template>
-  </NavMenu>
-  <div class="mt-1 text-gray-800 p-2 lg:p-4">
-    <CloudGroups
-      title="Tasks"
-      target="tsksrvcs"
-      :groups="groups"
-      :search="search"
-      :hide="tasks_hide"
-      @on-cloud-group="on_cloud_group"
-    />
-    <CloudGroups
-      title="Apps"
-      target="appsrvcs"
-      :groups="groups"
-      :search="search"
-      :hide="apps_hide"
-      @on-cloud-group="on_cloud_group"
-    />
-  </div>
-  <div class="shadow-lg mx-auto bg-gray-200 text-gray-800 mt-4 md:mt-2 bg-light-800 w-full p-2 rounded-l">
-    <AccordionView :items="statusitems" title="Services Status" />
-  </div>
-</template>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index b054cb3..03c3df3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -115,7 +115,6 @@
 <script setup lang="ts">
 import {
   ref,
-  computed,
 } from 'vue'
 import 'a17t'
 import { useRouter } from 'vue-router'
@@ -126,7 +125,7 @@ import AppLogoImg from '@/icons/AppImg.vue'
 import AppLogoText from '@/icons/AppLogoText.vue'
 import { AppDefsAction } from '~/store/types'
 import useState from '~/hooks/useState'
-import { post_data, check_credentials } from '~/hooks/utils'
+import { post_data } from '~/hooks/utils'
 
 enum LocalesLabelModes {
   value = 'val',