Compare commits
	
		
			9 Commits
		
	
	
		
			Leo/Backen
			...
			Schedule/m
		
	
	| 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("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") | ||||
|  | ||||
| @ -47,6 +47,7 @@ public class ApplicationsController { | ||||
|  | ||||
|         //if unAuthed | ||||
|         authorizedApps.add(Applications.Login); | ||||
|         authorizedApps.add(Applications.Schedule); | ||||
|  | ||||
| 		User user = authServ.getUserFromToken(token); | ||||
| 		if(user == null) | ||||
|  | ||||
| @ -3,6 +3,7 @@ package ovh.herisson.Clyde.Tables; | ||||
| public enum Applications { | ||||
|     // without any token | ||||
|     Login, | ||||
|     Schedule, | ||||
|  | ||||
|     // with any token | ||||
|     Profile, | ||||
|  | ||||
| @ -25,7 +25,6 @@ window.addEventListener('hashchange', () => { | ||||
|   const login=ref(i18n("app.login")) | ||||
|   const active=ref(false) | ||||
|  | ||||
|  | ||||
| 	const apps = ref([]) | ||||
| 	appList().then(e => apps.value = e) | ||||
|  | ||||
| @ -52,7 +51,7 @@ window.addEventListener('hashchange', () => { | ||||
|             <a class="icon" href="#Notifications"> | ||||
|                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div> | ||||
|             </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" > | ||||
|                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div> | ||||
|                 <div v-if="active" class="dropdown"> | ||||
| @ -86,12 +85,9 @@ window.addEventListener('hashchange', () => { | ||||
|     </ul> | ||||
|     </div> | ||||
|     <div class="page"> | ||||
|       <div style=" margin:50px;"> | ||||
|         <Suspense> | ||||
|          | ||||
| 		<component :is="currentView" /> | ||||
| 				<component :is="currentView" /> | ||||
|         </Suspense> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| @ -99,6 +95,8 @@ window.addEventListener('hashchange', () => { | ||||
| <style scoped> | ||||
|    | ||||
|   .container{ | ||||
| 			height: 100%; | ||||
| 			width: 100%; | ||||
|     display:grid; | ||||
|     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol]; | ||||
|     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow]; | ||||
| @ -111,6 +109,8 @@ window.addEventListener('hashchange', () => { | ||||
|  | ||||
|   .page { | ||||
|     grid-area:page; | ||||
| 		height: 100%; | ||||
| 		width: 100%; | ||||
|     place-self:center; | ||||
|   } | ||||
|  | ||||
|  | ||||
| @ -16,10 +16,9 @@ | ||||
|  | ||||
|  | ||||
| <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="container"> | ||||
|   | ||||
|     <div class="id"><a>{{item.id}}</a></div> | ||||
|     <div class="surname"><a>{{item.lastName}}</a></div> | ||||
|     <div class="firstname"><a>{{item.firstName}}</a></div> | ||||
| @ -37,10 +36,9 @@ | ||||
|     height:100px; | ||||
|     font-size:20px; | ||||
|     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: | ||||
|     "id type surname firstname infos accept refuse";  | ||||
|     column-gap:10px; | ||||
|      | ||||
|   } | ||||
|    | ||||
| @ -99,9 +97,9 @@ | ||||
|  | ||||
|   } | ||||
|  | ||||
|   .bodu { | ||||
|     width:100%; | ||||
|     margin-bottom:10px; | ||||
|  .bodu { | ||||
|     margin-top:2%; | ||||
|     width:66%; | ||||
|     border:2px solid black; | ||||
|     border-radius:9px; | ||||
|     background-color:rgb(50,50,50); | ||||
|  | ||||
| @ -56,10 +56,10 @@ | ||||
|  | ||||
|  | ||||
| <template> | ||||
|       <div class='loginBox'> | ||||
|  | ||||
|     <div class="setup"> | ||||
|         <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;"> | ||||
|               {{i18n("login.guest.signin")}} | ||||
|             </h1> | ||||
| @ -74,14 +74,15 @@ | ||||
|             <div class="register"> | ||||
|               <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a> | ||||
|             </div> | ||||
|             <div class="inputBox"> | ||||
|             <div class="inputBox" style="margin-bottom:35px;"> | ||||
|               <input type="submit" v-model="submitValue"> | ||||
|             </div> | ||||
|           </form> | ||||
|         </div> | ||||
|  | ||||
|       </div> | ||||
|         <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;"> | ||||
|               {{i18n("login.guest.welcome")}} | ||||
|             </h1> | ||||
| @ -128,9 +129,12 @@ | ||||
|                 <p>{{i18n("login.guest.country")}}</p> | ||||
|                 <input type="text" v-model="outputs.country"> | ||||
|               </div> | ||||
|               <form novalidate enctype="multipart/form-data" class="inputBox"> | ||||
|               	<p>{{i18n("profile.picture").toUpperCase()}}</p>  | ||||
| 				<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*"> | ||||
|               <form class="inputBox"novalidate enctype="multipart/form-data"> | ||||
|               	<p>{{i18n("profile.picture").toUpperCase()}}</p> | ||||
|               <label class="browser"> | ||||
|                 Parcourir . . . | ||||
| 				        <input  type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*"> | ||||
|               </label> | ||||
|               </form> | ||||
|               <div class="inputBox"> | ||||
|                 <p>{{i18n("Curriculum").toUpperCase()}}</p>  | ||||
| @ -153,35 +157,26 @@ | ||||
|             </div> | ||||
|           </form> | ||||
|          </div> | ||||
|         </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <style scoped> | ||||
| .Home{ | ||||
|   position:absolute; | ||||
|  	display: flex; | ||||
|   z-index: 100; | ||||
| 	padding: 8px 16px; | ||||
| 	color:rgb(255, 255, 255); | ||||
| 	text-decoration: none; | ||||
| } | ||||
|  | ||||
| .Home:hover{ | ||||
|   width:40px; | ||||
|   background-color: black; | ||||
| 	border-radius:6px; | ||||
| 	color:white; | ||||
|   transform: translate(0px ,1px); | ||||
| } | ||||
| .setup { | ||||
|   margin-left: auto; | ||||
|   margin-right:auto; | ||||
|   min-width:400px; | ||||
|  | ||||
|   width:25%; | ||||
|   height:60%; | ||||
| } | ||||
|  | ||||
| .loginBox { | ||||
|   background-color: rgb(24,24,24); | ||||
|   width: 400px; | ||||
|   display:flex; | ||||
|   justify-content: center; | ||||
|   padding: 40px; | ||||
|   border-radius: 20px; | ||||
|   border-radius: 5%; | ||||
|   box-shadow:0 5px 25px #000000; | ||||
|    | ||||
| } | ||||
| @ -190,9 +185,8 @@ | ||||
|   width:100%; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   justify-content: center; | ||||
|   align-items:center; | ||||
|   gap: 15px; | ||||
|   gap: 3%; | ||||
| } | ||||
|  | ||||
|  | ||||
| @ -200,12 +194,12 @@ | ||||
|    | ||||
|   width:100%; | ||||
|   border: none; | ||||
|   margin-right: 50px; | ||||
|   padding-left: 10px; | ||||
|   padding-top:10px; | ||||
|   padding-bottom:10px; | ||||
|   margin-right: 12.5%; | ||||
|   padding-left: 2.5%; | ||||
|   padding-top:2.5%; | ||||
|   padding-bottom:2.5%; | ||||
|   outline:none; | ||||
|   border-radius: 4px; | ||||
|   border-radius: 10px; | ||||
|   font-size:1.35em; | ||||
| } | ||||
|  | ||||
| @ -220,8 +214,9 @@ | ||||
|  | ||||
| .register{ | ||||
|   color:rgb(239,60,168); | ||||
|   width: 100%; | ||||
|   display:flex; | ||||
|   width:70%; | ||||
|   margin-bottom:20px; | ||||
|   margin-top:20px; | ||||
|   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{ | ||||
|   opacity:0.8; | ||||
|  | ||||
|  | ||||
| @ -105,7 +105,8 @@ | ||||
|       </button> | ||||
|     </div> | ||||
|     <div v-if="createMod"> | ||||
|       <form class="listElement"> | ||||
|       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||
|          | ||||
|         <div style="margin-bottom:20px;"> | ||||
|          {{i18n("name")}} :  | ||||
|         <input v-model="toAdd.title"> | ||||
| @ -125,7 +126,7 @@ | ||||
|       </form> | ||||
|     </div> | ||||
|     <div v-if="deleteMod"> | ||||
|       <form class="listElement"> | ||||
|       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||
|         <div style="margin-bottom:20px;"> | ||||
|           {{i18n("courses.toDelete")}} : | ||||
|          <select style="max-width:200px;" class="teacher" v-model="toRemove"> | ||||
| @ -138,7 +139,7 @@ | ||||
|       </form> | ||||
|     </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;"> | ||||
|         <button   @click="editElementID = item.title; setModify(item); "> | ||||
|         {{i18n("courses.modify")}} | ||||
| @ -148,7 +149,8 @@ | ||||
|         <button @click="editElementID= '';patchCourse(item)"> {{i18n("courses.confirm")}} </button> | ||||
|         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button> | ||||
|       </div> | ||||
|       <div  class="listElement" >  | ||||
|       <div  class="listElement" > | ||||
|  | ||||
|       <div class="containerElement" v-if="editElementID !== item.title" > | ||||
|  | ||||
|         <div class="name"> {{item.title}} </div> | ||||
| @ -172,17 +174,27 @@ | ||||
| <style scoped> | ||||
| .body { | ||||
|     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{  | ||||
|    justify-content:center; | ||||
|     justify-content:center; | ||||
|     display:grid; | ||||
|     grid-template-columns:350px 350px 200px; | ||||
|     grid-template-columns:38.8% 38.8% 22.4%; | ||||
|     grid-template-areas: | ||||
|     "name teacher credits";  | ||||
|     column-gap:10px; | ||||
|      | ||||
|   } | ||||
|     column-gap:10px;  } | ||||
|    | ||||
|   .name { | ||||
|     grid-area:name; | ||||
| @ -200,6 +212,7 @@ | ||||
|   } | ||||
|  | ||||
| .listElement{ | ||||
|  min-width:625px; | ||||
|   border:2px solid black; | ||||
|   font-size:25px; | ||||
|   color:white; | ||||
| @ -207,6 +220,7 @@ | ||||
|   background-color:rgb(50,50,50); | ||||
|   border-radius:20px; | ||||
|   margin-bottom:10px; | ||||
|  | ||||
| } | ||||
|  | ||||
| .modify{ | ||||
| @ -255,10 +269,11 @@ | ||||
|   } | ||||
|  | ||||
|   .listTitle{ | ||||
|     min-width:380px; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     width:400px; | ||||
|     width:25%; | ||||
|     margin-left:auto; | ||||
|     margin-right:auto; | ||||
|     border:2px solid black; | ||||
| @ -266,7 +281,8 @@ | ||||
|     color:white; | ||||
|     padding:20px; | ||||
|     background-color:rgb(50,50,50); | ||||
|     border-radius:20px;margin-bottom:10px; | ||||
|     border-radius:20px; | ||||
|     margin-bottom:10px; | ||||
|  | ||||
|     button:hover{ | ||||
|       opacity:0.8; | ||||
|  | ||||
| @ -210,11 +210,11 @@ | ||||
| <style scoped> | ||||
|  | ||||
| .container{ | ||||
|    | ||||
|   min-width:675px; | ||||
|   display:grid; | ||||
|   grid-template-columns:200px 900px; | ||||
|   grid-template-columns:10vw 50vw; | ||||
|   grid-template-rows:200px auto; | ||||
|   column-gap:30px; | ||||
|   column-gap:2.7%; | ||||
|   row-gap:45px; | ||||
|   grid-template-areas: | ||||
|   "profilPic globalInfos" | ||||
| @ -222,6 +222,7 @@ | ||||
| } | ||||
|  | ||||
| .profilPic{ | ||||
|   width:100%; | ||||
|   grid-area:profilPic; | ||||
| } | ||||
|  | ||||
| @ -242,13 +243,17 @@ | ||||
|   grid-area:minfos; | ||||
| } | ||||
| .body { | ||||
|     min-width:960px; | ||||
|     width:100%; | ||||
|     margin-bottom:10px; | ||||
|     display:flex; | ||||
|     align-items:center; | ||||
|     justify-content:center; | ||||
|     margin-top:5%; | ||||
|   } | ||||
|  .containerElement{  | ||||
|    justify-content:center; | ||||
|     display:grid; | ||||
|     grid-template-columns:350px 350px 200px; | ||||
|     grid-template-columns:38.8% 38.8% 22.4%; | ||||
|     grid-template-areas: | ||||
|     "name teacher credits";  | ||||
|     column-gap:10px; | ||||
| @ -271,10 +276,11 @@ | ||||
|   } | ||||
|  | ||||
| .listTitle{ | ||||
|     min-width:197px; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     width:200px; | ||||
|     width:8vw; | ||||
|     margin-left:auto; | ||||
|     margin-right:auto; | ||||
|     border:2px solid black; | ||||
| @ -286,6 +292,7 @@ | ||||
| } | ||||
|  | ||||
| .listElement{ | ||||
|   min-width:625px; | ||||
|   border:2px solid black; | ||||
|   font-size:25px; | ||||
|   color:white; | ||||
| @ -296,6 +303,7 @@ | ||||
| } | ||||
|  | ||||
| .infosContainer { | ||||
| min-width:350px; | ||||
| padding-bottom:50px; | ||||
| border:2px solid black; | ||||
| font-size:25px; | ||||
|  | ||||
							
								
								
									
										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> | ||||
| @ -5,8 +5,8 @@ | ||||
|  | ||||
|   const users = await getStudents(); | ||||
| </script>  | ||||
| <template> | ||||
|   <div v-for="item in users"> | ||||
| <template style="margin-top:5%;"> | ||||
|   <div style="display:flex; justify-content:center; " v-for="item in users"> | ||||
|     <div class="bodu"> | ||||
|       <div class="container"> | ||||
|         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div> | ||||
| @ -25,10 +25,9 @@ | ||||
|     height:100px; | ||||
|     font-size:30px; | ||||
|     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: | ||||
|     "status option surname firstname infos";  | ||||
|     column-gap:10px; | ||||
|      | ||||
|   } | ||||
|    | ||||
| @ -42,21 +41,6 @@ | ||||
|     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{ | ||||
|     grid-area:status; | ||||
|     align-self:center; | ||||
| @ -81,15 +65,15 @@ | ||||
|   button{ | ||||
|     font-size:15px; | ||||
|      height:50px; | ||||
|      width:100px; | ||||
|      width:75%; | ||||
|     border:none; | ||||
|     border-radius:20px; | ||||
|  | ||||
|   } | ||||
|  | ||||
|   .bodu { | ||||
|     width:100%; | ||||
|     margin-bottom:10px; | ||||
|     margin-top:2%; | ||||
|     width:66%; | ||||
|     border:2px solid black; | ||||
|     border-radius:9px; | ||||
|     background-color:rgb(50,50,50); | ||||
|  | ||||
| @ -7,8 +7,8 @@ | ||||
|   const users = await getAllUsers(); | ||||
|    | ||||
| </script>  | ||||
| <template> | ||||
|   <div v-for="item in users"> | ||||
| <template style="margin-top:5%;"> | ||||
|   <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users"> | ||||
|     <div class="bodu"> | ||||
|       <div class="container"> | ||||
|         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div> | ||||
| @ -22,23 +22,20 @@ | ||||
|  | ||||
| <style scoped> | ||||
|   .container{ | ||||
|     justify-content:center; | ||||
|     align-items:center; | ||||
|     color:white; | ||||
|     height:100px; | ||||
|     font-size:30px; | ||||
|     display:grid; | ||||
|     grid-template-columns:250px 250px 250px 150px; | ||||
|     grid-template-columns:27.7% 27.7% 27.7% 16.9%; | ||||
|     grid-template-areas: | ||||
|     "role surname firstname infos";  | ||||
|     column-gap:10px; | ||||
|      | ||||
|  | ||||
|   } | ||||
|    | ||||
|   .infos { | ||||
|  | ||||
|     grid-area:infos; | ||||
|     align-items:center; | ||||
|     align-self:center; | ||||
|   } | ||||
|  | ||||
|   .role { | ||||
| @ -67,20 +64,18 @@ | ||||
|   button{ | ||||
|     font-size:15px; | ||||
|      height:50px; | ||||
|      width:100px; | ||||
|      width:75%; | ||||
|     border:none; | ||||
|     border-radius:20px; | ||||
|  | ||||
|   } | ||||
|  | ||||
|   .bodu { | ||||
|     width:100%; | ||||
|     margin-bottom:10px; | ||||
|     margin-top:2%; | ||||
|     width:66%; | ||||
|     border:2px solid black; | ||||
|     border-radius:9px; | ||||
|     background-color:rgb(50,50,50); | ||||
|   } | ||||
|  | ||||
|  | ||||
| </style> | ||||
|  | ||||
|  | ||||
| @ -1,4 +1,11 @@ | ||||
| body { | ||||
|    background-color: rgb(53, 25, 60); | ||||
|    margin:0; | ||||
|    width: 100vw; | ||||
|    height: 100vh; | ||||
| } | ||||
|  | ||||
| #app { | ||||
|    width: 100%; | ||||
|    height: 100%; | ||||
| } | ||||
|  | ||||
| @ -9,8 +9,10 @@ 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" | ||||
|  | ||||
| const apps = { | ||||
| 		'/schedule': Schedule, | ||||
| 		'/login': LoginPage, | ||||
| 		'/inscription': Inscription, | ||||
| 		'/profil': Profil, | ||||
|  | ||||
		Reference in New Issue
	
	Block a user