This commit is contained in:
pro.boooooo 2023-03-22 00:30:13 +01:00
parent a6321f54f5
commit 704825fac6
7 changed files with 283 additions and 109 deletions

View File

@ -88,6 +88,8 @@ export default class Controller {
this.view.renderStat(await data) this.view.renderStat(await data)
this.view.renderEtab(await data, `${ this.model.getPath()[1] } - ${ this.model.getPath()[2] }`) this.view.renderEtab(await data, `${ this.model.getPath()[1] } - ${ this.model.getPath()[2] }`)
this.view.renderPath(this.model.getPath()) this.view.renderPath(this.model.getPath())
this.model.getMapLink().then((res) => this.view.renderMap(res))
} else { } else {
log("Selector->Controller", "Numero de page inconnue") log("Selector->Controller", "Numero de page inconnue")
} }

View File

@ -2,9 +2,12 @@ import log from "./log"
export default class Model { export default class Model {
constructor() { constructor() {
localStorage.clear()
this.state = { this.state = {
api: { api: {
link: "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri", link: "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri",
maplink: "https://data.enseignementsup-recherche.gouv.fr/explore/embed/dataset/fr-esr-parcoursup/map/?timezone=Europe%2FBerlin&sort=tri",
facet: { facet: {
filiaire: "fili", filiaire: "fili",
formation: "form_lib_voe_acc", formation: "form_lib_voe_acc",
@ -122,6 +125,10 @@ export default class Model {
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
if(data) { if(data) {
data.facet_groups[0].facets.forEach((e) => {
e.canDisplay = true
})
localStorage.setItem(`sec0`, JSON.stringify(data.facet_groups[0].facets)) localStorage.setItem(`sec0`, JSON.stringify(data.facet_groups[0].facets))
return data.facet_groups[0].facets return data.facet_groups[0].facets
} else { } else {
@ -151,6 +158,10 @@ export default class Model {
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
if(data) { if(data) {
data.facet_groups[1].facets.forEach((e) => {
e.canDisplay = true
})
localStorage.setItem(`sec1-${this.state.page.cat}`, JSON.stringify(data.facet_groups[1].facets)) localStorage.setItem(`sec1-${this.state.page.cat}`, JSON.stringify(data.facet_groups[1].facets))
return data.facet_groups[1].facets return data.facet_groups[1].facets
} else { } else {
@ -171,18 +182,33 @@ export default class Model {
* */ * */
getModelData2() { getModelData2() {
if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) { if(!localStorage.getItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`)) {
const link = `${this.state.api.link}&rows=0` + let link = `${this.state.api.link}&rows=0` +
`&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` +
`&facet=${encodeURIComponent(this.state.api.facet.formation)}` + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` +
`&facet=${encodeURIComponent(this.state.api.facet.spec)}` + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` +
`&refine.${encodeURIComponent(this.state.api.facet.filiaire)}=${encodeURIComponent(this.state.page.cat)}` + `&refine.${encodeURIComponent(this.state.api.facet.filiaire)}=${encodeURIComponent(this.state.page.cat)}` +
`&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` `&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}`
/**
* TODO: (Bilal prends la responsabilite de ce massacre)
* */
if(this.state.page.scat === "Formations des écoles d'ingénieurs") {
link = `${this.state.api.link}&rows=0` +
`&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` +
`&facet=${encodeURIComponent(this.state.api.facet.formation)}` +
`&facet=${encodeURIComponent(this.state.api.facet.spec)}` +
`&refine.fili=Ecole%20d%27Ingénieur&refine.form_lib_voe_acc=Formations%20%20des%20écoles%20d%27ingénieurs`
}
return fetch(link) return fetch(link)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
try { try {
if(data) { if(data) {
data.facet_groups[2].facets.forEach((e) => {
e.canDisplay = true
})
localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets)) localStorage.setItem(`sec2-${this.state.page.cat}-${this.state.page.scat}`, JSON.stringify(data.facet_groups[2].facets))
return data.facet_groups[2].facets return data.facet_groups[2].facets
} }
@ -204,7 +230,7 @@ export default class Model {
if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) || if(!localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) ||
localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) === "[]" localStorage.getItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`) === "[]"
) { ) {
const link = `${this.state.api.link}&rows=10000` + let link = `${this.state.api.link}&rows=10000` +
`&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` + `&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` +
`&facet=${encodeURIComponent(this.state.api.facet.formation)}` + `&facet=${encodeURIComponent(this.state.api.facet.formation)}` +
`&facet=${encodeURIComponent(this.state.api.facet.spec)}` + `&facet=${encodeURIComponent(this.state.api.facet.spec)}` +
@ -212,6 +238,15 @@ export default class Model {
`&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` + `&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` +
`&refine.${encodeURIComponent(this.state.api.facet.spec)}=${encodeURIComponent(this.state.page.tcat)}` `&refine.${encodeURIComponent(this.state.api.facet.spec)}=${encodeURIComponent(this.state.page.tcat)}`
/**
* TODO: (Bilal prends la responsabilite de ce massacre)
* */
if(this.state.page.tcat === "Formation d'ingénieur Bac + 5") {
link = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri&rows=10000&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=Ecole%20d%27Ing%C3%A9nieur&refine.form_lib_voe_acc=Formations%20%20des%20%C3%A9coles%20d%27ing%C3%A9nieurs&refine.fil_lib_voe_acc=Formation%20d%27ing%C3%A9nieur%20Bac%20%2B%205`
} else if(this.state.page.tcat === "Formation Bac + 3") {
link = `https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&lang=fr&sort=tri&rows=10000&facet=fili&facet=form_lib_voe_acc&facet=fil_lib_voe_acc&refine.fili=Ecole%20d%27Ing%C3%A9nieur&refine.form_lib_voe_acc=Formations%20%20des%20%C3%A9coles%20d%27ing%C3%A9nieurs&refine.fil_lib_voe_acc=Formation%20Bac%20%2B%203`
}
return fetch(link) return fetch(link)
.then((res) => { .then((res) => {
return res.json() return res.json()
@ -219,11 +254,14 @@ export default class Model {
.then((data) => { .then((data) => {
try { try {
if(data) { if(data) {
data.records.forEach((e) => {
e.canDisplay = true
})
if(this.state.page.tcat) { if(this.state.page.tcat) {
localStorage.setItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`, JSON.stringify(data.records)) localStorage.setItem(`sec-etab-${this.state.page.cat}-${this.state.page.scat}-${this.state.page.tcat}`, JSON.stringify(data.records))
} }
this.state.page.tcat = null
return data.records return data.records
} }
} catch(donothing) {} } catch(donothing) {}
@ -237,4 +275,23 @@ export default class Model {
console.error(e) console.error(e)
} }
} }
/**
* Recuperer le lien vers la map
* @return { promise } Le lien de la map
* */
getMapLink() {
const link = `${this.state.api.maplink}` +
`&facet=${encodeURIComponent(this.state.api.facet.filiaire)}` +
`&facet=${encodeURIComponent(this.state.api.facet.formation)}` +
`&facet=${encodeURIComponent(this.state.api.facet.spec)}` +
`&refine.${encodeURIComponent(this.state.api.facet.filiaire)}=${encodeURIComponent(this.state.page.cat)}` +
`&refine.${encodeURIComponent(this.state.api.facet.formation)}=${encodeURIComponent(this.state.page.scat)}` +
`&refine.${encodeURIComponent(this.state.api.facet.spec)}=${encodeURIComponent(this.state.page.tcat)}` +
`&location=6,48.04137,1.74683&basemap=e69ab1`
return new Promise((resolve, reject) => {
resolve(link)
})
}
} }

View File

@ -12,10 +12,23 @@ export default class View {
this.home = document.getElementById("home") this.home = document.getElementById("home")
this.left = document.getElementById("left") this.left = document.getElementById("left")
this.right = document.getElementById("right") this.right = document.getElementById("right")
this.input = document.getElementById("selector-list-input-search")
this.inputEtab = document.getElementById("etablanalytics-search")
this.map = document.getElementById("etablanalytics-map-container")
this.titleStorage = null
this.dataStorage = null
this.antispam = null this.antispam = null
this.inAction = false this.inAction = false
this.input.addEventListener("input", (e) => {
this.filterMenu(e.target.value)
})
this.inputEtab.addEventListener("input", (e) => {
this.filterEtab(e.target.value)
})
this.btn.onclick = () => { this.btn.onclick = () => {
this.updateMenu(" ", "previous") this.updateMenu(" ", "previous")
} }
@ -23,6 +36,29 @@ export default class View {
log("Selector", "View 1/3") log("Selector", "View 1/3")
} }
/**
* Utile pour filtrer le tableau de resultat qui concerne le menu
* @param { string } filter La saisie dans le input
* */
filterMenu(filter) {
this.dataStorage.forEach((e) => {
e.canDisplay = e.name.toLowerCase().includes(filter.toLowerCase());
})
this.renderMenu(this.titleStorage, this.dataStorage)
}
/**
* Utile pour filtrer le tableau de resultat qui concerne les etablissements
* */
filterEtab(filter) {
this.dataStorage.forEach((e) => {
e.canDisplay = e.fields.g_ea_lib_vx.toLowerCase().includes(filter.toLowerCase());
})
this.renderEtab(this.dataStorage, this.formStorage)
}
/** /**
* Contruction de la balise <li> qui vas se loger dans le menu. * Contruction de la balise <li> qui vas se loger dans le menu.
* Si l'utilisateur spam clique, ca annule l'action (ce qui peut empecher les crashs) * Si l'utilisateur spam clique, ca annule l'action (ce qui peut empecher les crashs)
@ -33,9 +69,13 @@ export default class View {
this.title.innerText = title this.title.innerText = title
this.zone.innerHTML = "" this.zone.innerHTML = ""
this.dataStorage = data
this.titleStorage = title
if(title || data) { if(title || data) {
data.forEach((e) => { data.forEach((e) => {
let elem = document.createElement("selectorfragment") let elem = document.createElement("selectorfragment")
elem.onclick = () => { elem.onclick = () => {
if(this.antispam === null) { if(this.antispam === null) {
this.antispam = setTimeout(() => { this.antispam = setTimeout(() => {
@ -52,7 +92,8 @@ export default class View {
riot.mount(elem, { riot.mount(elem, {
name: e.name, name: e.name,
count: e.count, count: e.count,
idd: `menu0-${e.name}` idd: `menu0-${e.name}`,
display: e.canDisplay
}, "selectorfragment") }, "selectorfragment")
this.zone.appendChild(elem) this.zone.appendChild(elem)
@ -87,6 +128,9 @@ export default class View {
* @param { string } form * @param { string } form
* */ * */
renderEtab(data, form) { renderEtab(data, form) {
this.formStorage = form
this.dataStorage = data
this.etab.innerHTML = this.etab.innerHTML =
"<tbody>" + "<tbody>" +
" <th>Nom</th>" + " <th>Nom</th>" +
@ -97,123 +141,141 @@ export default class View {
"</tbody>" "</tbody>"
data.forEach((e) => { data.forEach((e) => {
let etab = e.fields.g_ea_lib_vx if(e.canDisplay) {
let dept = `${e.fields.dep_lib} (${e.fields.dep})` let etab = e.fields.g_ea_lib_vx
let city = e.fields.ville_etab let dept = `${e.fields.dep_lib} (${e.fields.dep})`
let moy = "?" let city = e.fields.ville_etab
let selection = e.fields.taux_acces_ens let moy = "?"
let acad = e.fields.acad_mies let selection = e.fields.taux_acces_ens
let type = e.fields.contrat_etab let acad = e.fields.acad_mies
let capacity = e.fields.capa_fin let type = e.fields.contrat_etab
let admishorsacad = e.fields.pct_aca_orig let capacity = e.fields.capa_fin
let voeuxtotal = e.fields.voe_tot let admishorsacad = e.fields.pct_aca_orig
let voeuxtotal = e.fields.voe_tot
let woman = `${ Math.round(100 * e.fields.acc_tot_f / e.fields.acc_tot) }%` let woman = `${ Math.round(100 * e.fields.acc_tot_f / e.fields.acc_tot) }%`
let man = `${ Math.round(100 * (e.fields.acc_tot - e.fields.acc_tot_f) / e.fields.acc_tot) }%` let man = `${ Math.round(100 * (e.fields.acc_tot - e.fields.acc_tot_f) / e.fields.acc_tot) }%`
let totbac = Math.round(e.fields.acc_bg + e.fields.acc_bp + e.fields.acc_bt + e.fields.acc_at) let totbac = Math.round(e.fields.acc_bg + e.fields.acc_bp + e.fields.acc_bt + e.fields.acc_at)
let gen = `${ Math.round(100 * e.fields.acc_bg / totbac) }%` let gen = `${ Math.round(100 * e.fields.acc_bg / totbac) }%`
let pro = `${ Math.round(100 * e.fields.acc_bp / totbac) }%` let pro = `${ Math.round(100 * e.fields.acc_bp / totbac) }%`
let tech = `${ Math.round(100 * e.fields.acc_bt / totbac) }%` let tech = `${ Math.round(100 * e.fields.acc_bt / totbac) }%`
let autre = `${ Math.round(100 * e.fields.acc_at / totbac) }%` let autre = `${ Math.round(100 * e.fields.acc_at / totbac) }%`
let tot = e.fields.acc_sansmention + e.fields.acc_ab + e.fields.acc_b + e.fields.acc_tb + e.fields.acc_tbf let tot = e.fields.acc_sansmention + e.fields.acc_ab + e.fields.acc_b + e.fields.acc_tb + e.fields.acc_tbf
let p = `${ Math.round(100 * e.fields.acc_sansmention / tot) }%` let p = `${ Math.round(100 * e.fields.acc_sansmention / tot) }%`
let ab = `${ Math.round(100 * e.fields.acc_ab / tot) }%` let ab = `${ Math.round(100 * e.fields.acc_ab / tot) }%`
let b = `${ Math.round(100 * e.fields.acc_b / tot) }%` let b = `${ Math.round(100 * e.fields.acc_b / tot) }%`
let tb = `${ Math.round(100 * e.fields.acc_tb / tot) }%` let tb = `${ Math.round(100 * e.fields.acc_tb / tot) }%`
let tbf = `${ Math.round(100 * e.fields.acc_tbf / tot) }%` let tbf = `${ Math.round(100 * e.fields.acc_tbf / tot) }%`
/** /**
* TODO: Transformer ca en composant riot (GALERE MAX pour faire des <tr><etablanalyticsfragment/></tr>) * TODO: Transformer ca en composant riot (GALERE MAX pour faire des <tr><etablanalyticsfragment/></tr>)
* */ * */
let tr = document.createElement("tr") let tr = document.createElement("tr")
let td1 = document.createElement("td") let td1 = document.createElement("td")
td1.innerText = etab td1.innerText = etab
let td2 = document.createElement("td") let td2 = document.createElement("td")
td2.innerText = city td2.innerText = city
let td3 = document.createElement("td") let td3 = document.createElement("td")
td3.innerText = dept td3.innerText = dept
let td4 = document.createElement("td") let td4 = document.createElement("td")
td4.innerText = moy td4.innerText = moy
let td5 = document.createElement("td") let td5 = document.createElement("td")
td5.innerText = `(${selection}%)` td5.innerText = `(${selection}%)`
td5.style.display = "flex" td5.style.display = "flex"
td5.style.gap = "1vw" td5.style.gap = "1vw"
let progresstd5 = document.createElement("progress") let progresstd5 = document.createElement("progress")
progresstd5.setAttribute("max", "100") progresstd5.setAttribute("max", "100")
progresstd5.setAttribute("value", `${selection}`) progresstd5.setAttribute("value", `${selection}`)
td5.appendChild(progresstd5) td5.appendChild(progresstd5)
tr.appendChild(td1) tr.appendChild(td1)
tr.appendChild(td2) tr.appendChild(td2)
tr.appendChild(td3) tr.appendChild(td3)
tr.appendChild(td4) tr.appendChild(td4)
tr.appendChild(td5) tr.appendChild(td5)
tr.onclick = () => { tr.onclick = () => {
this.left.style.filter = "blur(15px)" this.left.style.filter = "blur(15px)"
this.right.style.filter = "blur(15px)" this.right.style.filter = "blur(15px)"
let modal = document.createElement("modal") let modal = document.createElement("modal")
const close = () => { const close = () => {
riot.unmount(modal, false) riot.unmount(modal, false)
this.left.style.filter = "none" this.left.style.filter = "none"
this.right.style.filter = "none" this.right.style.filter = "none"
}
riot.mount(modal, {
close : close,
etabname: etab,
formation: form,
city: city,
acad: acad,
type: type,
capacity: capacity,
wish: voeuxtotal,
nhacad: Math.round(100 - admishorsacad),
manPercent: man,
womanPercent: woman,
hstyle: `width: ${parseInt(man.split("%")[0]) > 10 ? man : `23%`};`,
fstyle: `width: ${parseInt(woman.split("%")[0]) > 10 ? woman : `23%`};`,
nbacgen: gen,
genstyle: `width: ${parseInt(gen.split("%")[0]) > 10 ? gen : `23%`};`,
nbacpro: pro,
prostyle: `width: ${parseInt(pro.split("%")[0]) > 10 ? pro : `23%`};`,
nbactech: tech,
techstyle: `width: ${parseInt(tech.split("%")[0]) > 10 ? tech : `23%`};`,
nbacautre: autre,
autrestyle: `width: ${parseInt(autre.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionp: p,
pstyle: `width: ${parseInt(p.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionab: ab,
abstyle: `width: ${parseInt(ab.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionb: b,
bstyle: `width: ${parseInt(b.split("%")[0]) > 10 ? autre : `23%`};`,
nmentiontb: tb,
tbstyle: `width: ${parseInt(tb.split("%")[0]) > 10 ? autre : `23%`};`,
nmentiontbf: tbf,
tbfstyle: `width: ${parseInt(tbf.split("%")[0]) > 10 ? autre : `23%`};`
}, "modal")
this.home.appendChild(modal)
} }
riot.mount(modal, { this.etab.appendChild(tr)
close : close,
etabname: etab,
formation: form,
city: city,
acad: acad,
type: type,
capacity: capacity,
wish: voeuxtotal,
nhacad: Math.round(100 - admishorsacad),
manPercent: man,
womanPercent: woman,
hstyle: `width: ${parseInt(man.split("%")[0]) > 10 ? man : `23%`};`,
fstyle: `width: ${parseInt(woman.split("%")[0]) > 10 ? woman : `23%`};`,
nbacgen: gen,
genstyle: `width: ${parseInt(gen.split("%")[0]) > 10 ? gen : `23%`};`,
nbacpro: pro,
prostyle: `width: ${parseInt(pro.split("%")[0]) > 10 ? pro : `23%`};`,
nbactech: tech,
techstyle: `width: ${parseInt(tech.split("%")[0]) > 10 ? tech : `23%`};`,
nbacautre: autre,
autrestyle: `width: ${parseInt(autre.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionp: p,
pstyle: `width: ${parseInt(p.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionab: ab,
abstyle: `width: ${parseInt(ab.split("%")[0]) > 10 ? autre : `23%`};`,
nmentionb: b,
bstyle: `width: ${parseInt(b.split("%")[0]) > 10 ? autre : `23%`};`,
nmentiontb: tb,
tbstyle: `width: ${parseInt(tb.split("%")[0]) > 10 ? autre : `23%`};`,
nmentiontbf: tbf,
tbfstyle: `width: ${parseInt(tbf.split("%")[0]) > 10 ? autre : `23%`};`
}, "modal")
this.home.appendChild(modal)
} }
this.etab.appendChild(tr)
}) })
} }
/**
* Envoyer dans l'encadrer avec les etablissements la map tout en haut
* */
renderMap(link) {
this.map.innerHTML = ""
const nmap = document.createElement("map")
console.log(link)
riot.mount(nmap, {
link: link
}, "map")
this.map.appendChild(nmap)
}
/** /**
* Envoyer dans l'encadrer avec les stats les graphiques * Envoyer dans l'encadrer avec les stats les graphiques
* @param { array[json] } data Les donnees pour calcule * @param { array[json] } data Les donnees pour calcule
@ -398,6 +460,8 @@ export default class View {
* */ * */
updateMenu(selection, direction) { updateMenu(selection, direction) {
if(direction) { if(direction) {
this.inputEtab.value = ""
this.input.value = ""
window.updateModel(selection, direction) window.updateModel(selection, direction)
} else { } else {
log("Selector->View", "Mince, le menu ne veut pas se remplir :(") log("Selector->View", "Mince, le menu ne veut pas se remplir :(")

View File

@ -2,10 +2,11 @@
<style> <style>
#etablanalytics { #etablanalytics {
width: 65vw; width: 65vw;
height: 28vh; height: 50vh;
max-height: 28vh; max-height: 50vh;
font-weight: bold; font-weight: bold;
overflow: auto; overflow: auto;
margin-bottom: 2vw;
} }
#etablanalytics #etablanalytics
@ -39,9 +40,32 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#etablanalytics
#etablanalytics-search-container {
background: #344D59;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.3vw;
}
#etablanalytics
#etablanalytics-search-container
#etablanalytics-search {
width: 30%;
background: white;
}
</style> </style>
<div id="etablanalytics"> <div id="etablanalytics">
<div id="etablanalytics-map-container"></div>
<div id="etablanalytics-search-container">
<input type="text" id="etablanalytics-search" />
</div>
<table id="etablanalytics-list"> <table id="etablanalytics-list">
<tr> <tr>
<th>Nom</th> <th>Nom</th>

View File

@ -1,8 +1,26 @@
<map> <map>
<style> <style>
span { #map-container {
color: green; padding: 1vw;
background: #344D59;
display: flex;
justify-content: center;
}
#map-container
#map-map {
width: 100%;
height: 25vw;
} }
</style> </style>
<span>tg</span>
<div id="map-container">
<iframe id="map-map" src={this.props.link}></iframe>
</div>
<script>
export default {
props: ["link"]
}
</script>
</map> </map>

View File

@ -20,6 +20,12 @@
gap: 3%; gap: 3%;
} }
#selector
#selector-list-container
#selector-list-input-search {
background: white;
}
#selector #selector
#selector-top-container #selector-top-container
#selector-top-btn { #selector-top-btn {
@ -57,7 +63,7 @@
<div id="selector"> <div id="selector">
<div id="selector-top-container"> <div id="selector-top-container">
<span id="selector-top-title"> </span> <span id="selector-top-title"> </span>
<button <button
id="selector-top-btn"> id="selector-top-btn">
@ -66,6 +72,8 @@
</div> </div>
<div id="selector-list-container"> <div id="selector-list-container">
<input type="text" id="selector-list-input-search" />
<ul id="selector-list-zone"> </ul> <ul id="selector-list-zone"> </ul>
</div> </div>
</div> </div>

View File

@ -44,7 +44,7 @@
} }
</style> </style>
<li id="selectorfragment-container"> <li id="selectorfragment-container" if={ this.props.display } >
<a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a> <a id={ this.props.idd } class="selectorfragment-name">{ this.props.name }</a>
<span id="selectorfragment-count">{ this.props.count }</span> <span id="selectorfragment-count">{ this.props.count }</span>
</li> </li>
@ -54,7 +54,8 @@
props: [ props: [
"name", "name",
"count", "count",
"idd" "idd",
"display"
] ]
} }
</script> </script>