Compare commits
	
		
			9 Commits
		
	
	
		
			tonitch/ma
			...
			220c891c72
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 220c891c72 | |||
| 2b9493422d | |||
| 621f568ba2 | |||
| 972d08a54d | |||
| 7a13d412f1 | |||
| 9de4b06e75 | |||
| 123fa97611 | |||
| 1fad792be7 | |||
| 
						
						
							
						
						acd1262955
	
				 | 
					
					
						
							
								
								
									
										1
									
								
								Clyde
									
									
									
									
									
										Submodule
									
								
							
							
								
								
								
								
								
							
						
						
									
										1
									
								
								Clyde
									
									
									
									
									
										Submodule
									
								
							 Submodule Clyde added at bd27ffd3cb
									
								
							@ -25,7 +25,6 @@ dependencies {
 | 
				
			|||||||
	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 | 
						implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 | 
				
			||||||
	// implementation("org.springframework.session:spring-session-jdbc")
 | 
						// implementation("org.springframework.session:spring-session-jdbc")
 | 
				
			||||||
	developmentOnly("org.springframework.boot:spring-boot-devtools")
 | 
						developmentOnly("org.springframework.boot:spring-boot-devtools")
 | 
				
			||||||
	// developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 | 
					 | 
				
			||||||
	runtimeOnly("org.postgresql:postgresql")
 | 
						runtimeOnly("org.postgresql:postgresql")
 | 
				
			||||||
	testImplementation("org.springframework.boot:spring-boot-starter-test")
 | 
						testImplementation("org.springframework.boot:spring-boot-starter-test")
 | 
				
			||||||
	testImplementation("org.springframework.boot:spring-boot-testcontainers")
 | 
						testImplementation("org.springframework.boot:spring-boot-testcontainers")
 | 
				
			||||||
 | 
				
			|||||||
@ -47,6 +47,7 @@ public class ApplicationsController {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
        //if unAuthed
 | 
					        //if unAuthed
 | 
				
			||||||
        authorizedApps.add(Applications.Login);
 | 
					        authorizedApps.add(Applications.Login);
 | 
				
			||||||
 | 
					        authorizedApps.add(Applications.Schedule);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		User user = authServ.getUserFromToken(token);
 | 
							User user = authServ.getUserFromToken(token);
 | 
				
			||||||
		if(user == null)
 | 
							if(user == null)
 | 
				
			||||||
 | 
				
			|||||||
@ -3,6 +3,7 @@ package ovh.herisson.Clyde.Tables;
 | 
				
			|||||||
public enum Applications {
 | 
					public enum Applications {
 | 
				
			||||||
    // without any token
 | 
					    // without any token
 | 
				
			||||||
    Login,
 | 
					    Login,
 | 
				
			||||||
 | 
					    Schedule,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // with any token
 | 
					    // with any token
 | 
				
			||||||
    Profile,
 | 
					    Profile,
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										15
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										15
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							@ -8,7 +8,6 @@
 | 
				
			|||||||
      "name": "clyde",
 | 
					      "name": "clyde",
 | 
				
			||||||
      "version": "0.0.0",
 | 
					      "version": "0.0.0",
 | 
				
			||||||
      "dependencies": {
 | 
					      "dependencies": {
 | 
				
			||||||
        "@canvasjs/vue-charts": "^1.0.4",
 | 
					 | 
				
			||||||
        "vite-plugin-top-level-await": "^1.4.1",
 | 
					        "vite-plugin-top-level-await": "^1.4.1",
 | 
				
			||||||
        "vue": "^3.4.15",
 | 
					        "vue": "^3.4.15",
 | 
				
			||||||
        "vue3-toastify": "^0.2.1"
 | 
					        "vue3-toastify": "^0.2.1"
 | 
				
			||||||
@ -30,20 +29,6 @@
 | 
				
			|||||||
        "node": ">=6.0.0"
 | 
					        "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": {
 | 
					    "node_modules/@esbuild/aix-ppc64": {
 | 
				
			||||||
      "version": "0.19.12",
 | 
					      "version": "0.19.12",
 | 
				
			||||||
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
 | 
					      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
 | 
				
			||||||
 | 
				
			|||||||
@ -9,7 +9,6 @@
 | 
				
			|||||||
    "preview": "vite preview"
 | 
					    "preview": "vite preview"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  "dependencies": {
 | 
					  "dependencies": {
 | 
				
			||||||
    "@canvasjs/vue-charts": "^1.0.4",
 | 
					 | 
				
			||||||
    "vite-plugin-top-level-await": "^1.4.1",
 | 
					    "vite-plugin-top-level-await": "^1.4.1",
 | 
				
			||||||
    "vue": "^3.4.15",
 | 
					    "vue": "^3.4.15",
 | 
				
			||||||
    "vue3-toastify": "^0.2.1"
 | 
					    "vue3-toastify": "^0.2.1"
 | 
				
			||||||
 | 
				
			|||||||
@ -25,7 +25,6 @@ window.addEventListener('hashchange', () => {
 | 
				
			|||||||
  const login=ref(i18n("app.login"))
 | 
					  const login=ref(i18n("app.login"))
 | 
				
			||||||
  const active=ref(false)
 | 
					  const active=ref(false)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
	const apps = ref([])
 | 
						const apps = ref([])
 | 
				
			||||||
	appList().then(e => apps.value = e)
 | 
						appList().then(e => apps.value = e)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										211
									
								
								frontend/src/Apps/Schedule.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										211
									
								
								frontend/src/Apps/Schedule.vue
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,211 @@
 | 
				
			|||||||
 | 
					<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>
 | 
				
			||||||
@ -1,236 +0,0 @@
 | 
				
			|||||||
<!----------------------------------------------------
 | 
					 | 
				
			||||||
	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";
 | 
					 | 
				
			||||||
const input = ref("");
 | 
					 | 
				
			||||||
const statsOf = ref("");
 | 
					 | 
				
			||||||
const statsBy = ref("");
 | 
					 | 
				
			||||||
let chart;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const jsonMockViewsByYears= [
 | 
					 | 
				
			||||||
  {label: "2004", y:4},
 | 
					 | 
				
			||||||
  {label: "2005", y:99},
 | 
					 | 
				
			||||||
  {label: "2007", y:555},
 | 
					 | 
				
			||||||
  {label: "2009", y:22},
 | 
					 | 
				
			||||||
  {label: "2011", y:1666},
 | 
					 | 
				
			||||||
]
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function inputKeyUp() {
 | 
					 | 
				
			||||||
  let filter, ul, li, a, txtValue;
 | 
					 | 
				
			||||||
  filter = input.value.toUpperCase();
 | 
					 | 
				
			||||||
  if (document.getElementById("myUL") != null) {
 | 
					 | 
				
			||||||
    ul = document.getElementById("myUL");
 | 
					 | 
				
			||||||
    li = ul.getElementsByTagName("li");
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // Loop through all list items, and hide those who don't match the search query
 | 
					 | 
				
			||||||
    for (let i = 0; i < li.length; i++) {
 | 
					 | 
				
			||||||
      a = li[i].getElementsByTagName("a")[0];
 | 
					 | 
				
			||||||
      txtValue = a.textContent || a.innerText;
 | 
					 | 
				
			||||||
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
 | 
					 | 
				
			||||||
        li[i].style.display = "";
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        li[i].style.display = "none";
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
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">
 | 
					 | 
				
			||||||
    <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">
 | 
					 | 
				
			||||||
      <input
 | 
					 | 
				
			||||||
        type="text"
 | 
					 | 
				
			||||||
        id="search-input"
 | 
					 | 
				
			||||||
        @keyup="inputKeyUp()"
 | 
					 | 
				
			||||||
        placeholder="search articles"
 | 
					 | 
				
			||||||
        v-model="input"
 | 
					 | 
				
			||||||
      />
 | 
					 | 
				
			||||||
      <ul id="myUL">
 | 
					 | 
				
			||||||
        <li><a href="#">Adele</a></li>
 | 
					 | 
				
			||||||
        <li><a href="#">Agnes</a></li>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <li><a href="#">Billy</a></li>
 | 
					 | 
				
			||||||
        <li><a href="#">Bob</a></li>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <li><a href="#">Calvin</a></li>
 | 
					 | 
				
			||||||
        <li><a href="#">Christina</a></li>
 | 
					 | 
				
			||||||
        <li><a href="#">Cindy</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;
 | 
					 | 
				
			||||||
  align-self: center;
 | 
					 | 
				
			||||||
  text-align: center;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#statsPie {
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#articles {
 | 
					 | 
				
			||||||
  background-color: orange;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#search-input {
 | 
					 | 
				
			||||||
  width: 60%;
 | 
					 | 
				
			||||||
  font-size: 16px;
 | 
					 | 
				
			||||||
  padding: 12px 20px 12px 40px;
 | 
					 | 
				
			||||||
  border: 1px solid #ddd;
 | 
					 | 
				
			||||||
  margin-bottom: 12px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#myUL {
 | 
					 | 
				
			||||||
  list-style-type: none;
 | 
					 | 
				
			||||||
  padding: 0;
 | 
					 | 
				
			||||||
  margin: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#myUL li a {
 | 
					 | 
				
			||||||
  border: 1px solid #ddd;
 | 
					 | 
				
			||||||
  /* Add a border to all links */
 | 
					 | 
				
			||||||
  margin-top: -1px;
 | 
					 | 
				
			||||||
  /* Prevent double borders */
 | 
					 | 
				
			||||||
  background-color: #f6f6f6;
 | 
					 | 
				
			||||||
  /* Grey background color */
 | 
					 | 
				
			||||||
  padding: 12px;
 | 
					 | 
				
			||||||
  /* Add some padding */
 | 
					 | 
				
			||||||
  text-decoration: none;
 | 
					 | 
				
			||||||
  /* Remove default text underline */
 | 
					 | 
				
			||||||
  font-size: 18px;
 | 
					 | 
				
			||||||
  /* Increase the font-size */
 | 
					 | 
				
			||||||
  color: black;
 | 
					 | 
				
			||||||
  /* Add a black text color */
 | 
					 | 
				
			||||||
  display: block;
 | 
					 | 
				
			||||||
  /* Make it into a block element to fill the whole list */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#myUL li a:hover:not(.header) {
 | 
					 | 
				
			||||||
  background-color: #eee;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
#Chart{
 | 
					 | 
				
			||||||
    width: "100%";
 | 
					 | 
				
			||||||
    height: "100%";
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@ -4,8 +4,5 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import { createApp } from 'vue'
 | 
					import { createApp } from 'vue'
 | 
				
			||||||
import App from './App.vue'
 | 
					import App from './App.vue'
 | 
				
			||||||
import CanvasJSChart from '@canvasjs/vue-charts';
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
const app = createApp(App);
 | 
					createApp(App).mount('#app')
 | 
				
			||||||
app.use(CanvasJSChart);
 | 
					 | 
				
			||||||
app.mount('#app');
 | 
					 | 
				
			||||||
 | 
				
			|||||||
@ -9,16 +9,16 @@ import Profil from "@/Apps/Profil.vue"
 | 
				
			|||||||
import Courses from "@/Apps/ManageCourses.vue"
 | 
					import Courses from "@/Apps/ManageCourses.vue"
 | 
				
			||||||
import Users from "@/Apps/UsersList.vue"
 | 
					import Users from "@/Apps/UsersList.vue"
 | 
				
			||||||
import Students from "@/Apps/StudentsList.vue"
 | 
					import Students from "@/Apps/StudentsList.vue"
 | 
				
			||||||
import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
 | 
					import Schedule from "@/Apps/Schedule.vue"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const apps = {
 | 
					const apps = {
 | 
				
			||||||
 | 
							'/schedule': Schedule,
 | 
				
			||||||
		'/login': LoginPage,
 | 
							'/login': LoginPage,
 | 
				
			||||||
		'/inscription': Inscription,
 | 
							'/inscription': Inscription,
 | 
				
			||||||
		'/profil': Profil,
 | 
							'/profil': Profil,
 | 
				
			||||||
		'/manage-courses' : Courses,
 | 
							'/manage-courses' : Courses,
 | 
				
			||||||
		'/users-list' : Users,
 | 
							'/users-list' : Users,
 | 
				
			||||||
		'/students-list' : Students,
 | 
							'/students-list' : Students,
 | 
				
			||||||
		'/researcher-profile' : ResearcherProfile,
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const appsList = {
 | 
					const appsList = {
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user