added comment

Reviewed-on: Maxime/Clyde#1

backend/build.gradle.kts

@@ -25,6 +25,7 @@ dependencies {
 	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 	// implementation("org.springframework.session:spring-session-jdbc")
 	developmentOnly("org.springframework.boot:spring-boot-devtools")
+	// developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 	runtimeOnly("org.postgresql:postgresql")
 	testImplementation("org.springframework.boot:spring-boot-starter-test")
 	testImplementation("org.springframework.boot:spring-boot-testcontainers")

backend/src/main/java/ovh/herisson/Clyde/EndPoints/ApplicationsController.java

@@ -47,7 +47,6 @@ public class ApplicationsController {
 
         //if unAuthed
         authorizedApps.add(Applications.Login);
-        authorizedApps.add(Applications.Schedule);
 
 		User user = authServ.getUserFromToken(token);
 		if(user == null)

backend/src/main/java/ovh/herisson/Clyde/Tables/Applications.java

@@ -3,7 +3,6 @@ package ovh.herisson.Clyde.Tables;
 public enum Applications {
     // without any token
     Login,
-    Schedule,
 
     // with any token
     Profile,

frontend/package-lock.json

@@ -8,6 +8,8 @@
       "name": "clyde",
       "version": "0.0.0",
       "dependencies": {
+        "@canvasjs/vue-charts": "^1.0.4",
+        "@vueuse/core": "^10.9.0",
         "vite-plugin-top-level-await": "^1.4.1",
         "vue": "^3.4.15",
         "vue3-toastify": "^0.2.1"
@@ -29,6 +31,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@canvasjs/charts": {
+      "version": "3.7.45",
+      "resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
+      "integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
+    },
+    "node_modules/@canvasjs/vue-charts": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
+      "integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
+      "dependencies": {
+        "@canvasjs/charts": "^3.7.5",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -753,6 +769,11 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -866,6 +887,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
       "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",

frontend/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@canvasjs/vue-charts": "^1.0.4",
+    "@vueuse/core": "^10.9.0",
     "vite-plugin-top-level-await": "^1.4.1",
     "vue": "^3.4.15",
     "vue3-toastify": "^0.2.1"

frontend/src/App.vue

@@ -25,6 +25,7 @@ window.addEventListener('hashchange', () => {
   const login=ref(i18n("app.login"))
   const active=ref(false)
 
+
 	const apps = ref([])
 	appList().then(e => apps.value = e)
 

frontend/src/Apps/Schedule.vue

@@ -1,211 +0,0 @@
-<script setup>
-  import { ref } from 'vue'
- 
-  const schedule = [
-    {course:"Math Pour L'info",
-     start:"Wed Mar 27 2024 10:15 GMT+0100",
-     end:"Wed Mar 27 2024 12:15 GMT+0100"},
-    {
-      course:"Calculus",
-      start:"Wed Mar 27 2024 08:00 GMT+0100",
-      end:"Wed Mar 27 2024 10:00 GMT+0100"
-      
-  },
-  {
-      course:"Physique II",
-      start:"Tue Mar 26 2024 10:15 GMT+0100",
-      end:"Tue Mar 26 2024 12:15 GMT+0100"      
-  },
-    {
-      course:"Math Pour L'info",
-      start:"Thu Mar 28 2024 10:15 GMT+0100",
-      end:"Thu Mar 28 2024 12:15 GMT+0100"      
-  }]
-  function formatDate(date) {
-    var d = new Date(date),
-        month = '' + (d.getMonth() + 1),
-        day = '' + d.getDate(),
-        year = d.getFullYear();
-
-    if (month.length < 2) 
-        month = '0' + month;
-    if (day.length < 2) 
-        day = '0' + day;
-
-    return [day, month, year].join('-');
-  }
-  function getMonday(d) {
-    d = new Date(d);
-    var day = d.getDay(),
-    diff = d.getDate() - day + (day == 0 ? -6 : 1);
-    return new Date(d.setDate(diff));
-  }
-
-  function getAnyDays(d){
-
-    var day = new Date(mondayOfWeek.value);
-    day.setDate(day.getDate() + d );
-
-    return day;
-  }
-
-  const mondayOfWeek=ref(getMonday(new Date(schedule[1].start)))
-
-  function isNotCourse(element){
-    return element==null;
-  }
-
-  function durationCourse(element){
-    const hour = element.end.substring(3,5) -element.start.substring(3,5);
-    
-    
-    return (element.end - element.start)%2;
-  }
-  function sortByDate(a, b) {
-    const nameA = a.start; // ignore upper and lowercase
-    const nameB = b.start; // ignore upper and lowercase
-    
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-    return 0; 
-      }
-
-  function transpose(a) {
-    const trans = [[],[],[],[],[],[]];
-    for(let i = 0; i < 6;i++){
-      for(let j=0; j< 7; j++){
-        if(a[j][i] !== null){
-          trans[i].push(a[j][i]);
-        }
-      }
-    }
-    return trans;
-}
-
-  function matrixFromList(list){
-    const matrix = [[],[],[],[],[],[],[]];
-    for(let key in list){
-      const temp = [];
-      const day = new Date(list[key].start);
-      matrix[day.getDay()].push(list[key]);
-      matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
-    }
-      return matrix;
-  }
-
-  
-  const schedule2 = matrixFromList(schedule);
-  const scheduleByWeek = transpose(schedule2);
-  
-  console.log(scheduleByWeek)
-
-</script>
-<template>
-  <div class="grid">
-    <div class="options" >
-    </div>
-    <div class="schedule">
-      <table class="table">
-        <tr style="background-color:rgb(24,24,24)">
-          <th/>
-          <th class="header">Lundi {{formatDate(getAnyDays(0))}}</th>
-          <th class="header">Mardi {{formatDate(getAnyDays(1))}}</th>
-          <th class="header">Mercredi {{formatDate(getAnyDays(2))}}</th>
-          <th class="header">Jeudi {{formatDate(getAnyDays(3))}}</th>
-          <th class="header">Vendredi {{formatDate(getAnyDays(4))}}</th>
-          <th class="header">Samedi {{formatDate(getAnyDays(5))}}</th>
-          <th class="header">Dimanche {{formatDate(getAnyDays(6))}}</th>
-        </tr>
-        <tr v-for="(n,index) in 12">
-          <th class="hour">{{8 + index}}:00-{{9+index}}:00</th>
-            <td v-for="m in 7"></td>
-        </tr>
-      </table>
-      <div class="courseGrid">
-        <div v-for="i in 7">
-          Test
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-  .grid{
-    display:grid;
-    margin-top:2%;
-    align-items:center;
-    justify-content:center;
-    grid-template-columns:15vw 70vw;
-    column-gap:2.5vw;
-
-    grid-template-areas:"options schedule";
-  }
-  .schedule{
-    position:relative;  
-    border-radius:20px;
-    grid-area:schedule;
-    width:100%;
-    height:85vh;
-    background-color:rgba(255,255,255,0.1);    
-  }
-  .options{
-    border-radius:20px;
-    grid-area:options;
-    background-color:rgba(255,255,255,0.1);
-    width:100%;
-    height:85vh;
-  }
-
-  .table{
-    width:100%;
-    height:100%;
-    border-spacing:0;
-    border-collapse:separate;
-    border-radius: 20px;
-    border: 2px solid black
-  }
-  
-  .hour{
-    background-color:rgb(72,72,72)
-
-  }
-  
-  .header{
-    align-items:center;
-    width:12.5%;
-    color:#FFFFFF;
-  }
-  table th:not(:last-child),
-  table td:not(:last-child) {
-  border-right: 1px solid black;
-  }
-  
-  table tr:not(:last-child)>td,
-  table tr:not(:last-child)>th
-  {
-    border-bottom:1px solid black;
-  }
-  
-  .courseGrid{
-    top:13.75%;   
-    left:12.5%;
-    position:absolute;
-    width:87.5%;
-    height:86.25%; 
-    display:grid;
-    grid-template-columns:repeat(7,1fr);
-      }
-  
-
-  .course{
-    width:100%;
-    height:100%;
-    background-color:rgb(100,0,100);
-  }
-
-  
-</style>

frontend/src/Apps/ScientificPublications/ArticleComponent.vue

@@ -0,0 +1,76 @@
+<!----------------------------------------------------
+	File:  ArticleComponent.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Pop Up summarizing an article
+----------------------------------------------------->
+
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+const example = ["Title","Author",["Co-author1", "co-Authors2"],
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
+  "language",
+    "access",
+]
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+       <ul v-for="n in example"><li>{{n}}</li></ul>
+        <div id="downloads">
+          <button @click.stop="emit('modal-close')">Download BibTex</button>
+          <button @click.stop="emit('modal-close')">Download Article</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  width: 70%;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background: rgba(157, 99, 205);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+
+#downloads {
+  text-align: end;
+}
+#downloads button {
+  align-self: center;
+  margin-left: 2px;
+  font-size: large;
+  color: white;
+  background: rgba(191, 64, 191,0.5);
+  border:2px solid black;
+  border-radius: 5px;
+}
+
+</style>

frontend/src/Apps/ScientificPublications/FilterComponent.vue

@@ -0,0 +1,92 @@
+<!----------------------------------------------------
+	File:  ArticleComponent.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Pop Up for selecting search Filters
+----------------------------------------------------->
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+let checked = ref([])
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+const example = ["A","B", "Lorem Ipsum AAAAAAAAAAAAAAAAAAA",
+  "H",
+  "H",
+  "H",
+  "H",
+  "H",
+]
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+        <div id="filterGrid">
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+          <div class="vl"> example :<ul class="checkers"> <li v-for="n in example"> <input type="checkbox" :value=n v-model="checked"> {{n}} </li> </ul> </div>
+      </div>
+        <div id="submit">
+          <button @click.stop="emit('modal-close')">Submit</button>
+        </div>
+      </div>
+  </div>
+ </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  width: 70%;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background: rgba(157, 99, 205);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+#filterGrid {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 5px;
+  grid-template-rows: auto auto;
+}
+#filterGrid ul {
+  list-style-type: none;
+  padding: 15px;
+  height: 100px;
+  overflow: scroll;
+  scrollbar-color: #8a2be2 rgb(255,255,255,0.04);
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 6px;
+}
+
+.vl {
+  border-left: 6px solid #8a2be2;
+}
+#submit {
+  text-align: end;
+}
+
+</style>

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -0,0 +1,295 @@
+<!----------------------------------------------------
+	File:  ResearcherProfile.vue
+	Author: Maxime Bartha
+	Scope: Extension Publicatons scientifiquess
+	Description: Researcher Profile Page containing his articles and his statistics
+----------------------------------------------------->
+
+<script setup>
+import { ref, reactive } from "vue";
+import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
+import ArticleComponent from "@/Apps/ScientificPublications/ArticleComponent.vue";
+const input = ref("");
+const statsOf = ref("");
+const statsBy = ref("");
+const isFilterOpened = ref(false);
+const isArticleOpened = ref(false);
+let chart;
+
+const openModal = () => {
+  isFilterOpened.value = true;
+};
+const closeModal = () => {
+  isFilterOpened.value = false;
+};
+const submitFilters = ()=>{
+  // call only with those filters the get
+}
+const openArticle = (article) => {
+  isArticleOpened.value = true;
+}
+
+const closeArticle = () => {
+  isArticleOpened.value =false;
+}
+
+const downloadBibTex = (article) => {
+//todo
+}
+
+const downloadArticle = (article) => {
+ //todo
+}
+
+
+const articleList = [
+  ["The Great Potato War Lorem Ipsum aeaDq Terelumni ","Author",["Co-author1", "co-Authors2"],
+  " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum ex tempor leo pulvinar, vitae imperdiet leo pellentesque. Aenean aliquam, ante at tempus sagittis, lorem leo feugiat felis, eget vestibulum tortor est nec libero. Cras sit amet venenatis velit, at rhoncus est. Cras id sem placerat, cursus sem et, aliquam felis. Nullam mi nunc, laoreet eget rutrum ac, blandit nec lorem. Duis fermentum aliquet tortor ac tristique. Aenean ac sagittis nulla, at auctor dolor. Vivamus et neque sodales, vestibulum dolor et, posuere urna. Pellentesque ut elit metus. Cras velit lectus, luctus auctor interdum eu, aliquam nec est. Donec elementum nisl sit amet nibh aliquam ultricies. Nullam felis orci, suscipit eu tincidunt pretium, euismod vel sem. Duis eget vehicula neque, nec gravida leo. Cras pellentesque arcu quis justo lobortis, ut semper massa rhoncus. Quisque sagittis dignissim congue. Nullam tortor ligula, mattis vel cursus id, pretium non lacus.",
+  "language",
+    "access",
+  ]
+]
+
+
+const jsonMockViewsByYears= [
+  {label: "2004", y:4},
+  {label: "2005", y:99},
+  {label: "2007", y:555},
+  {label: "2009", y:22},
+  {label: "2011", y:1666},
+]
+
+function searchInList(list, searchInput){
+  let retList= []
+  if (searchInput === "")
+    return [list[0].slice(0,2)]
+  for (let i = 0; i < list.length; i++) {
+    console.log(list[i])
+    if (lDistance(list[i][0], searchInput) < 10 || list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()) > -1){
+      retList.push(list[i].slice(0,2))
+    }
+    console.log(list[i][0].toUpperCase().indexOf(searchInput.toUpperCase()))
+  }
+  return retList
+}
+
+function lDistance(s,t){
+  if (!s.length) return t.length;
+  if (!t.length) return s.length;
+  const arr = [];
+  for (let i = 0; i <= t.length; i++) {
+    arr[i] = [i];
+    for (let j = 1; j <= s.length; j++) {
+      arr[i][j] =
+          i === 0
+              ? j
+              : Math.min(
+                  arr[i - 1][j] + 1,
+                  arr[i][j - 1] + 1,
+                  arr[i - 1][j - 1] + (s[j - 1] === t[i - 1] ? 0 : 1)
+              );
+    }
+  }
+  return arr[t.length][s.length];
+}
+
+const options = reactive({
+    backgroundColor:null,
+    theme: "light2",
+    animationEnabled: true,
+    title: {
+      fontColor: "white",
+      text : "please select options",
+    },
+    data: [
+      {
+        type: "pie",
+        indexLabel: "{label} (#percent%)",
+        yValueFormatString: "#,##0",
+        indexLabelFontColor: "white",
+        toolTipContent:
+          "<span style='\"'color: {color};'\"'>{label}</span> {y}(#percent%)",
+      }]
+	});
+
+function update(){
+      options.title = {
+        fontColor: "white",
+        text: statsOf.value + " By "+ statsBy.value,
+      }
+      if (statsOf.value === "views" && statsBy.value === "years") {
+        options.data[0].dataPoints = jsonMockViewsByYears;
+      }
+
+      options.title.text = statsOf.value + " By "+ statsBy.value;
+      chart.render()
+    }
+</script>
+
+<template>
+  <div id="main">
+    <FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitFilters">
+    </FilterComponent>
+    <ArticleComponent :isOpen="isArticleOpened" @modal-close="closeArticle"></ArticleComponent>
+    <div id="profilePicture">
+      <img src="/Clyde.png" />
+    </div>
+    <div id="researcherInfos">
+      <div class="surrounded">John Doe</div>
+      <div class="surrounded">Orcid : 12144-2144-12336-B</div>
+      <div class="surrounded">Email : John.Doe@umons.ac.be</div>
+
+      <div class="surrounded">
+        site :
+        <a href="http://localhost:5173" style="color: #007aff">here</a>
+      </div>
+      <div class="surrounded">Domain : physics, IT</div>
+      <div id="coAuthorList" class="surrounded">Co-authors list : D</div>
+    </div>
+    <div id="stats">
+      <div class="surrounded">
+        Stat type :
+        <select @change="update()" id="stats-select" v-model="statsOf">
+          <option value="views">Views</option>
+          <option value="co-authors">Co-authors</option>
+          <option value="articles">Articles</option>
+          <option value="language">Languages</option>
+        </select>
+      </div>
+      <div class="surrounded">
+        Class by:
+        <select @change="update()" id="classed-select" v-model="statsBy">
+          <option selected="selected" value="years">Years</option>
+          <option value="months">Months</option>
+          <option value="topics">Topics</option>
+        </select>
+      </div>
+      <div id="statsPie">
+		  <CanvasJSChart :options="options" id=chart @chart-ref="c => chart = c "/>
+      </div>
+    </div>
+    <div id="articles">
+      <div id="search">
+        <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
+        <button id="filterButton" @click="openModal">  Filters </button>
+      </div>
+      <ul id="articlesUL">
+        <li id="articleLi" v-for="n in searchInList(articleList,input)">
+          <div class="vl"> {{n[0]}}</div>
+          <div class="vl"> {{n[1]}}</div>
+         <a @click="openArticle"> MoreInfo  </a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#main {
+  display: grid;
+  grid-template-columns: 22% auto;
+  grid-template-rows: 26% auto;
+  height: 100%;
+  width: 100%;
+}
+
+#profilePicture {
+  display: flex;
+  justify-content: center;
+}
+
+#profilePicture img {
+  align-self: center;
+  justify-self: center;
+  width: 60%;
+}
+
+#researcherInfos {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  column-gap: 5px;
+  grid-template-rows: auto auto;
+}
+
+.surrounded {
+  border: 2px solid black;
+  color: white;
+  font-size: x-large;
+  align-self: center;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 20px;
+  margin-bottom: 10px;
+}
+
+.surrounded select {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  border: 1px solid black;
+  color: white;
+  background-color: rgb(255, 255, 255, 0.1);
+  font-size: large;
+}
+
+#statsPie {
+
+}
+
+#search{
+  width: 100%;
+  height: 10%;
+  display: inline-flex;
+}
+#search-input {
+  margin-left: 25px;
+  width: 75%;
+  font-size: 16px;
+  padding: 12px 20px 12px 40px;
+  border: 1px solid #ddd;
+  height: 20px;
+  align-self: center;
+}
+
+#filterButton {
+  align-self: center;
+  margin-left: 2px;
+  font-size: xx-large;
+  color: white;
+  background: rgba(191, 64, 191,0.5);
+  border:2px solid black;
+}
+#filterButton:hover{
+  background: rgba(191, 64, 191);
+}
+
+
+#articlesUL {
+  list-style-type: none;
+  color: white;
+  padding: 12px;
+  margin: 5px;
+  height: 400px;
+  overflow: scroll;
+}
+#articleLi{
+  display: grid;
+  grid-template-columns: auto auto auto;
+  border: 2px solid black;
+  color: white;
+  font-size: x-large;
+  text-align: center;
+  text-indent: 7px;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  margin-bottom: 15px;
+}
+a{
+  color:#007aff;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.vl {
+  border-right: 2px solid black;
+}
+
+</style>

frontend/src/main.js

@@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import CanvasJSChart from '@canvasjs/vue-charts';
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(CanvasJSChart);
+app.mount('#app');

frontend/src/rest/apps.js

@@ -9,16 +9,16 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
-import Schedule from "@/Apps/Schedule.vue"
+import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
 
 const apps = {
-		'/schedule': Schedule,
 		'/login': LoginPage,
 		'/inscription': Inscription,
 		'/profil': Profil,
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/researcher-profile' : ResearcherProfile,
 }
 
 const appsList = {