Skip to content

Commit

Permalink
feat: Create learning path
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasdenecker
thomasdenecker committed Aug 16, 2023
1 parent b7921f0 commit f4ca953
Show file tree
Hide file tree
Showing 4 changed files with 336 additions and 39 deletions.
145 changes: 110 additions & 35 deletions pages/[lang]/[...slug].vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,39 @@
<template>
<v-navigation-drawer
:width="325"
v-model="drawer"
absolute temporary
location="right">
<div v-for="(n, key) in navigation" :key="key">
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<div v-for="(c, keyC) in section.children" :key="keyC">
<h3 class="text-black" style="margin-bottom: 2%; margin-left: 4%; margin-top: 4%;"> {{ c.title }}</h3>
<v-list>
<v-list-item
@click="changePath(section._path, c._dir)"
v-for="(c2, keyC2) in c.children" :key="keyC2">
<v-list-item-title style="margin-bottom: 2%; margin-left: 4%;">{{ c2.title }}</v-list-item-title>
<v-divider></v-divider>
</v-list-item>
</v-list>

</div>
</div>
</div>
</v-navigation-drawer>
:width="325"
v-model="drawer"
absolute
temporary
location="right"
>
<div v-for="(n, key) in navigation" :key="key">
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<div v-for="(c, keyC) in section.children" :key="keyC">
<h3
class="text-black"
style="margin-bottom: 2%; margin-left: 4%; margin-top: 4%"
>
{{ c.title }}
</h3>
<v-list>
<v-list-item
@click="changePath(section._path, c._dir)"
v-for="(c2, keyC2) in c.children"
:key="keyC2"
>
<v-list-item-title style="margin-bottom: 2%; margin-left: 4%">{{
c2.title
}}</v-list-item-title>
<v-divider></v-divider>
</v-list-item>
</v-list>
</div>
</div>
</div>
</v-navigation-drawer>
<v-row class="fill-height">
<v-col class="fill-height overflow-y-auto">
<v-card class="fill-height" >
<v-card class="fill-height">
<v-card-text
class="fill-height overflow-y-auto"
style="max-height: calc(100% - 50px)"
Expand All @@ -41,27 +51,44 @@
style="background-color: lightsteelblue"
>
<v-btn :disabled="step == 0" @click="prevBtn">Prev</v-btn>

<v-btn
v-if="step != tutosList.length - 1"
:disabled="step == tutosList.length - 1"
@click="nextBtn"
class="me-2"
>Next</v-btn
>
<v-btn class="bg-primary rounded-pill lighten-4 mx-4"
variant="Flat"
href="https://github.com/IFB-ElixirFr/Wasm4Learn/discussions"
target="_blank">Help
</v-btn>

<v-btn
@click.stop="drawer = !drawer"
class="rounded-pill"
variant="tonal"
> {{ step + 1 }} / {{ tutosList.length }}
</v-btn>
<v-btn
v-if="step == tutosList.length - 1"
@click="finish"
class="me-2 px-4"
color="success"
variant="flat"
prepend-icon="mdi-party-popper"
>Finish</v-btn
>
<v-btn @click="restart" class="me-2"
><v-icon>mdi-restart</v-icon></v-btn
>

<v-btn
class="bg-primary rounded-pill lighten-4 mx-4"
variant="Flat"
href="https://github.com/IFB-ElixirFr/Wasm4Learn/discussions"
target="_blank"
>Help
</v-btn>

<v-btn
@click.stop="drawer = !drawer"
class="rounded-pill"
variant="tonal"
>
{{ step + 1 }} / {{ tutosList.length }}
</v-btn>
</v-card-actions>

</v-card>
</v-col>
<v-col class="fill-height">
Expand Down Expand Up @@ -134,6 +161,7 @@ import { useCommandStore } from "@/stores/useCommandStore";
import { storeToRefs } from "pinia";
import { getQuickJS } from "quickjs-emscripten";
import Split from "split.js";
import { useStorage } from "@vueuse/core";
let tempLineArray = [];
Expand Down Expand Up @@ -229,7 +257,6 @@ export default {
const { data: navigation } = await useAsyncData("navigation", () =>
fetchContentNavigation("/" + lang + "/")
);
return {
contentFolder,
navigation,
Expand All @@ -238,6 +265,7 @@ export default {
store,
command,
pathParent,
path,
id,
step,
lang,
Expand All @@ -264,6 +292,16 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
}
temp = [];
}
const theDefault = {};
const state = useStorage("my-progression-store", theDefault, localStorage, {
mergeDefaults: true,
});
if (this.path in state.value) {
this.step = state.value[this.path].step;
} else {
state.value[this.path] = { status: "started", step: 0 };
}
this.data = this.tutosList[this.step];
Split(["#split-0", "#split-1"], {
Expand Down Expand Up @@ -339,12 +377,32 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
var objDiv = document.getElementById("divConsole");
objDiv.scrollTop = objDiv.scrollHeight;
},
async updateState() {
const theDefault = {};
const state = useStorage(
"my-progression-store",
theDefault,
localStorage,
{
mergeDefaults: true,
}
);
state.value[this.path] = { status: "started", step: this.step };
},
restart() {
this.step = 0;
this.data = this.tutosList[this.step];
var myDiv = document.getElementById("contentDiv");
myDiv.scrollTop = 0;
this.updateState();
},
async nextBtn() {
if (this.step < this.tutosList.length) {
this.step = this.step + 1;
this.data = this.tutosList[this.step];
var myDiv = document.getElementById("contentDiv");
myDiv.scrollTop = 0;
this.updateState();
}
},
async prevBtn() {
Expand All @@ -353,8 +411,25 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
this.data = this.tutosList[this.step];
var myDiv = document.getElementById("contentDiv");
myDiv.scrollTop = 0;
this.updateState();
}
},
async finish() {
const theDefault = {};
const state = useStorage(
"my-progression-store",
theDefault,
localStorage,
{
mergeDefaults: true,
}
);
state.value[this.path] = { status: "finish", step: this.step };
const router = useRouter();
router.push({
path: "/" + this.lang,
});
},
async testCode(code) {
this.test = null;
const result = await this.webConsole.webR
Expand Down
54 changes: 51 additions & 3 deletions pages/[lang]/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
<div v-for="(section, sectionKey) in n.children" :key="sectionKey">
<p class="text-h4">{{ section.title }}</p>
<div class="d-flex flex-wrap">

<v-card
outlined
elevation="3"
Expand All @@ -47,10 +48,11 @@
class="ma-3 rounded-lg"
>
<v-card-text class="d-flex flex-column" style="height: 100%">
<v-badge dot :color="changeColor(c._path, 'white')">
<p class="text-h6 mb-3">
<strong>{{ c.title }}</strong>
</p>

</v-badge>
<div class="mb-2">
<div v-if="c.author">
<v-icon class="me-2">mdi-account-edit</v-icon> {{ c.author }}
Expand Down Expand Up @@ -80,7 +82,23 @@
<p>
{{ c.description }}
</p>
<br>
<br />

<div v-if="section._path == n._path + '/learning-path'">
<p><b>Progression</b></p>
<div class="overflow-y-auto" style="width: 100%">
<v-timeline truncate-line="both" direction="horizontal">
<v-timeline-item
v-for="step in c.steps"
:key="step"
:dot-color="changeColor('/' + lang + '/' + step)"
@click="changePathStep(n._path, step)"
>
</v-timeline-item>
</v-timeline>
</div>
</div>

<v-card-actions class="justify-space-between">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
Expand Down Expand Up @@ -111,6 +129,7 @@
</v-card-actions>
</v-card-text>
</v-card>

</div>
</div>
</div>
Expand All @@ -119,6 +138,7 @@

<script>
import "/node_modules/flag-icons/css/flag-icons.min.css";
import { useStorage } from "@vueuse/core";
export default {
async setup(props) {
Expand All @@ -128,13 +148,41 @@ export default {
const { data: navigation } = await useAsyncData("navigation", () =>
fetchContentNavigation("/" + lang + "/")
);
return { navigation };
return { navigation, lang };
},
methods: {
changePath(pathParent, id) {
const router = useRouter();
router.push({ path: pathParent + "/", query: { id: id } });
},
changePathStep(pathParent, stepPath) {
const pathParts = stepPath.split("/");
const router = useRouter();
router.push({
path: pathParent + "/" + pathParts[0] + "/",
query: { id: pathParts[1] },
});
},
changeColor(sessionPath, defaultColor='grey') {
const theDefault = {};
const state = useStorage(
"my-progression-store",
theDefault,
localStorage,
{
mergeDefaults: true,
}
);
if (sessionPath in state.value) {
if (state.value[sessionPath] == "started") {
return "blue";
} else {
return "green";
}
} else {
return defaultColor;
}
},
},
};
</script>
Expand Down
Loading

0 comments on commit f4ca953

Please sign in to comment.