add step system

user-interface/src/components/CollectKnowledge.vue

@@ -40,6 +40,7 @@
     <!-- @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
@@ -49,11 +50,18 @@
         <!-- @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>
@@ -65,4 +73,9 @@
         padding: 34px;
     }
 
+    .btn-container{
+        display: flex;
+        justify-content: end;
+    }
+
 </style>

user-interface/src/components/LoadingModel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+    Loading...
+</div>
+</template>
+
+<style scoped>
+
+</style>

user-interface/src/stores/counter.ts

@@ -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 }
-})

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 }
+})

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 { useStepsStore } from '@/stores/steps'
-//import EvaluateQuestion from '@/components/EvaluateQuestion.vue';
+
+    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/>