Skip to content

Commit

Permalink
added sidebar to the expert installation
Browse files Browse the repository at this point in the history
  • Loading branch information
Petr Gadorek committed Nov 29, 2024
1 parent 039c6a2 commit 4c5db12
Showing 1 changed file with 194 additions and 63 deletions.
257 changes: 194 additions & 63 deletions src/components/WizardStep.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,38 @@
<template>
<div class="wizard-container">
<div class="wizard-step-container">
<!-- <h2>Step {{ currentStep }}: {{ stepTitle }}</h2> -->
<PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
<PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
<TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
<VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
<MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
<InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
<InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
<Complete v-if="currentStep === 8" />
<div class="wizard-layout">
<div class="wizard-sidebar">
<div class="steps-list">
<div v-for="(step, index) in steps" :key="index" class="step-item" :class="{
'active': currentStep === index + 1,
'completed': currentStep > index + 1
}">
<div class="step-number">
<template v-if="currentStep > index + 1">
<svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>
<template v-else>
{{ index + 1 }}
</template>
</div>
<div class="step-title">{{ step.title }}</div>
</div>
</div>
</div>

<!-- Main content -->
<div class="wizard-container">
<div class="wizard-step-container">
<PrerequisitiesCheck :nextstep=nextStep v-if="currentStep === 1" />
<PythonSanitycheck :nextstep=nextStep v-if="currentStep === 2" />
<TargetSelect :nextstep=nextStep v-if="currentStep === 3" />
<VersionSelect :nextstep=nextStep v-if="currentStep === 4" />
<MirrorSelect :nextstep=nextStep v-if="currentStep === 5" />
<InstallationPathSelect :nextstep=nextStep v-if="currentStep === 6" />
<InstalationProgress :nextstep=nextStep v-if="currentStep === 7" />
<Complete v-if="currentStep === 8" />
</div>
</div>
</div>
</template>
Expand All @@ -18,7 +41,6 @@
import { ref, computed } from 'vue'
import { useWizardStore } from '../store'
import { NButton, NCheckbox } from 'naive-ui'
import Greet from './Greet.vue';
import PrerequisitiesCheck from './wizard_steps/PrerequisitiesCheck.vue';
import PythonSanitycheck from './wizard_steps/PythonSanitycheck.vue';
import TargetSelect from './wizard_steps/TargetSelect.vue';
Expand All @@ -28,61 +50,170 @@ import InstallationPathSelect from './wizard_steps/InstallationPathSelect.vue';
import InstalationProgress from './wizard_steps/InstalationProgress.vue';
import Complete from './wizard_steps/Complete.vue';
export default {
components: { Complete, NButton, NCheckbox, Greet, PrerequisitiesCheck, PythonSanitycheck, TargetSelect, VersionSelect, MirrorSelect, InstallationPathSelect, InstalationProgress },
setup() {
const store = useWizardStore()
const steps = [
{
title: "Prerequisities Check ",
},
{
title: "Python Sanity check",
},
{
title: "Select Target",
},
{
title: "Select IDF Version",
},
{
title: "Select mirror",
},
{
title: "Select Installation Path",
},
{
title: "Installation progress",
},
{
title: "Instalation Complete",
name: 'WizardStep',
components: {
Complete,
NButton,
NCheckbox,
PrerequisitiesCheck,
PythonSanitycheck,
TargetSelect,
VersionSelect,
MirrorSelect,
InstallationPathSelect,
InstalationProgress,
},
data() {
return {
steps: [
{ title: "Prerequisities Check" },
{ title: "Python Sanity check" },
{ title: "Select Target" },
{ title: "Select IDF Version" },
{ title: "Select mirror" },
{ title: "Select Installation Path" },
{ title: "Installation progress" },
{ title: "Instalation Complete" }
]
}
},
computed: {
store() {
return useWizardStore()
},
currentStep() {
return this.store.currentStep
},
totalSteps() {
return this.store.totalSteps
},
stepTitle() {
return this.steps[this.store.currentStep - 1].title
}
},
methods: {
initializeSteps() {
this.steps = [
{ title: "Prerequisities Check" },
{ title: "Python Sanity check" },
{ title: "Select Target" },
{ title: "Select IDF Version" },
{ title: "Select mirror" },
{ title: "Select Installation Path" },
{ title: "Installation progress" },
{ title: "Instalation Complete" }
];
},
nextStep() {
if (this.store.currentStep === 1) {
// this.store.updateData({ deviceName: deviceName.value })
} else if (this.store.currentStep === 2) {
// this.store.updateData({ connectionType: connectionType.value })
} else if (this.store.currentStep === 3) {
// this.store.updateData({ confirmed: confirmInstall.value })
}
]; // Add more steps as needed
this.store.nextStep()
},
previousStep() {
this.store.previousStep()
},
},
onBeforeMount() {
this.store = useWizardStore();
this.initializeSteps();
}
}
</script>

const stepTitle = computed(() => {
return steps[store.currentStep - 1].title
})
<style scoped>
.wizard-layout {
display: flex;
min-height: 100vh;
}
.wizard-sidebar {
width: 280px;
background-color: #f5f5f5;
padding: 20px;
border-right: 1px solid #e0e0e0;
}
const nextStep = () => {
if (store.currentStep === 1) {
// store.updateData({ deviceName: deviceName.value })
} else if (store.currentStep === 2) {
// store.updateData({ connectionType: connectionType.value })
} else if (store.currentStep === 3) {
// store.updateData({ confirmed: confirmInstall.value })
}
store.nextStep()
}
.steps-list {
display: flex;
flex-direction: column;
gap: 12px;
}
return {
currentStep: computed(() => store.currentStep),
totalSteps: computed(() => store.totalSteps),
stepTitle,
nextStep,
previousStep: store.previousStep
}
}
.step-item {
display: flex;
align-items: center;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
color: #666;
}
.step-item:hover {
background-color: #e8e8e8;
}
.step-item.active {
background-color: #ffeeed;
color: #e7352c;
}
.step-item.completed {
color: #666;
}
.step-number {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
border: 1px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 14px;
position: relative;
}
.checkmark {
width: 16px;
height: 16px;
}
.step-title {
font-size: 14px;
font-weight: 500;
}
.wizard-container {
flex: 1;
padding: 20px;
}
.wizard-step-container {
max-width: 800px;
margin: 0 auto;
}
/* Add smooth transitions */
.step-item {
transition: all 0.3s ease;
}
.step-number {
transition: all 0.3s ease;
}
/* Add subtle shadow to active step */
.step-item.active {
box-shadow: 0 2px 4px rgba(231, 53, 44, 0.1);
}
</script>
</style>

0 comments on commit 4c5db12

Please sign in to comment.