course management
This commit is contained in:
		| @ -8,11 +8,13 @@ | |||||||
|   import LoginPage from './Apps/Login.vue' |   import LoginPage from './Apps/Login.vue' | ||||||
|   import Inscription from "./Apps/Inscription.vue" |   import Inscription from "./Apps/Inscription.vue" | ||||||
|   import Profil from "./Apps/Profil.vue" |   import Profil from "./Apps/Profil.vue" | ||||||
|  |   import Courses from "./Apps/ManageCourses.vue"  | ||||||
|  |  | ||||||
|   const apps = { |   const apps = { | ||||||
|   	'/login': LoginPage, |   	'/login': LoginPage, | ||||||
| 	'/inscription': Inscription, | 	'/inscription': Inscription, | ||||||
|   '/profil': Profil |   '/profil': Profil, | ||||||
|  |   '/manage-courses' : Courses, | ||||||
|   } |   } | ||||||
|   const currentPath = ref(window.location.hash) |   const currentPath = ref(window.location.hash) | ||||||
|  |  | ||||||
| @ -97,8 +99,12 @@ | |||||||
|             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div> |             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div> | ||||||
|             <div class="text">{{i18n("app.forum")}}</div></a></li> |             <div class="text">{{i18n("app.forum")}}</div></a></li> | ||||||
|         <li><a href="#/inscription"> |         <li><a href="#/inscription"> | ||||||
|             <div class="fa-solid fa-users" style="font-size: 40px;"></div> |             <div class="fa-solid fa-users" style="align-self:center;font-size: 40px;"></div> | ||||||
|             <div class="text">{{i18n("app.inscription.requests")}}</div></a></li> |             <div class="text" style="top:0;">{{i18n("app.inscription.requests")}}</div></a></li> | ||||||
|  |  | ||||||
|  |         <li><a href="#/manage-courses"> | ||||||
|  |             <div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div> | ||||||
|  |             <div class="text">Manage courses</div></a></li> | ||||||
|     </ul> |     </ul> | ||||||
|  |  | ||||||
|     </div> |     </div> | ||||||
| @ -246,7 +252,6 @@ | |||||||
| 	  } | 	  } | ||||||
|  |  | ||||||
| 	  .text { | 	  .text { | ||||||
| 		position: absolute; |  | ||||||
| 		right: 0%; | 		right: 0%; | ||||||
| 		width: 0%; | 		width: 0%; | ||||||
| 		opacity: 0; | 		opacity: 0; | ||||||
| @ -258,9 +263,9 @@ | |||||||
|  |  | ||||||
| 	  ul.vertical:hover .text { | 	  ul.vertical:hover .text { | ||||||
| 		opacity: 1; | 		opacity: 1; | ||||||
| 		width: 70%; | 		width: 60%; | ||||||
| 		transition-duration: .3s; | 		transition-duration: .3s; | ||||||
| 		padding-left: 5px; | 		padding-left: 15px; | ||||||
| 	  } | 	  } | ||||||
|      |      | ||||||
| </style> | </style> | ||||||
|  | |||||||
							
								
								
									
										78
									
								
								frontend/src/Apps/ManageCourses.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										78
									
								
								frontend/src/Apps/ManageCourses.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,78 @@ | |||||||
|  | <script setup> | ||||||
|  | const cursus=[ | ||||||
|  |   { | ||||||
|  |   "id": 12, | ||||||
|  |   "name": "Math pour l'info", | ||||||
|  |   "credits": 11, | ||||||
|  |   "faculty": "science", | ||||||
|  |   "teacher": 42, | ||||||
|  |   "Assistants": []}, | ||||||
|  |   { | ||||||
|  |   "id": 42, | ||||||
|  |   "name": "Operating Systems", | ||||||
|  |   "credits": 8, | ||||||
|  |   "faculty": "science", | ||||||
|  |   "teacher": 14, | ||||||
|  |   "Assistants": []}, | ||||||
|  |   { | ||||||
|  |   "id": 42, | ||||||
|  |   "name": "Fonctionnement des ordinateurs", | ||||||
|  |   "credits": 11, | ||||||
|  |   "faculty": "science", | ||||||
|  |   "teacher": 42, | ||||||
|  |   "Assistants": []}, | ||||||
|  |  | ||||||
|  |   ] | ||||||
|  | </script> | ||||||
|  | <template> | ||||||
|  |   <div class="body"> | ||||||
|  |     <div  class="listElement " v-for="item in cursus"> | ||||||
|  |       <div class=" containerElement"> | ||||||
|  |         <div class="name"> {{item.name}} </div> | ||||||
|  |         <div class="teacher">{{item.teacher}}</div>  | ||||||
|  |         <div class="credits">Credits:{{item.credits}}</div>   | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <style scoped> | ||||||
|  | .body { | ||||||
|  |     width:100%; | ||||||
|  |     margin-bottom:10px; | ||||||
|  |   } | ||||||
|  |  .containerElement{  | ||||||
|  |    justify-content:center; | ||||||
|  |     display:grid; | ||||||
|  |     grid-template-columns:350px 350px 200px; | ||||||
|  |     grid-template-areas: | ||||||
|  |     "name teacher credits";  | ||||||
|  |     column-gap:10px; | ||||||
|  |      | ||||||
|  |   } | ||||||
|  |    | ||||||
|  |   .name { | ||||||
|  |     grid-area:name; | ||||||
|  |     align-self:center; | ||||||
|  |   } | ||||||
|  |  | ||||||
|  |   .teacher{ | ||||||
|  |     grid-area:teacher; | ||||||
|  |     align-self:center; | ||||||
|  |   } | ||||||
|  |  | ||||||
|  |   .credits{ | ||||||
|  |     grid-area:credits; | ||||||
|  |     align-self:center; | ||||||
|  |   } | ||||||
|  |  | ||||||
|  | .listElement{ | ||||||
|  |   border:2px solid black; | ||||||
|  |   font-size:25px; | ||||||
|  |   color:white; | ||||||
|  |   padding:20px; | ||||||
|  |   background-color:rgb(50,50,50); | ||||||
|  |   border-radius:20px; | ||||||
|  |   margin-bottom:10px; | ||||||
|  | } | ||||||
|  | </style> | ||||||
		Reference in New Issue
	
	Block a user