Skip to content

Commit

Permalink
Fix the tutorial component
Browse files Browse the repository at this point in the history
  • Loading branch information
@mabasian
mabasian committed Aug 30, 2023
1 parent 80f44f9 commit 29bc11b
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 343 deletions.
187 changes: 21 additions & 166 deletions launcher/src/components/UI/the-node/NodeTutorial.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,28 @@
<template>
<div class="tutorial-box">
<!-- <TutorialButtons
tutorial-btn-ttl="written cuides"
tutorial-icons="/img/icon/tutorial-icons/manual-icon.png"
current-data="button"
@guided-option-clicked="handleGuidedOptionClick(button)"
@written-option-clicked="handleWrittenOptionClick(button)"
@video-option-clicked="handleVideoOptionClick(button)"
/> -->
<!-- <TutorialButtons
v-for="(button, key) in tutorialBtns"
:key="key"
:tutorial-btn-ttl="button.title"
:tutorial-icons="button.icon"
:current-data="button"
@guided-option-clicked="handleGuidedOptionClick(button)"
@written-option-clicked="handleWrittenOptionClick(button)"
@video-option-clicked="handleVideoOptionClick(button)"
/> -->

<!-- <TutorialButtons
v-for="item in tutorialTitles"
:key="item"
:tutorial-btn-ttl="item.name"
:tutorial-icons="item.icon"
:class="{ disabled: item.disable }"
@guided-option-clicked="handleGuidedOptionClick(item)"
@written-option-clicked="handleWrittenOptionClick(item)"
@video-option-clicked="handleVideoOptionClick(item)"
/> -->
<div class="tutorial-btn" @click="handleWrittenOptionClick">
<div class="icon-box"><img src="/img/icon/tutorial-icons/manual-icon.png" alt="" /></div>
<div class="name-span"><span>written guides</span></div>
<div class="name-span">
<span>{{ $t("nodeSidebarVideo.written") }}</span>
</div>
</div>
<div class="tutorial-btn" @click="handleCameraOptionClick">
<div class="icon-box camera"><img src="/img/icon/tutorial-icons/big-camera.png" alt="" /></div>
<div class="name-span"><span>written guides</span></div>
<div class="name-span">
<span>{{ $t("nodeSidebarVideo.video") }}</span>
</div>
</div>
<div class="tutorial-btn" @click="handleCameraOptionClick">
<div class="icon-box camera"><img src="/img/icon/tutorial-icons/big-camera.png" alt="" /></div>
<div class="name-span"><span>written guides</span></div>
<div class="tutorial-btn" @click="tutorial = true">
<div class="icon-box camera"><img src="/img/icon/tutorial-icons/Guide-icon.png" alt="" /></div>
<div class="name-span">
<span>{{ $t("nodeSidebarVideo.rpc") }}</span>
</div>
</div>
<div v-if="currentNetwork.id !== 4" class="tutorial-btn" @click="stakeGuide = true">
<div class="icon-box camera"><img src="/img/icon/tutorial-icons/Guide-icon.png" alt="" /></div>
<div class="name-span">
<span>{{ $t("nodeSidebarVideo.stake") }}</span>
</div>
</div>

<div
Expand All @@ -53,109 +36,20 @@
</div>
</template>
<script>
import { mapWritableState } from "pinia";
import { mapWritableState, mapState } from "pinia";
import { useFooter } from "@/store/theFooter";
import { useNodeStore } from "@/store/theNode";
import { useNodeHeader } from "@/store/nodeHeader";
import { useTutorialStore } from "@/store/tutorialSteps";
import { mapState } from "pinia";
import { useNodeManage } from "@/store/nodeManage";
// import TutorialButtons from "./TutorialButtons.vue";
export default {
// components: { TutorialButtons },
data() {
return {
returnStatus: this.$t("theNode.returnStatus"),
selectedGuide: "",
tutorialTitles: [
{
name: this.$t("nodeSidebarVideo.alert"),
icon: "/img/icon/manage-node-icons/QuestionMark.png",
disable: true,
video: "",
guide: "",
written: "",
},
{
name: this.$t("nodeSidebarVideo.switchC"),
icon: "/img/icon/manage-node-icons/QuestionMark.png",
disable: true,
video: "",
guide: "",
written: "",
},
{
name: this.$t("nodeSidebarVideo.migrate"),
icon: "/img/icon/manage-node-icons/QuestionMark.png",
disable: true,
video: "",
guide: "",
written: "",
},
{
name: this.$t("nodeSidebarVideo.rpc"),
icon: "/img/icon/manage-node-icons/QuestionMark.png",
disable: false,
video: " https://www.youtube.com/embed/iFzSdjg9r6U",
guide: "rpc",
written: "https://stereum.net/ethereum-node-setup/rpc_endpoint_metamask/",
},
],
confData: {
mainnet: [
{
title: this.$t("nodeSidebarVideo.stake"),
guide: "stake",
video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
icon: "/img/icon/click-installation/mainnet-icon.png",
},
],
goerli: [
{
title: this.$t("nodeSidebarVideo.stake"),
guide: "stake",
video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
icon: "/img/icon/click-installation/testnet-icon.png",
},
{
title: this.$t("nodeSidebarVideo.ssv"),
guide: "",
video: "https://www.youtube.com/embed/ccKoalZtjlA",
written: "https://stereum.net/ssv-network-node-operator-guide/",
icon: "/img/icon/click-installation/testnet-icon.png",
},
],
sepolia: [
{
title: this.$t("nodeSidebarVideo.stake"),
guide: "",
video: "https://www.youtube.com/embed/Cbu58ee_Wj4",
written: "https://stereum.net/ethereum-node-setup/eth-solo-staking-step-by-step-guide/",
icon: "/img/icon/click-installation/testnet-icon.png",
},
],
gnosis: [
{
title: this.$t("nodeSidebarVideo.gnoStake"),
guide: "",
video: "https://www.youtube.com/embed/qORXGzhZPns",
written: "https://stereum.net/ethereum-node-setup/gno-solo-staking/",
icon: "/img/icon/control/gno_currency_symbol.png",
},
],
},
tutorialBtns: [],
};
},
computed: {
...mapWritableState(useTutorialStore, {
playYoutubeVideo: "playYoutubeVideo",
chosenVideo: "chosenVideo",
}),
...mapState(useNodeManage, {
currentNetwork: "currentNetwork",
}),
Expand All @@ -171,19 +65,7 @@ export default {
}),
},
mounted() {
this.mainButtonController();
},
methods: {
handleGuidedOptionClick(item) {
this.selectedGuide = item.guide;
if (this.selectedGuide == "rpc") {
this.tutorial = true;
} else if (this.selectedGuide == "stake") {
this.stakeGuide = true;
}
},
handleWrittenOptionClick() {
let url = "https://stereum.net/content/guides";
window.open(url, "_blank");
Expand All @@ -192,29 +74,6 @@ export default {
let url = "https://www.youtube.com/@Stereum";
window.open(url, "_blank");
},
handleVideoOptionClick(item) {
this.chosenVideo = item.video;
this.playYoutubeVideo = true;
},
mainButtonController() {
const currentService = this.currentNetwork.network;
for (const service in this.confData) {
if (service === currentService) {
const buttons = this.confData[service].map((item) => {
return {
title: item.title,
icon: item.icon,
video: item.video,
guide: item.guide,
written: item.written,
};
});
this.tutorialBtns = buttons;
break;
}
}
},
},
};
</script>
Expand Down Expand Up @@ -261,18 +120,14 @@ export default {
.name-span {
width: 75%;
height: 100%;
justify-content: center;
justify-content: flex-start;
align-items: center;
display: flex;
text-transform: capitalize;
font-size: 115%;
font-size: 108%;
font-weight: 700;
}
.disabled {
opacity: 0.5;
pointer-events: none;
user-select: none;
}
.tutorial-box {
width: 90%;
height: 89%;
Expand Down
Loading

0 comments on commit 29bc11b

Please sign in to comment.