proposition of some fixes

moving file into extensions directory
making the chart responsive
2024-04-05 09:44:41 +02:00 · 2024-04-04 21:27:51 +02:00 · 2024-04-04 16:14:19 +02:00 · 2024-04-04 15:01:10 +02:00 · 2024-04-02 19:52:38 +02:00 · 2024-04-01 19:13:39 +02:00
14 changed files with 267 additions and 321 deletions
@@ -16,8 +16,6 @@ repositories {
 }

 dependencies {
-	compileOnly("org.projectlombok:lombok")
-	annotationProcessor("org.projectlombok:lombok")
 	implementation("org.springframework.boot:spring-boot-starter-jdbc")
 	implementation("org.springframework.boot:spring-boot-starter-data-jpa")
 	implementation("org.springframework.boot:spring-boot-starter-mail")
@@ -27,7 +25,7 @@ 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")
+	// 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")
@@ -1,10 +1,6 @@
 package ovh.herisson.Clyde.Tables;

 import jakarta.persistence.*;
-import ovh.herisson.Clyde.Tables.Msg.Forum;
-
-import java.util.List;
-
 import org.hibernate.annotations.OnDelete;
 import org.hibernate.annotations.OnDeleteAction;

@@ -21,11 +17,6 @@ public class Course {
    @JoinColumn(name = "Users")
    private User owner;

-	//// Extension Messagerie /////
-	@OneToMany
-	private List<Forum> forums;
-	///////////////////////////////
-
    public Course(int credits, String title, User owner){
        this.credits = credits;
        this.title = title;
@@ -1,32 +0,0 @@
-package ovh.herisson.Clyde.Tables.Msg;
-
-
-import java.util.Date;
-
-import org.hibernate.annotations.CreationTimestamp;
-
-import jakarta.persistence.*;
-import lombok.Data;
-import ovh.herisson.Clyde.Tables.User;
-
-@Entity
-@Data
-public class Answers {
-	@Id
-	@GeneratedValue(strategy = GenerationType.AUTO)
-	private int id;
-
-	@CreationTimestamp
-	private Date creation;
-
-	@ManyToOne
-	private Topic topic;
-
-	private String content;
-
-	@OneToOne
-	private User author;
-
-	private boolean anonymous;
-
-}
@@ -1,28 +0,0 @@
-package ovh.herisson.Clyde.Tables.Msg;
-
-import java.util.List;
-
-import jakarta.persistence.*;
-import lombok.Data;
-import ovh.herisson.Clyde.Tables.Course;
-import ovh.herisson.Clyde.Tables.User;
-
-@Entity
-@Data
-public class Forum {
-
-	@Id
-	@GeneratedValue(strategy = GenerationType.AUTO)
-	private int id;
-
-	@ManyToOne(cascade = CascadeType.ALL)
-	private Course course;
-
-	private String name;
-
-	@OneToMany
-	private List<User> writers; // User who are authorized to create a post
-
-	@OneToMany
-	private List<User> register;
-}
@@ -1,26 +0,0 @@
-package ovh.herisson.Clyde.Tables.Msg;
-
-import java.util.List;
-
-import jakarta.persistence.*;
-import lombok.Data;
-import ovh.herisson.Clyde.Tables.User;
-
-@Entity
-@Data
-public class Topic {
-
-	@Id
-	@GeneratedValue(strategy = GenerationType.AUTO)
-	private int id;
-
-	private String subject, content;
-
-	@OneToOne
-	private User author;
-	
-	@OneToMany(mappedBy = "topic", cascade = CascadeType.ALL)
-	private List<Answers> answers;
-
-	private boolean locked; // true if new messages can be posted
-}
@@ -8,6 +8,7 @@
      "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"
@@ -29,6 +30,20 @@
        "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,6 +9,7 @@
    "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"
@@ -99,19 +99,20 @@ window.addEventListener('hashchange', () => {
 			height: 100%;
 			width: 100%;
    display:grid;
-
-    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start] auto [endCol];
-    grid-template-rows:[firstRow-start] var(--header-size) [firstRow-end secondRow-start] calc(100% - var(--header-size)) [endRow];
+    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-areas:
    "topBar topBar" 
    "leftBar page";
-
+    row-gap:0px;
+    column-gap:0px;
  }

  .page {
    grid-area:page;
 		height: 100%;
 		width: 100%;
+    place-self:center;
  }

  .topBar{
@@ -154,7 +155,7 @@ window.addEventListener('hashchange', () => {

 	ul.vertical{
 		list-style-type: none;
-		margin-top: var(--header-size);
+		margin-top: 61px;
    top:0;
    left:0;
 		padding: 25px 0 0;
@@ -202,7 +203,7 @@ window.addEventListener('hashchange', () => {
    left:0;
    
 		position: fixed;
-		height:var(--header-size);
+		height:61px;
 		width: 100%;
 		background-color: rgb(24, 24, 24);
 	}
@@ -1,138 +0,0 @@
-<!----------------------------------------------------
-	File: Forums.vue 
-	Author: Anthony Debucquoy 
-	Scope: Extension messagerie
-	Description: Forum des étudiants
----------------------------------------------------->
-
-<script setup>
-import { ref, reactive } from 'vue'
-import { getCourses } from '@/rest/courses.js'
-import { ForumsOfCurrentCourse, getForumsOfCourse } from '@/rest/forum.js'
-import { PostsOfCurrentForum, getPostsOfForum } from '@/rest/forum.js'
-import { fetchedPost, fetchPost } from '@/rest/forum.js'
-
-const courses = await reactive(getCourses());
-const selectedCourse = ref();
-const selectedForum = ref();
-
-</script>
-
-<template>
-	<div id="app">
-		<div id="ForumSelector">
-			<select id="cours" value="" v-model="selectedCourse"  @change="getForumsOfCourse(selectedCourse)">
-				<option v-for="course in courses" :value="course.courseId">{{course.title}}</option>
-			</select>
-
-			<select id="forum" value="" v-model="selectedForum"  @change="getPostsOfForum(selectedForum)" v-if="ForumsOfCurrentCourse != null">
-				<option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option>
-			</select>
-		</div>
-		<div id="PostSelector" v-if="PostsOfCurrentForum != null">
-			<div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.name }}</div>
-			<!--button id="createPost" @click="createPost()">+</button-->
-		</div>
-		<div id="PostViewer" v-if="fetchedPost != null">
-			<div id="Post">
-				<h1>{{ fetchedPost.subject }}</h1>
-				{{fetchedPost.content}}
-			</div>
-			<div id="Messages">
-				<p v-for="msg in fetchedPost.messages">{{msg.author}} - {{msg.content}}</p>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-
-#app{
-	display: grid;
-	width: 100%;
-	height: 100%;
-	grid-template: 5em auto / 25% 75%;
-}
-
-#ForumSelector{
-	background-color: #FFFFFF0E;
-	grid-column: 1 / 3;
-	border-radius: 100px;
-	margin: 10px;
-	display: flex;
-	justify-content: space-around;
-}
-
-#ForumSelector select{
-	background-color: #ffa000;
-	border: none;
-	margin: 10px;
-	border-radius: 10px;
-	width: 200px;
-	text-align: center;
-}
-
-#ForumSelector button{
-	background-color: green;
-	border: none;
-	border-radius: 25%;
-	margin: 10px;
-}
-
-#PostSelector{
-	background-color: #FFFFFF0E;
-	border-radius: 0 25px 25px 0;
-	margin: 10px 0 10px 10px;
-	overflow: hidden;
-	padding: 10px;
-
-	display: flex;
-	flex-direction: column;
-
-}
-
-.postItem{
-	color: darkorange;
-	display: flex;
-	font-family: sans-serif;
-	font-weight: bold;
-	height: 4vh;
-	margin: 5px;
-	border-radius: 0 30px 30px 0;
-	align-items: center;
-	justify-content: center;
-	border: 1px solid darkorange;
-}
-
-.postItem:hover{
-	background-color: gray;
-}
-
-#PostViewer{
-	background-color: #FFFFFF0E;
-	border-radius: 25px;
-	margin: 10px;
-
-	max-height: 100%;
-
-	overflow: scroll;
-}
-
-#Post{
-	padding: 25px;
-
-}
-
-#Messages{
-	padding: 25px;
-	border-top: 3px dotted white;
-
-}
-
-#Messages > p {
-
-	background-color: orange;
-}
-
-</style>
-
@@ -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>
@@ -1,7 +1,3 @@
-:root {
-	--header-size: 61px;
-}
-
 body {
   background-color: rgb(53, 25, 60);
   margin:0;
@@ -4,5 +4,8 @@ import 'https://kit.fontawesome.com/fb3bbd0a95.js'

 import { createApp } from '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,7 +9,7 @@ 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 Forums from '@/Apps/Forums.vue'
+import ResearcherProfile from "@/Apps/ScientificPublications/ResearcherProfile.vue";

 const apps = {
 		'/login': LoginPage,
@@ -18,13 +18,13 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
-		'/forums': Forums,
+		'/researcher-profile' : ResearcherProfile,
 }

 const appsList = {
 		'Msg': { path: '#/msg', icon: 'fa-comment', text: i18n("app.messages") },
 		'Notification': { path: '#/notifs', icon: 'fa-bell', text: i18n("app.notifications") },
-		'Forum': { path: '#/forums', icon: 'fa-envelope', text: i18n("app.forum") },
+		'Forum': { path: '#/forum', icon: 'fa-envelope', text: i18n("app.forum") },
 		'Schedule': { path: '#/schedule', icon: 'fa-calendar-days', text: i18n("app.schedules") },
 		'Inscription': { path: '#/inscription', icon: 'fa-users', text: i18n("app.inscription.requests") },
 		'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
@@ -1,71 +0,0 @@
-import { ref } from 'vue'
-import { restGet, restPost, restDelete, restPatch } from './restConsumer.js'
-
-/**
- * List forums of a course
- */
-export async function getForumsOfCourse(id){
-	ForumsOfCurrentCourse.value = [
-		{
-			id: 1,
-			name: "forum~1" 
-		},
-		{
-			id: 2,
-			name: "forum~2" 
-		},
-	]
-	// ForumsOfCurrentCourse = await restGet("/forums/" + id)
-}
-
-export const ForumsOfCurrentCourse = ref();
-
-/**
- * List post of a specified forum
- */
-export async function getPostsOfForum(id){
-	PostsOfCurrentForum.value = [
-		{
-			id: 1,
-			name: "Post~1" 
-		},
-		{
-			id: 2,
-			name: "Post~2" 
-		},
-	] 
-	// PostsCurrentForum.value = await restGet("/forum/" + id);
-}
-
-export const PostsOfCurrentForum = ref();
-
-/**
- * Get a post and its responses
- */
-export async function fetchPost(id){
-	fetchedPost.value = {
-		id: 1,
-		subject: "This is the subject of the post",
-		content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
-		messages: [
-			{
-				id: 1,
-				author: "author~1",
-				content: "J'ai pas copris le message !"
-			},
-			{
-				id: 2,
-				author: "author~2",
-				content: "tu as fait une faute dans ton message..."
-			},
-			{
-				id: 3,
-				author: null,
-				content: "I'm anonymous noww..."
-			}
-		]
-	}
-	// fetchedPost.value = await restGet("/forum/post/" + id);
-}
-
-export const fetchedPost = ref();
Author	SHA1	Message	Date
tonitch	b8b193f344	proposition of some fixes	2024-04-05 09:44:41 +02:00
Maxime	3d78851b29	moving file into extensions directory	2024-04-04 21:27:51 +02:00
Maxime	dbe28a7fed	making the chart responsive	2024-04-04 16:14:19 +02:00
Maxime	bd7d2c2d51	adding colors to piechart	2024-04-04 15:01:10 +02:00
Maxime	91c7f42521	finished mock researcher profile	2024-04-02 19:52:38 +02:00
Maxime	bd27ffd3cb	search bar not working (to be shared with william)	2024-04-01 19:13:39 +02:00
Maxime	91ee3adbcd	adding the dependance	2024-03-30 13:10:11 +01:00
Maxime	c1b2742a8f	better select buttons	2024-03-30 12:38:18 +01:00
Maxime	2805fede4b	researcher profile page separations	2024-03-30 12:38:18 +01:00
Wal	951feed3c8	Full screen apps	2024-03-30 12:38:18 +01:00
Wal	95054fa973	Login 'fixed'	2024-03-30 12:38:18 +01:00
Wal	3af83a58d3	Just to merge	2024-03-30 12:38:17 +01:00
tonitch	47c5c14862	Make app use full space	2024-03-30 12:38:17 +01:00
Maxime	db895a6091	added temporary fix to docker issue	2024-03-23 14:38:26 +01:00