$
This commit is contained in:
pro.boooooo
parent
f2081ed070
commit
ee9ca27018
25
readme.md
25
readme.md
@ -1,31 +1,44 @@
|
||||
## Info
|
||||
### Documentation de riot :
|
||||
|
||||
### Probleme connu
|
||||
```text
|
||||
Section : Ingenieur, Ecole de commerce, Tout ce qui commence par "Formation"
|
||||
Raison : Le model d'envoie de donnees ne prends pas en charge plus de 3 sections (changer les fonctions getDataN()
|
||||
```
|
||||
|
||||
### IMPORTANT
|
||||
```text
|
||||
Si ca ne s'affiche pas dans la milli seconde, pas besoin de forcer le boutton,
|
||||
faut juste attendre que le MVC receptionne les donnees.
|
||||
```
|
||||
|
||||
### Documentation de riot :
|
||||
```http request
|
||||
https://riot.js.org/documentation/
|
||||
```
|
||||
### Git
|
||||
```
|
||||
```http request
|
||||
https://dwarves.iut-fbleau.fr/gitiut/boudjeml/ParcoursupAnalytics
|
||||
```
|
||||
|
||||
## Pour compiler:
|
||||
|
||||
### Installer node js
|
||||
```
|
||||
```http request
|
||||
https://nodejs.org/en/download/
|
||||
```
|
||||
|
||||
### Run le serveur
|
||||
```
|
||||
```shell
|
||||
npm start
|
||||
```
|
||||
|
||||
### Si vous avez des erreurs vous disant qu'un package n'est pas installé,<br> faites
|
||||
Structure :
|
||||
```
|
||||
```shell
|
||||
npm install {nom_du_package} --save-dev
|
||||
```
|
||||
Exemple :
|
||||
```
|
||||
```shell
|
||||
npm install webpack --save-dev
|
||||
```
|
||||
@ -1,11 +1,12 @@
|
||||
import log from "./log";
|
||||
import * as riot from "riot";
|
||||
|
||||
export default class View {
|
||||
constructor() {
|
||||
this.title = document.getElementById("selector-top-title")
|
||||
this.zone = document.getElementById("selector-list-zone")
|
||||
this.path = document.getElementById("location")
|
||||
this.etab = document.getElementById("etab")
|
||||
this.path = document.getElementById("loc")
|
||||
this.etab = document.getElementById("etablanalytics-list")
|
||||
this.btn = document.getElementById("selector-top-btn")
|
||||
this.btn.onclick = () => {
|
||||
this.updateMenu(" ", "previous")
|
||||
@ -29,25 +30,18 @@ export default class View {
|
||||
|
||||
if(title || data) {
|
||||
data.forEach((e) => {
|
||||
let li = document.createElement("li")
|
||||
li.className = "selector-list-inner"
|
||||
li.onclick = () => {
|
||||
let elem = document.createElement("selectorfragment")
|
||||
elem.onclick = () => {
|
||||
this.updateMenu(document.getElementById(`menu0-${e.name}`).innerText, "next")
|
||||
}
|
||||
|
||||
let name = document.createElement("a")
|
||||
name.innerText = e.name
|
||||
name.id = `menu0-${e.name}`
|
||||
name.className = "selector-list-names"
|
||||
this.zone.appendChild(elem)
|
||||
|
||||
let count = document.createElement("span")
|
||||
count.innerText = e.count
|
||||
count.className = "selector-list-counts"
|
||||
|
||||
li.appendChild(name)
|
||||
li.appendChild(count)
|
||||
|
||||
this.zone.appendChild(li)
|
||||
riot.mount(elem, {
|
||||
name: e.name,
|
||||
count: e.count,
|
||||
idd: `menu0-${e.name}`
|
||||
}, "selectorfragment")
|
||||
})
|
||||
}
|
||||
|
||||
@ -59,7 +53,14 @@ export default class View {
|
||||
* @param { string[] } path Chemin courant.
|
||||
* */
|
||||
renderPath(path) {
|
||||
this.path.innerText = `${path[0]} / ${path[1]} / ${path[2]}`
|
||||
this.path.innerHTML = ""
|
||||
let elem = document.createElement("locfragment")
|
||||
this.path.appendChild(elem)
|
||||
|
||||
riot.mount(elem, {
|
||||
msg: path.filter(Boolean).join(" ► ")
|
||||
}, "locfragment")
|
||||
|
||||
log("Loc->View", `Chemin change ${path}`)
|
||||
}
|
||||
|
||||
@ -69,13 +70,13 @@ export default class View {
|
||||
* */
|
||||
renderEtab(data) {
|
||||
this.etab.innerHTML =
|
||||
"<tr>" +
|
||||
"<tbody>" +
|
||||
" <th>Nom</th>" +
|
||||
" <th>Ville</th>" +
|
||||
" <th>Dept</th>" +
|
||||
" <th>Departement</th>" +
|
||||
" <th>Moyenne</th>" +
|
||||
" <th>Selectivite</th>" +
|
||||
"</tr>"
|
||||
"</tbody>"
|
||||
|
||||
data.forEach((e) => {
|
||||
let etab = e.fields.g_ea_lib_vx
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<etablanalytics>
|
||||
<style>
|
||||
etablanalytics {
|
||||
#etablanalytics {
|
||||
width: 65vw;
|
||||
height: 28vh;
|
||||
max-height: 28vh;
|
||||
@ -8,8 +8,8 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
etablanalytics
|
||||
#etab {
|
||||
#etablanalytics
|
||||
#etablanalytics-list {
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
@ -17,8 +17,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
etablanalytics
|
||||
#etab
|
||||
#etablanalytics
|
||||
#etablanalytics-list
|
||||
tr
|
||||
th {
|
||||
background: #344D59;
|
||||
@ -28,8 +28,8 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
etablanalytics
|
||||
#etab
|
||||
#etablanalytics
|
||||
#etablanalytics-list
|
||||
tr
|
||||
td {
|
||||
text-align: center;
|
||||
@ -38,12 +38,12 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<table id="etab">
|
||||
<div id="etablanalytics">
|
||||
<table id="etablanalytics-list">
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Ville</th>
|
||||
<th>Dept</th>
|
||||
<th>Departement</th>
|
||||
<th>Moyenne</th>
|
||||
<th>Selectivite</th>
|
||||
</tr>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<style>
|
||||
#generalytics {
|
||||
width: 65vw;
|
||||
max-width: 65vw;
|
||||
height: 55vh;
|
||||
max-height: 57vh;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<loc>
|
||||
<style>
|
||||
loc {
|
||||
#loc {
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
max-height: 3vw;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
loc
|
||||
#location {
|
||||
padding: 8px;
|
||||
background: #344D59;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span id="location"> </span>
|
||||
<div id="loc"></div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["msg"]
|
||||
}
|
||||
</script>
|
||||
</loc>
|
||||
18
src/components/global/loc/locfragment.riot
Normal file
18
src/components/global/loc/locfragment.riot
Normal file
@ -0,0 +1,18 @@
|
||||
<locfragment>
|
||||
<style>
|
||||
#locfragment {
|
||||
padding: 8px;
|
||||
background: #344D59;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span id="locfragment">{ this.props.msg }</span>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["msg"]
|
||||
}
|
||||
</script>
|
||||
</locfragment>
|
||||
@ -53,58 +53,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list-zone
|
||||
.selector-list-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list-zone
|
||||
.selector-list-inner
|
||||
.selector-list-names {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
justify-self: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list-zone
|
||||
.selector-list-inner
|
||||
.selector-list-names:hover {
|
||||
background: #344D59;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#selector
|
||||
#selector-list-container
|
||||
#selector-list-zone
|
||||
.selector-list-inner
|
||||
.selector-list-counts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: green;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
width: 4vw;
|
||||
height: 2vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="selector">
|
||||
@ -118,8 +66,7 @@
|
||||
</div>
|
||||
|
||||
<div id="selector-list-container">
|
||||
<ul id="selector-list-zone">
|
||||
</ul>
|
||||
<ul id="selector-list-zone"> </ul>
|
||||
</div>
|
||||
</div>
|
||||
</selector>
|
||||
53
src/components/global/selector/selectorfragment.riot
Normal file
53
src/components/global/selector/selectorfragment.riot
Normal file
@ -0,0 +1,53 @@
|
||||
<selectorfragment>
|
||||
<style>
|
||||
#selectorfragment-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#selectorfragment-container
|
||||
.selectorfragment-name {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
justify-self: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#selectorfragment-container
|
||||
.selectorfragment-name:hover {
|
||||
background: #344D59;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#selectorfragment-container
|
||||
#selectorfragment-count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background: green;
|
||||
padding: 0.5vw;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li id="selectorfragment-container">
|
||||
<a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a>
|
||||
<span id="selectorfragment-count">{ this.props.count }</span>
|
||||
</li>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["name", "count", "idd"]
|
||||
}
|
||||
</script>
|
||||
</selectorfragment>
|
||||
@ -1,25 +1,25 @@
|
||||
<home>
|
||||
<style>
|
||||
#main-container {
|
||||
#home {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#main-container
|
||||
#home
|
||||
#right, #left generalytics, #left etablanalytics, #left loc {
|
||||
box-shadow: 0px 0px 9px 1px black;
|
||||
background: #7A90A4;
|
||||
}
|
||||
|
||||
#main-container
|
||||
#home
|
||||
#right {
|
||||
align-self: flex-start;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
|
||||
#main-container
|
||||
#home
|
||||
#left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -27,7 +27,7 @@
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#main-container
|
||||
#home
|
||||
#left
|
||||
generalytics {
|
||||
margin-bottom: 1.3vw;
|
||||
@ -35,23 +35,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import * as riot from "riot";
|
||||
import start from "../components/global/api/api.js"
|
||||
|
||||
export default {
|
||||
onMounted() {
|
||||
start()
|
||||
}
|
||||
}
|
||||
|
||||
riot.mount("selector", document.getElementById("right"))
|
||||
riot.mount("loc", document.getElementById("left"))
|
||||
riot.mount("generalytics", document.getElementById("left"))
|
||||
riot.mount("etablanalytics", document.getElementById("left"))
|
||||
</script>
|
||||
|
||||
<div id="main-container">
|
||||
<div id="home">
|
||||
<div id="right">
|
||||
<selector />
|
||||
</div>
|
||||
@ -62,4 +46,15 @@
|
||||
<etablanalytics />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import * as riot from "riot";
|
||||
import start from "../components/global/api/api.js"
|
||||
|
||||
export default {
|
||||
onMounted() {
|
||||
start()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</home>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user