Compare commits
	
		
			14 Commits
		
	
	
		
			70bec1a934
			...
			tonitch/ma
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| b8b193f344 | |||
| 3d78851b29 | |||
| dbe28a7fed | |||
| bd7d2c2d51 | |||
| 91c7f42521 | |||
| bd27ffd3cb | |||
| 91ee3adbcd | |||
| c1b2742a8f | |||
| 2805fede4b | |||
| 951feed3c8 | |||
| 95054fa973 | |||
| 3af83a58d3 | |||
| 47c5c14862 | |||
| db895a6091 | 
| @ -25,7 +25,7 @@ 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") | 	// 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") | ||||||
|  | |||||||
							
								
								
									
										15
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										15
									
								
								frontend/package-lock.json
									
									
									
										generated
									
									
									
								
							| @ -8,6 +8,7 @@ | |||||||
|       "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" | ||||||
| @ -29,6 +30,20 @@ | |||||||
|         "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,6 +9,7 @@ | |||||||
|     "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" | ||||||
|  | |||||||
| @ -52,7 +52,7 @@ window.addEventListener('hashchange', () => { | |||||||
|             <a class="icon" href="#Notifications"> |             <a class="icon" href="#Notifications"> | ||||||
|                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div> |                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div> | ||||||
|             </a></li> |             </a></li> | ||||||
|         <li @click="active=!active"  class="option"style="float: right;" title=settings> |         <li @click="active=!active" class="option"style="float: right;" title=settings> | ||||||
|             <a class="icon" > |             <a class="icon" > | ||||||
|                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div> |                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div> | ||||||
|                 <div v-if="active" class="dropdown"> |                 <div v-if="active" class="dropdown"> | ||||||
| @ -86,12 +86,9 @@ window.addEventListener('hashchange', () => { | |||||||
|     </ul> |     </ul> | ||||||
|     </div> |     </div> | ||||||
|     <div class="page"> |     <div class="page"> | ||||||
|       <div style=" margin:50px;"> |  | ||||||
|         <Suspense> |         <Suspense> | ||||||
|          | 				<component :is="currentView" /> | ||||||
| 		<component :is="currentView" /> |  | ||||||
|         </Suspense> |         </Suspense> | ||||||
|       </div> |  | ||||||
|     </div> |     </div> | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
| @ -99,6 +96,8 @@ window.addEventListener('hashchange', () => { | |||||||
| <style scoped> | <style scoped> | ||||||
|    |    | ||||||
|   .container{ |   .container{ | ||||||
|  | 			height: 100%; | ||||||
|  | 			width: 100%; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol]; |     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol]; | ||||||
|     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow]; |     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow]; | ||||||
| @ -111,6 +110,8 @@ window.addEventListener('hashchange', () => { | |||||||
|  |  | ||||||
|   .page { |   .page { | ||||||
|     grid-area:page; |     grid-area:page; | ||||||
|  | 		height: 100%; | ||||||
|  | 		width: 100%; | ||||||
|     place-self:center; |     place-self:center; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | |||||||
| @ -16,10 +16,9 @@ | |||||||
|  |  | ||||||
|  |  | ||||||
| <template>  | <template>  | ||||||
|   <div  v-for="item of requests"> |   <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests"> | ||||||
|   <div class="bodu" v-if="item.state === 'Pending'"> |   <div class="bodu" v-if="item.state === 'Pending'"> | ||||||
|   <div class="container"> |   <div class="container"> | ||||||
|   |  | ||||||
|     <div class="id"><a>{{item.id}}</a></div> |     <div class="id"><a>{{item.id}}</a></div> | ||||||
|     <div class="surname"><a>{{item.lastName}}</a></div> |     <div class="surname"><a>{{item.lastName}}</a></div> | ||||||
|     <div class="firstname"><a>{{item.firstName}}</a></div> |     <div class="firstname"><a>{{item.firstName}}</a></div> | ||||||
| @ -37,10 +36,9 @@ | |||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:20px; |     font-size:20px; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol]; |     grid-template-columns:10% 14.2% 19% 14.2% 14.2% 14.2% 14.2%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "id type surname firstname infos accept refuse";  |     "id type surname firstname infos accept refuse";  | ||||||
|     column-gap:10px; |  | ||||||
|      |      | ||||||
|   } |   } | ||||||
|    |    | ||||||
| @ -99,9 +97,9 @@ | |||||||
|  |  | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .bodu { |  .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|  | |||||||
| @ -56,10 +56,10 @@ | |||||||
|  |  | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
|       <div class='loginBox'> |     <div class="setup"> | ||||||
|  |  | ||||||
|         <div v-if="loginPage"> |         <div v-if="loginPage"> | ||||||
|           <form @submit.prevent=" login(outputs.email,outputs.password);goBackHome();"class="form"> |       <div class='loginBox' style="margin-top:30%;"> | ||||||
|  |           <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form"> | ||||||
|             <h1 style="color:rgb(239,60,168); font-family: sans-serif;"> |             <h1 style="color:rgb(239,60,168); font-family: sans-serif;"> | ||||||
|               {{i18n("login.guest.signin")}} |               {{i18n("login.guest.signin")}} | ||||||
|             </h1> |             </h1> | ||||||
| @ -74,14 +74,15 @@ | |||||||
|             <div class="register"> |             <div class="register"> | ||||||
|               <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a> |               <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a> | ||||||
|             </div> |             </div> | ||||||
|             <div class="inputBox"> |             <div class="inputBox" style="margin-bottom:35px;"> | ||||||
|               <input type="submit" v-model="submitValue"> |               <input type="submit" v-model="submitValue"> | ||||||
|             </div> |             </div> | ||||||
|           </form> |           </form> | ||||||
|         </div> |         </div> | ||||||
|  |       </div> | ||||||
|         <div v-else> |         <div v-else> | ||||||
|           <form class="form"> |           <div class='loginBox' style="margin-top:30%; margin-bottom:50%;"> | ||||||
|  |             <form class="form"> | ||||||
|             <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;"> |             <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;"> | ||||||
|               {{i18n("login.guest.welcome")}} |               {{i18n("login.guest.welcome")}} | ||||||
|             </h1> |             </h1> | ||||||
| @ -128,9 +129,12 @@ | |||||||
|                 <p>{{i18n("login.guest.country")}}</p> |                 <p>{{i18n("login.guest.country")}}</p> | ||||||
|                 <input type="text" v-model="outputs.country"> |                 <input type="text" v-model="outputs.country"> | ||||||
|               </div> |               </div> | ||||||
|               <form novalidate enctype="multipart/form-data" class="inputBox"> |               <form class="inputBox"novalidate enctype="multipart/form-data"> | ||||||
|               	<p>{{i18n("profile.picture").toUpperCase()}}</p>  |               	<p>{{i18n("profile.picture").toUpperCase()}}</p> | ||||||
| 				<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*"> |               <label class="browser"> | ||||||
|  |                 Parcourir . . . | ||||||
|  | 				        <input  type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*"> | ||||||
|  |               </label> | ||||||
|               </form> |               </form> | ||||||
|               <div class="inputBox"> |               <div class="inputBox"> | ||||||
|                 <p>{{i18n("Curriculum").toUpperCase()}}</p>  |                 <p>{{i18n("Curriculum").toUpperCase()}}</p>  | ||||||
| @ -153,35 +157,26 @@ | |||||||
|             </div> |             </div> | ||||||
|           </form> |           </form> | ||||||
|          </div> |          </div> | ||||||
|         </div> |     </div> | ||||||
|  |   </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <style scoped> | <style scoped> | ||||||
| .Home{ |  | ||||||
|   position:absolute; |  | ||||||
|  	display: flex; |  | ||||||
|   z-index: 100; |  | ||||||
| 	padding: 8px 16px; |  | ||||||
| 	color:rgb(255, 255, 255); |  | ||||||
| 	text-decoration: none; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .Home:hover{ | .setup { | ||||||
|   width:40px; |   margin-left: auto; | ||||||
|   background-color: black; |   margin-right:auto; | ||||||
| 	border-radius:6px; |   min-width:400px; | ||||||
| 	color:white; |  | ||||||
|   transform: translate(0px ,1px); |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  |   width:25%; | ||||||
|  |   height:60%; | ||||||
|  | } | ||||||
|  |  | ||||||
| .loginBox { | .loginBox { | ||||||
|   background-color: rgb(24,24,24); |   background-color: rgb(24,24,24); | ||||||
|   width: 400px; |  | ||||||
|   display:flex; |   display:flex; | ||||||
|   justify-content: center; |   justify-content: center; | ||||||
|   padding: 40px; |   border-radius: 5%; | ||||||
|   border-radius: 20px; |  | ||||||
|   box-shadow:0 5px 25px #000000; |   box-shadow:0 5px 25px #000000; | ||||||
|    |    | ||||||
| } | } | ||||||
| @ -190,9 +185,8 @@ | |||||||
|   width:100%; |   width:100%; | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-direction: column; |   flex-direction: column; | ||||||
|   justify-content: center; |  | ||||||
|   align-items:center; |   align-items:center; | ||||||
|   gap: 15px; |   gap: 3%; | ||||||
| } | } | ||||||
|  |  | ||||||
|  |  | ||||||
| @ -200,12 +194,12 @@ | |||||||
|    |    | ||||||
|   width:100%; |   width:100%; | ||||||
|   border: none; |   border: none; | ||||||
|   margin-right: 50px; |   margin-right: 12.5%; | ||||||
|   padding-left: 10px; |   padding-left: 2.5%; | ||||||
|   padding-top:10px; |   padding-top:2.5%; | ||||||
|   padding-bottom:10px; |   padding-bottom:2.5%; | ||||||
|   outline:none; |   outline:none; | ||||||
|   border-radius: 4px; |   border-radius: 10px; | ||||||
|   font-size:1.35em; |   font-size:1.35em; | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -220,8 +214,9 @@ | |||||||
|  |  | ||||||
| .register{ | .register{ | ||||||
|   color:rgb(239,60,168); |   color:rgb(239,60,168); | ||||||
|   width: 100%; |   width:70%; | ||||||
|   display:flex; |   margin-bottom:20px; | ||||||
|  |   margin-top:20px; | ||||||
|   cursor: pointer; |   cursor: pointer; | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -250,6 +245,21 @@ input[type=submit],button,select{ | |||||||
|  |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | input[type=file]{ | ||||||
|  |   display:none; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .browser{ | ||||||
|  |   display:inline-block; | ||||||
|  |   cursor:pointer; | ||||||
|  |   border-radius:20px; | ||||||
|  |   background-color:rgb(239,60,168); | ||||||
|  |   padding:5%; | ||||||
|  |   font-size:1.35em; | ||||||
|  |   font-family:sans-serif; | ||||||
|  |   background:#FFFFFF; | ||||||
|  | } | ||||||
|  |  | ||||||
| button:active ,.switchpage:active{ | button:active ,.switchpage:active{ | ||||||
|   opacity:0.8; |   opacity:0.8; | ||||||
|  |  | ||||||
|  | |||||||
| @ -105,7 +105,8 @@ | |||||||
|       </button> |       </button> | ||||||
|     </div> |     </div> | ||||||
|     <div v-if="createMod"> |     <div v-if="createMod"> | ||||||
|       <form class="listElement"> |       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||||
|  |          | ||||||
|         <div style="margin-bottom:20px;"> |         <div style="margin-bottom:20px;"> | ||||||
|          {{i18n("name")}} :  |          {{i18n("name")}} :  | ||||||
|         <input v-model="toAdd.title"> |         <input v-model="toAdd.title"> | ||||||
| @ -125,7 +126,7 @@ | |||||||
|       </form> |       </form> | ||||||
|     </div> |     </div> | ||||||
|     <div v-if="deleteMod"> |     <div v-if="deleteMod"> | ||||||
|       <form class="listElement"> |       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||||
|         <div style="margin-bottom:20px;"> |         <div style="margin-bottom:20px;"> | ||||||
|           {{i18n("courses.toDelete")}} : |           {{i18n("courses.toDelete")}} : | ||||||
|          <select style="max-width:200px;" class="teacher" v-model="toRemove"> |          <select style="max-width:200px;" class="teacher" v-model="toRemove"> | ||||||
| @ -138,7 +139,7 @@ | |||||||
|       </form> |       </form> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
|     <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title"> |     <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title" style="width:50%;margin-left:auto; margin-right:auto;"> | ||||||
|       <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;"> |       <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;"> | ||||||
|         <button   @click="editElementID = item.title; setModify(item); "> |         <button   @click="editElementID = item.title; setModify(item); "> | ||||||
|         {{i18n("courses.modify")}} |         {{i18n("courses.modify")}} | ||||||
| @ -148,7 +149,8 @@ | |||||||
|         <button @click="editElementID= '';patchCourse(item)"> {{i18n("courses.confirm")}} </button> |         <button @click="editElementID= '';patchCourse(item)"> {{i18n("courses.confirm")}} </button> | ||||||
|         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button> |         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button> | ||||||
|       </div> |       </div> | ||||||
|       <div  class="listElement" >  |       <div  class="listElement" > | ||||||
|  |  | ||||||
|       <div class="containerElement" v-if="editElementID !== item.title" > |       <div class="containerElement" v-if="editElementID !== item.title" > | ||||||
|  |  | ||||||
|         <div class="name"> {{item.title}} </div> |         <div class="name"> {{item.title}} </div> | ||||||
| @ -172,17 +174,27 @@ | |||||||
| <style scoped> | <style scoped> | ||||||
| .body { | .body { | ||||||
|     width:100%; |     width:100%; | ||||||
|     margin-bottom:10px; |     margin-top:3.5%; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | .infosContainer { | ||||||
|  |   min-width:350px; | ||||||
|  |   padding-bottom:50px; | ||||||
|  |   border:2px solid black; | ||||||
|  |   font-size:25px; | ||||||
|  |   color:white; | ||||||
|  |   padding:20px; | ||||||
|  |   background-color:rgb(50,50,50); | ||||||
|  |   border-radius:20px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  .containerElement{  |  .containerElement{  | ||||||
|    justify-content:center; |     justify-content:center; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:350px 350px 200px; |     grid-template-columns:38.8% 38.8% 22.4%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "name teacher credits";  |     "name teacher credits";  | ||||||
|     column-gap:10px; |     column-gap:10px;  } | ||||||
|      |  | ||||||
|   } |  | ||||||
|    |    | ||||||
|   .name { |   .name { | ||||||
|     grid-area:name; |     grid-area:name; | ||||||
| @ -200,6 +212,7 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
| .listElement{ | .listElement{ | ||||||
|  |  min-width:625px; | ||||||
|   border:2px solid black; |   border:2px solid black; | ||||||
|   font-size:25px; |   font-size:25px; | ||||||
|   color:white; |   color:white; | ||||||
| @ -207,6 +220,7 @@ | |||||||
|   background-color:rgb(50,50,50); |   background-color:rgb(50,50,50); | ||||||
|   border-radius:20px; |   border-radius:20px; | ||||||
|   margin-bottom:10px; |   margin-bottom:10px; | ||||||
|  |  | ||||||
| } | } | ||||||
|  |  | ||||||
| .modify{ | .modify{ | ||||||
| @ -255,10 +269,11 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
|   .listTitle{ |   .listTitle{ | ||||||
|  |     min-width:380px; | ||||||
|     display: flex; |     display: flex; | ||||||
|     justify-content: center; |     justify-content: center; | ||||||
|     align-items: center; |     align-items: center; | ||||||
|     width:400px; |     width:25%; | ||||||
|     margin-left:auto; |     margin-left:auto; | ||||||
|     margin-right:auto; |     margin-right:auto; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
| @ -266,7 +281,8 @@ | |||||||
|     color:white; |     color:white; | ||||||
|     padding:20px; |     padding:20px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|     border-radius:20px;margin-bottom:10px; |     border-radius:20px; | ||||||
|  |     margin-bottom:10px; | ||||||
|  |  | ||||||
|     button:hover{ |     button:hover{ | ||||||
|       opacity:0.8; |       opacity:0.8; | ||||||
|  | |||||||
| @ -210,11 +210,11 @@ | |||||||
| <style scoped> | <style scoped> | ||||||
|  |  | ||||||
| .container{ | .container{ | ||||||
|    |   min-width:675px; | ||||||
|   display:grid; |   display:grid; | ||||||
|   grid-template-columns:200px 900px; |   grid-template-columns:10vw 50vw; | ||||||
|   grid-template-rows:200px auto; |   grid-template-rows:200px auto; | ||||||
|   column-gap:30px; |   column-gap:2.7%; | ||||||
|   row-gap:45px; |   row-gap:45px; | ||||||
|   grid-template-areas: |   grid-template-areas: | ||||||
|   "profilPic globalInfos" |   "profilPic globalInfos" | ||||||
| @ -222,6 +222,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .profilPic{ | .profilPic{ | ||||||
|  |   width:100%; | ||||||
|   grid-area:profilPic; |   grid-area:profilPic; | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -242,13 +243,17 @@ | |||||||
|   grid-area:minfos; |   grid-area:minfos; | ||||||
| } | } | ||||||
| .body { | .body { | ||||||
|  |     min-width:960px; | ||||||
|     width:100%; |     width:100%; | ||||||
|     margin-bottom:10px; |     display:flex; | ||||||
|  |     align-items:center; | ||||||
|  |     justify-content:center; | ||||||
|  |     margin-top:5%; | ||||||
|   } |   } | ||||||
|  .containerElement{  |  .containerElement{  | ||||||
|    justify-content:center; |    justify-content:center; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:350px 350px 200px; |     grid-template-columns:38.8% 38.8% 22.4%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "name teacher credits";  |     "name teacher credits";  | ||||||
|     column-gap:10px; |     column-gap:10px; | ||||||
| @ -271,10 +276,11 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
| .listTitle{ | .listTitle{ | ||||||
|  |     min-width:197px; | ||||||
|     display: flex; |     display: flex; | ||||||
|     justify-content: center; |     justify-content: center; | ||||||
|     align-items: center; |     align-items: center; | ||||||
|     width:200px; |     width:8vw; | ||||||
|     margin-left:auto; |     margin-left:auto; | ||||||
|     margin-right:auto; |     margin-right:auto; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
| @ -286,6 +292,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .listElement{ | .listElement{ | ||||||
|  |   min-width:625px; | ||||||
|   border:2px solid black; |   border:2px solid black; | ||||||
|   font-size:25px; |   font-size:25px; | ||||||
|   color:white; |   color:white; | ||||||
| @ -296,6 +303,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .infosContainer { | .infosContainer { | ||||||
|  | min-width:350px; | ||||||
| padding-bottom:50px; | padding-bottom:50px; | ||||||
| border:2px solid black; | border:2px solid black; | ||||||
| font-size:25px; | font-size:25px; | ||||||
|  | |||||||
							
								
								
									
										236
									
								
								frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										236
									
								
								frontend/src/Apps/ScientificPublications/ResearcherProfile.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,236 @@ | |||||||
|  | <!---------------------------------------------------- | ||||||
|  | 	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> | ||||||
| @ -5,8 +5,8 @@ | |||||||
|  |  | ||||||
|   const users = await getStudents(); |   const users = await getStudents(); | ||||||
| </script>  | </script>  | ||||||
| <template> | <template style="margin-top:5%;"> | ||||||
|   <div v-for="item in users"> |   <div style="display:flex; justify-content:center; " v-for="item in users"> | ||||||
|     <div class="bodu"> |     <div class="bodu"> | ||||||
|       <div class="container"> |       <div class="container"> | ||||||
|         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div> |         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div> | ||||||
| @ -25,10 +25,9 @@ | |||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:30px; |     font-size:30px; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:250px 250px 250px 250px 150px; |     grid-template-columns:21.7% 21.7% 21.7% 21.7% 13.1%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "status option surname firstname infos";  |     "status option surname firstname infos";  | ||||||
|     column-gap:10px; |  | ||||||
|      |      | ||||||
|   } |   } | ||||||
|    |    | ||||||
| @ -42,21 +41,6 @@ | |||||||
|     align-self:center; |     align-self:center; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .refuse{ |  | ||||||
|     grid-area:refuse; |  | ||||||
|     align-self:center; |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   .titles { |  | ||||||
|     grid-area:titles; |  | ||||||
|     background-color:rgb(215,215,215); |  | ||||||
|   } |  | ||||||
|   .id{ |  | ||||||
|     grid-area:id; |  | ||||||
|     margin-left:40px; |  | ||||||
|     align-self:center; |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   .status{ |   .status{ | ||||||
|     grid-area:status; |     grid-area:status; | ||||||
|     align-self:center; |     align-self:center; | ||||||
| @ -81,15 +65,15 @@ | |||||||
|   button{ |   button{ | ||||||
|     font-size:15px; |     font-size:15px; | ||||||
|      height:50px; |      height:50px; | ||||||
|      width:100px; |      width:75%; | ||||||
|     border:none; |     border:none; | ||||||
|     border-radius:20px; |     border-radius:20px; | ||||||
|  |  | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .bodu { |   .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|  | |||||||
| @ -7,8 +7,8 @@ | |||||||
|   const users = await getAllUsers(); |   const users = await getAllUsers(); | ||||||
|    |    | ||||||
| </script>  | </script>  | ||||||
| <template> | <template style="margin-top:5%;"> | ||||||
|   <div v-for="item in users"> |   <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users"> | ||||||
|     <div class="bodu"> |     <div class="bodu"> | ||||||
|       <div class="container"> |       <div class="container"> | ||||||
|         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div> |         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div> | ||||||
| @ -22,23 +22,20 @@ | |||||||
|  |  | ||||||
| <style scoped> | <style scoped> | ||||||
|   .container{ |   .container{ | ||||||
|     justify-content:center; |  | ||||||
|     align-items:center; |  | ||||||
|     color:white; |     color:white; | ||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:30px; |     font-size:30px; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:250px 250px 250px 150px; |     grid-template-columns:27.7% 27.7% 27.7% 16.9%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "role surname firstname infos";  |     "role surname firstname infos";  | ||||||
|     column-gap:10px; |  | ||||||
|      |  | ||||||
|   } |   } | ||||||
|    |    | ||||||
|   .infos { |   .infos { | ||||||
|  |  | ||||||
|     grid-area:infos; |     grid-area:infos; | ||||||
|     align-items:center; |     align-self:center; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .role { |   .role { | ||||||
| @ -67,20 +64,18 @@ | |||||||
|   button{ |   button{ | ||||||
|     font-size:15px; |     font-size:15px; | ||||||
|      height:50px; |      height:50px; | ||||||
|      width:100px; |      width:75%; | ||||||
|     border:none; |     border:none; | ||||||
|     border-radius:20px; |     border-radius:20px; | ||||||
|  |  | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .bodu { |   .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  |  | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | |||||||
| @ -1,4 +1,11 @@ | |||||||
| body { | body { | ||||||
|    background-color: rgb(53, 25, 60); |    background-color: rgb(53, 25, 60); | ||||||
|    margin:0; |    margin:0; | ||||||
|  |    width: 100vw; | ||||||
|  |    height: 100vh; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | #app { | ||||||
|  |    width: 100%; | ||||||
|  |    height: 100%; | ||||||
| } | } | ||||||
|  | |||||||
| @ -4,5 +4,8 @@ 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'; | ||||||
|  |  | ||||||
| createApp(App).mount('#app') | const app = createApp(App); | ||||||
|  | app.use(CanvasJSChart); | ||||||
|  | app.mount('#app'); | ||||||
|  | |||||||
| @ -9,6 +9,7 @@ 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"; | ||||||
|  |  | ||||||
| const apps = { | const apps = { | ||||||
| 		'/login': LoginPage, | 		'/login': LoginPage, | ||||||
| @ -17,6 +18,7 @@ const apps = { | |||||||
| 		'/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