diff --git a/webcomponents/reglementen-lijst/main.js b/webcomponents/reglementen-lijst/main.js index c892dc1..129efaa 100644 --- a/webcomponents/reglementen-lijst/main.js +++ b/webcomponents/reglementen-lijst/main.js @@ -1,28 +1,43 @@ class ReglementenLijst extends HTMLElement { - static types = { - "https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b":"Aanvullend reglement op het wegverkeer m.b.t. gemeentewegen in speciale beschermingszones", - "https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9":"Tijdelijke politieverordening (op het wegverkeer)", - "https://data.vlaanderen.be/id/concept/BesluitType/25deb453-ae3e-4d40-8027-36cdb48ab738":"Deontologische Code", - "https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3":"Aanvullend reglement op het wegverkeer m.b.t. gemeentewegen in havengebied", - "https://data.vlaanderen.be/id/concept/BesluitType/4673d472-8dbc-4cea-b3ab-f92df3807eb3":"Personeelsreglement", - "https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34":"Aanvullend reglement op het wegverkeer enkel m.b.t. gemeentewegen (niet in havengebied of speciale beschermingszones)", - "https://data.vlaanderen.be/id/concept/BesluitType/5ee63f84-2fa0-4758-8820-99dca2bdce7c":"Delegatiereglement", - "https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b":"Aanvullend reglement op het wegverkeer m.b.t. één of meerdere gewestwegen", - "https://data.vlaanderen.be/id/concept/BesluitType/84121221-4217-40e3-ada2-cd1379b168e1":"Andere", - "https://data.vlaanderen.be/id/concept/BesluitType/a8486fa3-6375-494d-aa48-e34289b87d5b":"Huishoudelijk reglement", - "https://data.vlaanderen.be/id/concept/BesluitType/ba5922c9-cfad-4b2e-b203-36479219ba56":"Retributiereglement", - "https://data.vlaanderen.be/id/concept/BesluitType/d7060f97-c417-474c-abc6-ef006cb61f41":"Subsidie, premie, erkenning", - "https://data.vlaanderen.be/id/concept/BesluitType/e8aee49e-8762-4db2-acfe-2d5dd3c37619":"Reglement Onderwijs", - "https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241":"Politiereglement", - "https://data.vlaanderen.be/id/concept/BesluitType/efa4ec5a-b006-453f-985f-f986ebae11bc":"Belastingreglement", - "https://data.vlaanderen.be/id/concept/BesluitType/fb92601a-d189-4482-9922-ab0efc6bc935":"Gebruikersreglement" + "https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b": + "Aanvullend reglement op het wegverkeer m.b.t. gemeentewegen in speciale beschermingszones", + "https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9": + "Tijdelijke politieverordening (op het wegverkeer)", + "https://data.vlaanderen.be/id/concept/BesluitType/25deb453-ae3e-4d40-8027-36cdb48ab738": + "Deontologische Code", + "https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3": + "Aanvullend reglement op het wegverkeer m.b.t. gemeentewegen in havengebied", + "https://data.vlaanderen.be/id/concept/BesluitType/4673d472-8dbc-4cea-b3ab-f92df3807eb3": + "Personeelsreglement", + "https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34": + "Aanvullend reglement op het wegverkeer enkel m.b.t. gemeentewegen (niet in havengebied of speciale beschermingszones)", + "https://data.vlaanderen.be/id/concept/BesluitType/5ee63f84-2fa0-4758-8820-99dca2bdce7c": + "Delegatiereglement", + "https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b": + "Aanvullend reglement op het wegverkeer m.b.t. één of meerdere gewestwegen", + "https://data.vlaanderen.be/id/concept/BesluitType/84121221-4217-40e3-ada2-cd1379b168e1": + "Andere", + "https://data.vlaanderen.be/id/concept/BesluitType/a8486fa3-6375-494d-aa48-e34289b87d5b": + "Huishoudelijk reglement", + "https://data.vlaanderen.be/id/concept/BesluitType/ba5922c9-cfad-4b2e-b203-36479219ba56": + "Retributiereglement", + "https://data.vlaanderen.be/id/concept/BesluitType/d7060f97-c417-474c-abc6-ef006cb61f41": + "Subsidie, premie, erkenning", + "https://data.vlaanderen.be/id/concept/BesluitType/e8aee49e-8762-4db2-acfe-2d5dd3c37619": + "Reglement Onderwijs", + "https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241": + "Politiereglement", + "https://data.vlaanderen.be/id/concept/BesluitType/efa4ec5a-b006-453f-985f-f986ebae11bc": + "Belastingreglement", + "https://data.vlaanderen.be/id/concept/BesluitType/fb92601a-d189-4482-9922-ab0efc6bc935": + "Gebruikersreglement", }; constructor() { super(); - this.amount = parseInt(this.getAttribute('aantal')) || 10; - this.pager = this.getAttribute('pager') !== null; + this.amount = parseInt(this.getAttribute("aantal")) || 10; + this.pager = this.getAttribute("pager") !== null; this.offset = 0; this.maxCount = 1000; } @@ -39,38 +54,38 @@ class ReglementenLijst extends HTMLElement { datum="${reglement.publicatie_datum.value}" url="${reglement.url.value}" type="${ReglementenLijst.types[reglement.type.value]}" - status="${besluit.status?.value || ''}" + status="${reglement.status?.value || ''}" > `; } renderResults(reglementen) { - if (!this.shadowRoot) { // Only attach a shadow root if one does not exist + if (!this.shadowRoot) { + // Only attach a shadow root if one does not exist const template = this.getTemplate(); - this.attachShadow({mode: 'open'}).appendChild( - template.cloneNode(true) - ); + this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true)); } let list = ""; - reglementen.forEach(reglement => { - list += this.createDetail(reglement) + reglementen.forEach((reglement) => { + list += this.createDetail(reglement); }); - this.shadowRoot.querySelectorAll(".js-reglementen-items")[0].innerHTML = list; + this.shadowRoot.querySelectorAll(".js-reglementen-items")[0].innerHTML = + list; if (this.pager) { this.shadowRoot.querySelectorAll(".pager")[0].innerHTML = this.getPager(); - this.nextButton = this.shadowRoot.querySelector('#js-pager-next'); + this.nextButton = this.shadowRoot.querySelector("#js-pager-next"); if (this.nextButton) { - this.nextButton.addEventListener('click', (event) => { + this.nextButton.addEventListener("click", (event) => { event.preventDefault(); this.pageUp(); }); } - this.previousButton = this.shadowRoot.querySelector('#js-pager-previous'); + this.previousButton = this.shadowRoot.querySelector("#js-pager-previous"); if (this.previousButton) { - this.previousButton.addEventListener('click', (event) => { + this.previousButton.addEventListener("click", (event) => { event.preventDefault(); this.pageDown(); }); @@ -79,14 +94,16 @@ class ReglementenLijst extends HTMLElement { } async executeQuery(query) { - const endpoint = this.getAttribute('sparql-endpoint') + "?query=" + encodeURIComponent(query); - const response = await fetch(endpoint, - { - headers: { - 'Content-Type': 'application/x-www-form-urlencoded', - 'Accept': 'application/sparql-results+json' - } - }); + const endpoint = + this.getAttribute("sparql-endpoint") + + "?query=" + + encodeURIComponent(query); + const response = await fetch(endpoint, { + headers: { + "Content-Type": "application/x-www-form-urlencoded", + Accept: "application/sparql-results+json", + }, + }); if (response.ok) { const json = await response.json(); @@ -101,7 +118,7 @@ class ReglementenLijst extends HTMLElement { let query = this.constructQuery(); if (this.pager) { let count = await this.executeQuery(this.countQuery); - this.maxCount = count.results.bindings[0]['count'].value; + this.maxCount = count.results.bindings[0]["count"].value; console.log(this.maxCount); } @@ -115,38 +132,51 @@ class ReglementenLijst extends HTMLElement { let filterparams = ""; // Status filter. - const statussen = this.getAttribute('statussen'); + const statussen = this.getAttribute("statussen"); if (statussen) { const statussenArray = statussen.split(","); - filterparams += "VALUES ?status { " + statussenArray.map(status => `"${status.trim()}"@nl`).join(" ") + " }" + filterparams += + "VALUES ?status { " + + statussenArray.map((status) => `"${status.trim()}"@nl`).join(" ") + + " }"; } else { filterparams += `BIND(COALESCE(?status, "Ontwerp") AS ?status)`; } console.log(statussen); // Type filter. - const types = this.getAttribute('types'); + const types = this.getAttribute("types"); if (types) { const typesArray = types.split(" "); - filterparams += "VALUES ?type { " + typesArray.map(type => `<${type.trim()}>`).join(" ") + " }" + filterparams += + "VALUES ?type { " + + typesArray.map((type) => `<${type.trim()}>`).join(" ") + + " }"; } else { - filterparams += `VALUES ?type { ${Object.keys(ReglementenLijst.types).map((type) => `<${type}>`).join(" ")} }`; + filterparams += `VALUES ?type { ${Object.keys(ReglementenLijst.types) + .map((type) => `<${type}>`) + .join(" ")} }`; } // Taxonomy filter. - let queryThema = ''; - const taxonomy = this.getAttribute('taxonomy') || 'http://stad.gent/id/concepts/decision_making_themes'; - const concepts = this.getAttribute('concepts'); + let queryThema = ""; + const taxonomy = + this.getAttribute("taxonomy") || + "http://stad.gent/id/concepts/decision_making_themes"; + const concepts = this.getAttribute("concepts"); if (concepts) { const conceptsArray = concepts.split(" "); - queryThema = ` + queryThema = + ` ?besluit ext:hasAnnotation ?annotation . ?annotation ext:withTaxonomy ?thema ; ext:creationDate ?date ; ext:hasLabel ?label . ?label ext:isTaxonomy ?concept . VALUES ?thema { <${taxonomy}> } - VALUES ?concept { ` + conceptsArray.map(concept => `<${concept.trim()}>`).join(" ") + ` } + VALUES ?concept { ` + + conceptsArray.map((concept) => `<${concept.trim()}>`).join(" ") + + ` } FILTER (!CONTAINS(STR(?url), "/notulen")) FILTER (!CONTAINS(STR(?orgaan), "personeel")) FILTER (!CONTAINS(STR(?orgaan), "gemeenteraad")) @@ -154,22 +184,32 @@ class ReglementenLijst extends HTMLElement { } // Bestuurseenheden filter. - const bestuurseenheden = this.getAttribute('bestuurseenheden'); + const bestuurseenheden = this.getAttribute("bestuurseenheden"); if (bestuurseenheden) { const bestuurseenhedenArray = bestuurseenheden.split(" "); - filterparams += "VALUES ?bestuureenheidURI { " + bestuurseenhedenArray.map(bestuurseenheid => `<${bestuurseenheid.trim()}>`).join(" ") + " }" + filterparams += + "VALUES ?bestuureenheidURI { " + + bestuurseenhedenArray + .map((bestuurseenheid) => `<${bestuurseenheid.trim()}>`) + .join(" ") + + " }"; } // Bestuursorganen filter. - const bestuursorganen = this.getAttribute('bestuursorganen'); + const bestuursorganen = this.getAttribute("bestuursorganen"); if (bestuursorganen) { const bestuursorganenArray = bestuursorganen.split(" "); - filterparams += "VALUES ?bestuursorgaanURI { " + bestuursorganenArray.map(bestuursorgaan => `<${bestuursorgaan.trim()}>`).join(" ") + " }" + filterparams += + "VALUES ?bestuursorgaanURI { " + + bestuursorganenArray + .map((bestuursorgaan) => `<${bestuursorgaan.trim()}>`) + .join(" ") + + " }"; } // Date filter. - const startdate = this.getAttribute('start'); - const enddate = this.getAttribute('eind'); + const startdate = this.getAttribute("start"); + const enddate = this.getAttribute("eind"); if (startdate && enddate) { filterparams += `FILTER(?zitting_datum >= "${startdate}"^^xsd:date && ?zitting_datum <= "${enddate}"^^xsd:date)`; } else if (startdate) { @@ -185,7 +225,7 @@ class ReglementenLijst extends HTMLElement { besluit:isGehoudenDoor/mandaat:isTijdspecialisatieVan ?bestuursorgaanURI .`; // TODO: remove with query below after Bestuursorgaan has been moved to Zitting iso BehandelingVanAgendapunt - const endpoint = this.getAttribute('sparql-endpoint') + const endpoint = this.getAttribute("sparql-endpoint"); if (endpoint.includes("probe")) { queryBestuursorgaan = ` prov:wasGeneratedBy ?behandelingVanAgendapunt . @@ -272,7 +312,7 @@ class ReglementenLijst extends HTMLElement {
- Recente reglementen + Recente reglementen
Alle reglementen van Stad Gent @@ -292,20 +332,20 @@ class ReglementenLijst extends HTMLElement { pageUp() { this.offset += this.amount; console.log(this.offset); - this.getReglementen() + this.getReglementen(); } pageDown() { if (this.offset >= this.amount) { this.offset -= this.amount; console.log(this.offset); - this.getReglementen() + this.getReglementen(); } } getPager() { - let previous = ''; - let next = ''; + let previous = ""; + let next = ""; let currentPage = Math.floor(this.offset / this.amount) + 1; let totalPages = Math.ceil(this.maxCount / this.amount); @@ -338,4 +378,4 @@ class ReglementenLijst extends HTMLElement { } } -customElements.define('reglementen-lijst', ReglementenLijst); +customElements.define("reglementen-lijst", ReglementenLijst);