Skip to content

Commit

Permalink
update welcome to show all services.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wildone
wildone committed Sep 30, 2024
1 parent be4a804 commit 7b59ca9
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 22 deletions.
229 changes: 207 additions & 22 deletions src/components/Welcome/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
<h1>Experiences</h1>
<div class="experiences">
<div
class="experience"
v-for="experience in experiencesList"
:key="experience.id"
class="experience"
>
<Card>
<template #header>
<i :class="experience.icon" style="font-size: 2.5rem"></i>
<i :class="experience.icon"></i>
</template>
<template #title>{{ experience.label }}</template>
<template #content>
Expand All @@ -48,19 +48,17 @@
<h1>Services</h1>

<div class="services">
<div class="service" v-for="service in serviceList" :key="service.id">
<Card>
<template #title>{{ service.title }}</template>
<div v-for="service in serviceList" :key="service.id" class="service">
<Card :status="service.status">
<template #header>
<i :class="service.icon" :visible="service.icon"></i>
</template>
<template #title>{{ service.name }}</template>
<template #content>
<p class="m-0">
{{ service.description }}
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<Button label="Open" class="w-full" />
</div>
</template>
</Card>
</div>
</div>
Expand All @@ -72,7 +70,7 @@
<Card>
<template #title>Settings</template>
<template #content>
<Button outlined class="border-2" @click="openSettings($event)">
<Button outlined @click="openSettings($event)">
<tune-icon v-tooltip="$t(`tooltips.settings`)" :size="50" />
</Button>
</template>
Expand All @@ -85,16 +83,15 @@
</template>

<script>
import { isProxy, toRaw } from "vue"
import { getModule } from "vuex-module-decorators"
import MenuBar from "@/components/Menu/MenuBar.vue"
import MainMenu from "@/components/Menu/MainMenu.vue"
import Card from "primevue/card"
import Button from "primevue/button"
import TuneIcon from "vue-material-design-icons/Tune.vue"
import Settings from "@/store/Modules/Settings"
const settingsModule = getModule(Settings)
import SettingsStore from "@/store/Modules/Settings"
const settingsModule = getModule(SettingsStore)
import Services from "@/store/Modules/Services"
const servicesModule = getModule(Services)
Expand All @@ -108,39 +105,72 @@
services: [
{
id: 1,
title: "Service 1",
name: "Service 1",
description: "Description 1",
type: "",
status: 1,
url: "",
icon: "",
enabled: true,
},
{
id: 2,
title: "Service 2",
name: "Service 2",
description: "Description 2",
type: "",
status: 120,
url: "",
icon: "",
enabled: true,
},
{
id: 3,
title: "Service 3",
name: "Service 3",
description: "Description 3",
type: "",
status: -1,
url: "",
icon: "",
enabled: true,
},
],
showMainOverlayMenu: false,
mainMenuVisible: true,
}
},
computed: {
focusMode() {
return settingsModule.data.focus
},
experiencesList() {
return this.experiences.filter((item) => item.id !== "welcome")
},
serviceList() {
console.log("serviceList", servicesModule.serviceList)
return servicesModule.serviceList
return this.services
// return this.services.filter((item) => item.enabled == true)
},
serviceStatusColorList() {
console.log(
"serviceStatusColorList",
servicesModule.serviceStatusColorList
)
return servicesModule.serviceStatusColorList
},
serviceTypeList() {
console.log("serviceTypeList", servicesModule.serviceTypeList)
return servicesModule.serviceTypeList
},
serviceStatusList() {
console.log("serviceStatusList", servicesModule.serviceStatusList)
return servicesModule.serviceStatusList
},
},
async mounted() {
// get all the experiences
this.experiences = await this.getExperiences()
// get all the services
this.services = await this.getServices()
// this.services = await this.getServices()
},
methods: {
//Onload object tag
Expand Down Expand Up @@ -168,13 +198,168 @@
console.log("open url", url)
this.$router.push(url)
},
handleClick(event) {
console.log(event)
openService(url) {
console.log("open service", url)
window.open(url, "_blank")
},
},
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.service-status {
margin-left: auto;
margin-right: 1rem;
height: 1rem;
width: 1rem;
padding-left: 1rem;
background-color: gray;
border-radius: 50%;
display: inline-block;
//TODO: turn this into a computed property
&[status="-10"] {
background-color: v-bind("serviceStatusColorList['error']");
}
&[status="-1"] {
background-color: v-bind("serviceStatusColorList['error']");
}
&[status="0"] {
background-color: v-bind("serviceStatusColorList['disabled']");
}
&[status="1"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="10"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="11"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="14"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="15"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="20"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="25"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="30"] {
background-color: v-bind("serviceStatusColorList['installed']");
}
&[status="50"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="65"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="70"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="75"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="80"] {
background-color: v-bind("serviceStatusColorList['stopped']");
}
&[status="90"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="100"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="104"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="105"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="120"] {
background-color: v-bind("serviceStatusColorList['started']");
}
&[status="200"] {
background-color: v-bind("serviceStatusColorList['completedwerror']");
}
&[status="220"] {
background-color: v-bind("serviceStatusColorList['completed']");
}
}
.p-card {
&[status="-10"] {
background-color: v-bind("serviceStatusColorList['error']");
}
&[status="-1"] {
background-color: v-bind("serviceStatusColorList['error']");
}
&[status="0"] {
background-color: v-bind("serviceStatusColorList['disabled']");
}
&[status="1"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="10"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="11"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="14"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="15"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="20"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="25"] {
background-color: v-bind("serviceStatusColorList['installing']");
}
&[status="30"] {
background-color: v-bind("serviceStatusColorList['installed']");
}
&[status="50"] {
background-color: v-bind("serviceStatusColorList['available']");
}
&[status="65"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="70"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="75"] {
background-color: v-bind("serviceStatusColorList['stopping']");
}
&[status="80"] {
background-color: v-bind("serviceStatusColorList['stopped']");
}
&[status="90"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="100"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="104"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="105"] {
background-color: v-bind("serviceStatusColorList['starting']");
}
&[status="120"] {
background-color: v-bind("serviceStatusColorList['started']");
}
&[status="200"] {
background-color: v-bind("serviceStatusColorList['completedwerror']");
}
&[status="220"] {
background-color: v-bind("serviceStatusColorList['completed']");
}
}
</style>
4 changes: 4 additions & 0 deletions src/components/Welcome/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
margin: 1rem 0;
}

i {
font-size: 2.5rem;
}

.experiences {
display: flex;
flex-direction: row;
Expand Down

0 comments on commit 7b59ca9

Please sign in to comment.