Skip to content

Commit

Permalink
add welcome screen.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wildone
wildone committed Sep 30, 2024
1 parent 403c33b commit be4a804
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 40 deletions.
116 changes: 86 additions & 30 deletions src/components/Welcome/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,46 @@
<div class="experiences">
<div
class="experience"
v-for="experience in experiences"
v-for="experience in experiencesList"
:key="experience.id"
>
<Card>
<template #header>
<img alt="user header" :src="experience.image" />
<i :class="experience.icon" style="font-size: 2.5rem"></i>
</template>
<template #title>{{ experience.title }}</template>
<template #subtitle>{{ experience.subtitle }}</template>
<template #title>{{ experience.label }}</template>
<template #content>
<p class="m-0">
{{ experience.description }}
</p>
</template>
<template #footer>
<div class="flex gap-3 mt-1">
<Button label="Open" class="w-full" />
<Button
label="Open"
class="w-full"
@click="openUrl(experience.to)"
/>
</div>
</template>
</Card>
</div>
</div>

<h1>Services</h1>

<div class="services">
<div class="service" v-for="service in serviceList" :key="service.id">
<Card>
<template #title>{{ service.title }}</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>
Expand All @@ -44,64 +67,80 @@

<h1>Config</h1>

<div class="config">
<Card>
<template #content>
<p class="m-0">
<!-- icon -->
<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>
</p>
</template>
</Card>
<div class="configs">
<div class="config">
<Card>
<template #title>Settings</template>
<template #content>
<Button outlined class="border-2" @click="openSettings($event)">
<tune-icon v-tooltip="$t(`tooltips.settings`)" :size="50" />
</Button>
</template>
</Card>
</div>
</div>
</div>
</div>
</div>
</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 Settings from "@/store/Modules/Settings"
import Services from "@/store/Modules/Services"
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 Services from "@/store/Modules/Services"
const servicesModule = getModule(Services)
export default {
name: "Welcome",
components: { MenuBar, MainMenu, Card, Button },
components: { MenuBar, MainMenu, Card, Button, TuneIcon },
data() {
return {
experiences: [
experiences: [],
services: [
{
id: 1,
title: "Experience 1",
subtitle: "Subtitle 1",
title: "Service 1",
description: "Description 1",
image: "https://via.placeholder.com/100",
},
{
id: 2,
title: "Experience 2",
subtitle: "Subtitle 2",
title: "Service 2",
description: "Description 2",
image: "https://via.placeholder.com/100",
},
{
id: 3,
title: "Experience 3",
subtitle: "Subtitle 3",
title: "Service 3",
description: "Description 3",
image: "https://via.placeholder.com/100",
},
],
showMainOverlayMenu: false,
mainMenuVisible: true,
}
},
mounted() {
computed: {
experiencesList() {
return this.experiences.filter((item) => item.id !== "welcome")
},
serviceList() {
console.log("serviceList", servicesModule.serviceList)
return servicesModule.serviceList
},
},
async mounted() {
// get all the experiences
this.getExperiences()
this.experiences = await this.getExperiences()
// get all the services
this.services = await this.getServices()
},
methods: {
//Onload object tag
Expand All @@ -113,7 +152,24 @@
},
// get all the experiences
async getExperiences() {
// this.experiences = await servicesModule.getExperiences()
console.log("get experiences")
return settingsModule.data.listOfMenu
},
// get all the services
async getServices() {
console.log("get services")
return await servicesModule.getServices()
},
openSettings(event) {
console.log("open settings")
settingsModule.openSettingsDialog("general")
},
openUrl(url) {
console.log("open url", url)
this.$router.push(url)
},
handleClick(event) {
console.log(event)
},
},
}
Expand Down
46 changes: 37 additions & 9 deletions src/components/Welcome/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@

.header {
width: 100%;
height: 75px;
display: flex;
justify-content: space-between;
flex-direction: column;
Expand All @@ -34,11 +33,34 @@
flex: 1;
overflow: hidden;
position: relative;
background-color: var(--surface);
box-sizing: border-box;

.experience {
padding: 1rem;
text-align: center;

.p-card.p-component {
width: 20rem;
overflow: hidden;
}

.p-button {
width: 100%;
margin-top: 1rem;
}
}
}

.services {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
position: relative;

.service {
padding: 1rem;
text-align: center;

.p-card {
width: 20rem;
overflow: hidden;
Expand All @@ -50,15 +72,21 @@
}
}

.config {
.configs {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 1rem;
flex: 1;
overflow: hidden;
position: relative;

.config {
padding: 1rem;
text-align: center;

.p-button {
width: 100%;
margin-top: 1rem;
.p-card {
width: 20rem;
overflow: hidden;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const router = createRouter({
},
{
path: "/",
redirect: "/home/project",
redirect: "/welcome",
},
],
})
Expand Down

0 comments on commit be4a804

Please sign in to comment.