Compare commits
9 Commits
tonitch/ma
...
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,
|
||||
|
15
frontend/package-lock.json
generated
15
frontend/package-lock.json
generated
@ -8,7 +8,6 @@
|
||||
"name": "clyde",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@canvasjs/vue-charts": "^1.0.4",
|
||||
"vite-plugin-top-level-await": "^1.4.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue3-toastify": "^0.2.1"
|
||||
@ -30,20 +29,6 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@canvasjs/charts": {
|
||||
"version": "3.7.45",
|
||||
"resolved": "https://registry.npmjs.org/@canvasjs/charts/-/charts-3.7.45.tgz",
|
||||
"integrity": "sha512-FPMX8wn+PEHzAa/GLBsL5lWB81AzKZLw51t7SiSUjMbtUN5/OIrmDcwUTw+53/Bbdd9gm2LLmxAdZsQ75JI31g=="
|
||||
},
|
||||
"node_modules/@canvasjs/vue-charts": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@canvasjs/vue-charts/-/vue-charts-1.0.4.tgz",
|
||||
"integrity": "sha512-PzOA8xeb/f68a39uoFZNn843dGPU36bsqmbO5DWjP7k6FwkK5AeGkYa/H3RHC02Xc6mG68vg9aFNj2Fyqhu4UQ==",
|
||||
"dependencies": {
|
||||
"@canvasjs/charts": "^3.7.5",
|
||||
"vue": ">=3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.19.12",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
|
||||
|
@ -9,7 +9,6 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@canvasjs/vue-charts": "^1.0.4",
|
||||
"vite-plugin-top-level-await": "^1.4.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue3-toastify": "^0.2.1"
|
||||
|
@ -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)
|
||||
|
||||
|
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 App from './App.vue'
|
||||
import CanvasJSChart from '@canvasjs/vue-charts';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(CanvasJSChart);
|
||||
app.mount('#app');
|
||||
createApp(App).mount('#app')
|
||||
|
@ -9,16 +9,16 @@ import Profil from "@/Apps/Profil.vue"
|
||||
import Courses from "@/Apps/ManageCourses.vue"
|
||||
import Users from "@/Apps/UsersList.vue"
|
||||
import Students from "@/Apps/StudentsList.vue"
|
||||
import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";
|
||||
import Schedule from "@/Apps/Schedule.vue"
|
||||
|
||||
const apps = {
|
||||
'/schedule': Schedule,
|
||||
'/login': LoginPage,
|
||||
'/inscription': Inscription,
|
||||
'/profil': Profil,
|
||||
'/manage-courses' : Courses,
|
||||
'/users-list' : Users,
|
||||
'/students-list' : Students,
|
||||
'/researcher-profile' : ResearcherProfile,
|
||||
}
|
||||
|
||||
const appsList = {
|
||||
|
Reference in New Issue
Block a user