From b97a18eab4f6dbba7d2701f8ebb9c9b96c0f1bac Mon Sep 17 00:00:00 2001
From: Robin COuret <couret.robin@protonmail.com>
Date: Tue, 24 Feb 2026 14:37:33 +0100
Subject: [PATCH] add step system

---
 .../src/components/CollectKnowledge.vue       | 39 ++++++++++++-------
 .../src/components/LoadingModel.vue           | 13 +++++++
 user-interface/src/stores/counter.ts          | 12 ------
 user-interface/src/stores/steps.ts            | 24 ++++++++++++
 user-interface/src/views/ExperimentView.vue   | 10 +++--
 5 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 user-interface/src/components/LoadingModel.vue
 delete mode 100644 user-interface/src/stores/counter.ts
 create mode 100644 user-interface/src/stores/steps.ts

diff --git a/user-interface/src/components/CollectKnowledge.vue b/user-interface/src/components/CollectKnowledge.vue
index d363df5..8f53723 100644
--- a/user-interface/src/components/CollectKnowledge.vue
+++ b/user-interface/src/components/CollectKnowledge.vue
@@ -37,32 +37,45 @@
 <div class="container">
     <h2>Collect Knowledge</h2>
     <b-field label="Knowledge">
-        <!-- @vue-ignore -->
-        <b-input
-            v-model="knowledgeModel"
-            maxlength="1200" 
-            type="textarea" 
-            required
-            ></b-input>
+    <!-- @vue-ignore -->
+    <b-input
+        v-model="knowledgeModel"
+        placeholder="Knowledge is an awareness of facts, a familiarity with individuals and situations, or a practical skill."
+        maxlength="1200" 
+        type="textarea" 
+        required
+        ></b-input>
     </b-field>
     <b-field label="URI">
         <!-- @vue-ignore -->
         <b-input 
             v-model="uriModel" 
+            placeholder="en.wikipedia.org/wiki/Knowledge"
             maxlength="100"
             required
         ></b-input>
     </b-field>
-    <b-button type="is-primary" @click="postKnowledge" >Submit</b-button>
+    <div class="btn-container">
+        <b-field>
+        <div class="control">
+            <b-button type="is-primary" @click="postKnowledge" >Share</b-button>
+        </div>
+        </b-field>
+    </div>
 </div>
 
 </template>
 
 <style scoped>
-.container{
-    background-color: #ffffff;
-    border-radius: 16px;
-    padding: 34px;
-}
+    .container{
+        background-color: #ffffff;
+        border-radius: 16px;
+        padding: 34px;
+    }
+
+    .btn-container{
+        display: flex;
+        justify-content: end;
+    }
 
 </style>
\ No newline at end of file
diff --git a/user-interface/src/components/LoadingModel.vue b/user-interface/src/components/LoadingModel.vue
new file mode 100644
index 0000000..610916e
--- /dev/null
+++ b/user-interface/src/components/LoadingModel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+    Loading...
+</div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/user-interface/src/stores/counter.ts b/user-interface/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/user-interface/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/user-interface/src/stores/steps.ts b/user-interface/src/stores/steps.ts
new file mode 100644
index 0000000..f3cc41c
--- /dev/null
+++ b/user-interface/src/stores/steps.ts
@@ -0,0 +1,24 @@
+import { ref, computed, type Component } from 'vue'
+import { defineStore } from 'pinia'
+
+import CollectKnowledge from '@/components/CollectKnowledge.vue'
+import LoadingModel from '@/components/LoadingModel.vue'
+import EvaluateQuestion from '@/components/EvaluateQuestion.vue'
+
+const steps: Component = [
+  CollectKnowledge,
+  LoadingModel,
+  EvaluateQuestion
+]
+
+export const useStepsStore = defineStore('steps', () => {
+  const indexStep = ref(0)
+
+  const getCurrentComponent = computed(() => steps[indexStep.value])
+
+  function nextStep() {
+    indexStep.value++
+  }
+
+  return { steps, getCurrentComponent, nextStep }
+})
diff --git a/user-interface/src/views/ExperimentView.vue b/user-interface/src/views/ExperimentView.vue
index 033d5ea..62c5ac9 100644
--- a/user-interface/src/views/ExperimentView.vue
+++ b/user-interface/src/views/ExperimentView.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import ReadKnowledges from '@/components/ReadKnowledges.vue';
-import CollectKnowledge from '@/components/CollectKnowledge.vue';
-//import EvaluateQuestion from '@/components/EvaluateQuestion.vue';
+    import ReadKnowledges from '@/components/ReadKnowledges.vue';
+    import { useStepsStore } from '@/stores/steps'
+
+    const stepsStore = useStepsStore()
+    stepsStore
 </script>
 
 <template>
@@ -10,7 +12,7 @@ import CollectKnowledge from '@/components/CollectKnowledge.vue';
             <ReadKnowledges/>
         </section>
         <section id="section-central">
-            <CollectKnowledge/>
+            <component :is="stepsStore.getCurrentComponent"></component>
         </section>
         <!-- <section>
             <EvaluateQuestion/>