diff --git a/index.html b/index.html deleted file mode 100644 index 229c6d7..0000000 --- a/index.html +++ /dev/null @@ -1,5 +0,0 @@ - - -Hello Cruel World - - diff --git a/public/assets/icons/PNG-Kalender.png b/public/assets/icons/PNG-Kalender.png new file mode 100644 index 0000000..1914ab4 Binary files /dev/null and b/public/assets/icons/PNG-Kalender.png differ diff --git a/public/assets/icons/PNG-Meld_verdachte_handelingen.png b/public/assets/icons/PNG-Meld_verdachte_handelingen.png new file mode 100644 index 0000000..8b727f5 Binary files /dev/null and b/public/assets/icons/PNG-Meld_verdachte_handelingen.png differ diff --git a/public/assets/icons/PNG-barometer.png b/public/assets/icons/PNG-barometer.png new file mode 100644 index 0000000..6f6d9fc Binary files /dev/null and b/public/assets/icons/PNG-barometer.png differ diff --git a/public/assets/icons/PNG-fout.png b/public/assets/icons/PNG-fout.png new file mode 100644 index 0000000..03f38f2 Binary files /dev/null and b/public/assets/icons/PNG-fout.png differ diff --git a/public/assets/icons/PNG-klipbord.png b/public/assets/icons/PNG-klipbord.png new file mode 100644 index 0000000..84e3827 Binary files /dev/null and b/public/assets/icons/PNG-klipbord.png differ diff --git a/public/assets/icons/PNG-natuurlijke persoon.png b/public/assets/icons/PNG-natuurlijke persoon.png new file mode 100644 index 0000000..4563214 Binary files /dev/null and b/public/assets/icons/PNG-natuurlijke persoon.png differ diff --git a/public/assets/icons/PNG-onderzoek.png b/public/assets/icons/PNG-onderzoek.png new file mode 100644 index 0000000..84d9e10 Binary files /dev/null and b/public/assets/icons/PNG-onderzoek.png differ diff --git a/public/assets/icons/PNG-opgepast.png b/public/assets/icons/PNG-opgepast.png new file mode 100644 index 0000000..7641a23 Binary files /dev/null and b/public/assets/icons/PNG-opgepast.png differ diff --git a/public/assets/icons/PNG-risicoanalyse.png b/public/assets/icons/PNG-risicoanalyse.png new file mode 100644 index 0000000..92ef59b Binary files /dev/null and b/public/assets/icons/PNG-risicoanalyse.png differ diff --git a/public/assets/icons/PNG-time-out.png b/public/assets/icons/PNG-time-out.png new file mode 100644 index 0000000..fe93a19 Binary files /dev/null and b/public/assets/icons/PNG-time-out.png differ diff --git a/public/assets/icons/PNG-trainer_B.png b/public/assets/icons/PNG-trainer_B.png new file mode 100644 index 0000000..90e1973 Binary files /dev/null and b/public/assets/icons/PNG-trainer_B.png differ diff --git a/public/assets/icons/archeologievlagedit.png b/public/assets/icons/archeologievlagedit.png new file mode 100644 index 0000000..7a9dfeb Binary files /dev/null and b/public/assets/icons/archeologievlagedit.png differ diff --git a/public/assets/icons/barometeredit.png b/public/assets/icons/barometeredit.png new file mode 100644 index 0000000..44ee321 Binary files /dev/null and b/public/assets/icons/barometeredit.png differ diff --git a/public/assets/icons/burgemeesteredit.png b/public/assets/icons/burgemeesteredit.png new file mode 100644 index 0000000..057df76 Binary files /dev/null and b/public/assets/icons/burgemeesteredit.png differ diff --git a/public/assets/icons/foutedit.png b/public/assets/icons/foutedit.png new file mode 100644 index 0000000..880a579 Binary files /dev/null and b/public/assets/icons/foutedit.png differ diff --git a/public/assets/icons/info.png b/public/assets/icons/info.png new file mode 100644 index 0000000..b70ba84 Binary files /dev/null and b/public/assets/icons/info.png differ diff --git a/public/assets/icons/kalenderedit.png b/public/assets/icons/kalenderedit.png new file mode 100644 index 0000000..4b120f0 Binary files /dev/null and b/public/assets/icons/kalenderedit.png differ diff --git a/public/assets/icons/klipbordedit.png b/public/assets/icons/klipbordedit.png new file mode 100644 index 0000000..cec57d8 Binary files /dev/null and b/public/assets/icons/klipbordedit.png differ diff --git a/public/assets/icons/meld_verdachte_handelingenedit.png b/public/assets/icons/meld_verdachte_handelingenedit.png new file mode 100644 index 0000000..4890f17 Binary files /dev/null and b/public/assets/icons/meld_verdachte_handelingenedit.png differ diff --git a/public/assets/icons/onderzoekedit.png b/public/assets/icons/onderzoekedit.png new file mode 100644 index 0000000..df16cda Binary files /dev/null and b/public/assets/icons/onderzoekedit.png differ diff --git a/public/assets/icons/opgepastedit.png b/public/assets/icons/opgepastedit.png new file mode 100644 index 0000000..f9426d3 Binary files /dev/null and b/public/assets/icons/opgepastedit.png differ diff --git a/public/assets/icons/overeenkomstedit.png b/public/assets/icons/overeenkomstedit.png new file mode 100644 index 0000000..fc9f480 Binary files /dev/null and b/public/assets/icons/overeenkomstedit.png differ diff --git a/public/assets/icons/risicoanalyseedit.png b/public/assets/icons/risicoanalyseedit.png new file mode 100644 index 0000000..888043c Binary files /dev/null and b/public/assets/icons/risicoanalyseedit.png differ diff --git a/public/assets/icons/sluikstortenedit.png b/public/assets/icons/sluikstortenedit.png new file mode 100644 index 0000000..d9b4368 Binary files /dev/null and b/public/assets/icons/sluikstortenedit.png differ diff --git a/public/assets/icons/sociale_economieedit.png b/public/assets/icons/sociale_economieedit.png new file mode 100644 index 0000000..b3391b7 Binary files /dev/null and b/public/assets/icons/sociale_economieedit.png differ diff --git a/public/assets/icons/time-outedit.png b/public/assets/icons/time-outedit.png new file mode 100644 index 0000000..039a9ff Binary files /dev/null and b/public/assets/icons/time-outedit.png differ diff --git a/public/assets/icons/trainer_bedit.png b/public/assets/icons/trainer_bedit.png new file mode 100644 index 0000000..b1d6d68 Binary files /dev/null and b/public/assets/icons/trainer_bedit.png differ diff --git a/public/assets/images/header.jpg b/public/assets/images/header.jpg new file mode 100644 index 0000000..9b69b99 Binary files /dev/null and b/public/assets/images/header.jpg differ diff --git a/public/assets/images/mapprovincies.png b/public/assets/images/mapprovincies.png new file mode 100644 index 0000000..fa69b1a Binary files /dev/null and b/public/assets/images/mapprovincies.png differ diff --git a/public/assets/images/placeholder.png b/public/assets/images/placeholder.png new file mode 100644 index 0000000..6071b2c Binary files /dev/null and b/public/assets/images/placeholder.png differ diff --git a/public/assets/style.css b/public/assets/style.css new file mode 100644 index 0000000..c671783 --- /dev/null +++ b/public/assets/style.css @@ -0,0 +1,130 @@ +body { + background: #eee; +} + +.content { + margin: 0 auto; + width: 80%; + max-width: 800px; +} + + + +.MIL-Barchart-VTE { + height: 600px; + width:500px; +} + +.objectsm { + height: 100px; + width:500px; +} + +.bg { + background-color: azure; +} + +.object { + height: 100px; + width:100% !important; +} + +.center { + display: float; + margin-left: auto; + margin-right: auto; + width: 50%; +} + +.chart { + width:100% !important; + height: 350px !important; +} + +.chartTable { + height:100% !important; + width:100% !important; +} + +.chart2 { + height: 300px !important; + width:500px; +} + +.data-top-bot { + margin-bottom: 20px !important; + margin-top: 20px !important; +} + +.nav-link-color { + color: #0155cc !important; + text-decoration: none; + display: inline-block !important; + position: relative; +} + + +.nav-link-color:after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: #0155cc; + transform-origin: center; + transition: transform 0.25s ease-out; +} + +.nav-link-color:hover:after { + transform: scaleX(1); + transform-origin: center; +} + +div.qvobject, +div.qvplaceholder { + padding: 0px 10px 10px 10px; + height: 400px; + background-color: white; +} + +div.qvobject100 { + padding: 0px 0px 0px 0px; + height: 100px; +} + +div.qvobject200 { + padding: 0px 10px 10px 10px; + height: 200px; +} + +div.qvobject250 { + padding: 0px 10px 10px 10px; + height: 250px; +} +div.qvobject500 { + padding: 0px 10px 10px 10px; + height: 500px; +} + +.current-page { + font-weight: bold !important; + text-decoration: underline !important; +} + +.listboxProv { + height:250px; +} + +.listbox { + height:600px !important; + padding:0px !important; +} + +.icon { + display:block !important; + margin-left: auto !important; + margin-right: auto !important; + padding: 0px !important; +} \ No newline at end of file diff --git a/public/documents/Duiding bij de statistische bijdrage van het Openbaar Ministerie.pdf b/public/documents/Duiding bij de statistische bijdrage van het Openbaar Ministerie.pdf new file mode 100644 index 0000000..fceec71 Binary files /dev/null and b/public/documents/Duiding bij de statistische bijdrage van het Openbaar Ministerie.pdf differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..1419b10 --- /dev/null +++ b/public/index.html @@ -0,0 +1,34 @@ + + + + + + + Omgevingshandhavingsrapportage | Departement Omgeving + + + + +
+ + +
+
+
+ +
+
+ + + + + + diff --git a/src/configure.js b/src/configure.js new file mode 100644 index 0000000..ec6792f --- /dev/null +++ b/src/configure.js @@ -0,0 +1,16 @@ +import '@nebula.js/stardust' +import '@nebula.js/sn-bar-chart' +const nebbie = embed.createConfiguration({ + context: { + theme: 'light', + language: 'nl-NL', + }, + types: [ + { + name: 'barchart', + load: () => Promise.resolve(window['@nebula.js/sn-bar-chart']), + }, + ], +}); + +export default n; diff --git a/src/connect.js b/src/connect.js new file mode 100644 index 0000000..aa464c3 --- /dev/null +++ b/src/connect.js @@ -0,0 +1,44 @@ +import enigma from "enigma.js"; +import schema from "enigma.js/schemas/12.170.2.json"; + +async function getQCSHeaders({ webIntegrationId, url }) { + const response = await fetch(`${url}`, { + // credentials: "include", + }); + if (response.status === 401) { + const loginUrl = new URL(`${url}/login`); + loginUrl.searchParams.append("returnto", window.location.href); + /* loginUrl.searchParams.append("qlik-web-integration-id", webIntegrationId);*/ + window.location.href = loginUrl; + return undefined; + } + const csrfToken = new Map(response.headers).get("qlik-csrf-token"); + return { + "qlik-web-integration-id": webIntegrationId, + "qlik-csrf-token": csrfToken, + }; +} + +async function getEnigmaApp({ host, appId, headers }) { + const params = Object.keys(headers) + .map((key) => `${key}=${headers[key]}`) + .join("&"); + + const enigmaGlobal = await enigma + .create({ + schema, + url: `ws://${host}/app/${appId}?${params}`, + }) + .open(); + + return enigmaGlobal.openDoc(appId); +} + +async function connect({ url, appId }) { + const host = url.replace(/^https?:\/\//, "").replace(/\/?/, ""); +const headers = await getQCSHeaders({ url/*, webIntegrationId*/ }); + return getEnigmaApp({ host, headers, appId }); +} + +export default connect; + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..6fa66eb --- /dev/null +++ b/src/index.js @@ -0,0 +1,663 @@ +import { Router } from "@vaadin/router" +import "uig-webcomponents/lib/components/body" +import "uig-webcomponents/lib/components/header" +import "uig-webcomponents/lib/components/footer" +import "uig-webcomponents/lib/components/grid" +import "uig-webcomponents/lib/components/body/styles.css" +import "uig-webcomponents/lib/components/template" +import "uig-webcomponents/lib/components/content-header" +import "uig-webcomponents/lib/components/image" +import "uig-webcomponents/lib/components/image/styles.css" +import "uig-webcomponents/lib/components/titles/styles.css" +import "uig-webcomponents/lib/components/titles" +import "uig-webcomponents/lib/components/typography" +import "uig-webcomponents/lib/components/content-header" +import "uig-webcomponents/lib/components/contact-card" +import "uig-webcomponents/lib/components/properties/styles.css" +import "uig-webcomponents/lib/components/body/styles.css" +import "uig-webcomponents/lib/components/footer" +import "uig-webcomponents/lib/components/info-tile" +import "uig-webcomponents/lib/components/accordion" +import "uig-webcomponents/lib/components/typography" +import "uig-webcomponents/lib/components/grid" +import "uig-webcomponents/lib/components/doormat" +import "uig-webcomponents/lib/components/doormat/styles.css" +import "uig-webcomponents/lib/components/side-navigation" +import "uig-webcomponents/lib/components/side-navigation/styles.css" +import "uig-webcomponents/lib/components/header" +import "uig-webcomponents/lib/components/titles" +import "uig-webcomponents/lib/components/titles/styles.css" +import "uig-webcomponents/lib/components/button" +import "uig-webcomponents/lib/components/button/styles.css" +import "uig-webcomponents/lib/components/accessibility" +import "uig-webcomponents/lib/components/http-error-message" +import 'bootstrap/js/dist/button' +import "uig-webcomponents/lib/components/link-list" +import "uig-webcomponents/lib/components/link-list/styles.css" +import "uig-webcomponents/lib/components/loader" +import "uig-webcomponents/lib/components/accessibility" +import "uig-webcomponents/lib/components/alert" +import "uig-webcomponents/lib/components/breadcrumb" +import "uig-webcomponents/lib/components/functional-header" +import "uig-webcomponents/lib/components/infoblock" +import "uig-webcomponents/lib/components/info-tile" +import "uig-webcomponents/lib/components/map" +import "uig-webcomponents/lib/components/description-data" +import "uig-webcomponents/lib/components/icon" +import "uig-webcomponents/lib/components/icon/styles.css" +import "uig-webcomponents/lib/components/document" +//Imports API calls +import * as stardust from '@nebula.js/stardust' +import barChart from '@nebula.js/sn-bar-chart'; +import connect from './connect'; +import snKpi from "@nebula.js/sn-kpi" +import table from '@nebula.js/sn-table'; +import pivotTable from '@nebula.js/sn-pivot-table'; +import enigma from "enigma.js"; +import schema from "enigma.js/schemas/12.170.2.json"; +import { Gewestelijk } from "./views/Gewestelijk" +import React, { useState, useEffect } from 'react'; + + + +// when cliclk hamburger menu +/* +document.querySelector('.navbar-toggler').onclick = function() { + // if menu is opening, close menu + if(document.getElementById('navbar').classList.contains('show')) { + document.querySelector('#navbar').classList.remove('show'); + } else { + document.querySelector('#navbar').classList.add('show'); + } +} + +*/ + +//React Routes for navigation +const routes = [ + { + path: "/", + component: "start-view", + action: async () => { + await import("./views/start"); + }, + }, + { + path: "/home", + component: "home-view", + action: async () => { + await import("./views/home"); + }, + }, + { + path: "/gewestelijk", + component: "gewestelijk-view", + action: async () => { + await import("./views/Gewestelijk"); + }, + }, + { + path: "/provinciaal", + component: "provinciaal-view", + action: async () => { + await import("./views/provinciaal"); + }, + }, + { + path: "/map", + component: "map-view", + action: async () => { + await import("./views/map"); + }, + }, + { + path: "/upload", + component: "upload-view", + action: async () => { + await import("./views/upload"); + }, + }, + { + path: "/GewestelijkAnalyse", + component: "GewestelijkAnalyse-view", + action: async () => { + await import("./views/GewestelijkAnalyse"); + }, + }, + { + path: "/Gemeenten", + component: "gemeenten-view", + action: async () => { + await import("./views/gemeenten"); + }, + }, + { + path: "/toegankelijkheid", + component: "toegankelijkheid-view", + action: async () => { + await import("./views/toegankelijkheid"); + }, + }, + { + path: "/provinciaalAnalyse", + component: "provinciaalAnalyse-view", + action: async () => { + await import("./views/provinciaalAnalyse"); + }, + }, + { + path:"/gemeentenAnalyse", + component: "gemeentenAnalyse-view", + action: async() => { + await import ("./views/gemeentenAnalyse"); + } + }, + { + path:"/strafrechtelijk", + component: "strafrechtelijkAnalyse-view", + action: async() => { + await import ("./views/strafrechtelijk"); + } + }, + { + path:"/strafrechtelijktest", + component: "strafrechtelijktest-view", + action: async() => { + await import ("./views/strafrechtelijktest"); + } + } +]; + +export const router = new Router(document.getElementById("app")); +router.setRoutes(routes); + +/*End of routes definitions*/ +/* Enigma Config met Nebula Stardust start*/ +const config = { + local: true, + url: "http://10.38.15.2", + appId: "ef67df6b-e8dc-40f5-a56d-89b65e902609", +}; +/*Define the types of charts that we want refering to stardust package*/ +const types = [ + { + name: "barchart", + load: () => Promise.resolve(barChart) + }, + { + name: "kpi", + load: () => Promise.resolve(snKpi) + }, + { + name: 'table', + load: () => Promise.resolve(table) + }, + { + name: 'pivot-table', + load: () => Promise.resolve(pivotTable), + } +]; +async function init() { + + let app; + app = await connect(config); + + /*Set theme to charts*/ + const nebbie = stardust.embed(app, { + types, + //themes, + context: { + language: 'nl-NL', + theme: 'myTheme', + }, + }); + + /* + nebbie.render({ + element: document.querySelector('.Tabel1'), + type: 'table', + properties: { + qHyperCubeDef: { + qDimensions: [ + { qDef: { qFieldDefs: ['Case Owner Group'] }, qNullSuppression: true, qLabel: 'Department' }, + { qDef: { qFieldDefs: ['Priority'] }, qNullSuppression: true }, + ], + qMeasures: [ + { qDef: { qDef: 'Avg([Case Duration Time])', autoSort: false }, qSortBy: { qSortByNumeric: -1 }, qLabel: 'Avg Duration' }, + ], + qInterColumnSortOrder: [2, 0, 1], + qInitialDataFetch: [{ + qWidth: 3, + qHeight: 3000, + }], + }, + showTitles: true, + title: 'Table', + subtitle: 'Sample supernova table', + footnote: '', + totals: { + show: true, + }, + }, + }); */ + nebbie.render({ + element: document.querySelector('.Tabel1'), + id: "XBDmJ", + }); + nebbie.render({ + element: document.querySelector('.Tabel2'), + id: "cLquW", + }); + nebbie.render({ + element: document.querySelector('.TabelVooruitgangs'), + id: "PdSJJ", + }); + nebbie.render({ + element: document.querySelector('.TabelSeponering'), + id: "cpHFYs", + }); + nebbie.render({ + element: document.querySelector('.GewestelijkBBInstroom'), + id: "NnTrfSB", + }); + nebbie.render({ + element: document.querySelector('.GewestelijkBBBehandeling'), + id: "wLLgTk", + footnote: "Hello" + }); + + //Get toolbar of application and define it as a class of toolbar => To be used in HTML page + (await nebbie.selections().then((s) => s.mount(document.querySelector('.toolbar')))); + + //Rendering Objects made in Qlik Sense + /* Define with queryselector the class name of div tag which will be used as a placeholder */ + //if statement for performance to not render all the charts when not on the page + if(window.location.pathname == '/gewestelijkanalyse') { + nebbie.render({ + element: document.querySelector('.MIL-Barchart-VTE'), + id: "cPNUApf", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-VTE'), + id: "HmeFbmd", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Toezichthouder'), + id: "yjAMg", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Klachten'), + id: "JFzHHx", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Controles'), + id: "QqPsxa", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Aanvankelijke-Controles'), + id: "kxjKVfR", + }); + nebbie.render({ + element: document.querySelector('.MIL-bar-Aanvankelijke-Controles'), + id: "mPuBHk", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Raadgeving'), + id: "DdSpDj", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Aanmaning'), + id: "JaKhF", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Verslag-van-vastelling'), + id: "YmmVmY", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Proces-verbaal'), + id: "cBUU", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Bestuurlijk-maatregel'), + id: "jXa", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Bestuurlijk-maatregel-zonder-dwangsom'), + id: "MGcspm", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Bestuurlijk-maatregel-zonder-dwangsom-percent'), + id: "JhfJ", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Bestuurlijk-maatregel-met-dwangsom'), + id: "HjDSC", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Bestuurlijk-maatregel-met-dwangsom-percent'), + id: "fYhpTj", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Veiligheidsmaatregel'), + id: "KNCw", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Veiligheidsmaatregel-percent'), + id: "nUWpf", + }); + nebbie.render({ + element: document.querySelector('.MIL-KPI-Overtredingsgraad'), + id: "wrJUxb", + }); + nebbie.render({ + element: document.querySelector('.MIL-Barchart-Klachten'), + id: "fjPmJQ", + }); + nebbie.render({ + element: document.querySelector('.MIL-Barchart-Controles'), + id: "FrnBLn", + }); + /************************ */ + nebbie.render({ + element: document.querySelector('.RO-KPI-Stedenbouwkundige'), + id: "590fe9ed-596a-47be-9b8f-8f183e9dcb2c", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-VTE'), + id: "547c2be7-842f-4c0e-a092-a14552a62b43", + }); + nebbie.render({ + element: document.querySelector('.RO-Barchart-VTE'), + id: "fa4bd7f8-77a9-429f-9117-cf3bdfc62fd9", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Klachten'), + id: "cdd825e1-08a0-4a90-89ad-09deef2c5a5b", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Controles'), + id: "f4306632-1e0c-4262-bf5a-3e2b262704ea", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Aanvankelijke-Controles'), + id: "dc23a492-5c6f-4143-b7aa-5490b2913564", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Raadgeving'), + id: "c7e581e9-c70c-4060-8872-2415b00b8afa", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Aanmaning'), + id: "4fbef0ac-ccda-4fbe-8ba8-07691fb730fd", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Verslag-van-vastelling'), + id: "c838cdf0-098f-400a-8219-a4636db4a0df", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Proces-verbaal'), + id: "34c6cdc5-adff-439b-b9c9-1f83366580f4", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Bestuurlijk-maatregel'), + id: "755ce05d-5c46-4ce6-97a5-41997abaa387", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Bestuurlijk-maatregel-zonder-dwangsom'), + id: "7b1c2234-b5f4-4a61-b9e6-83731632525a", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Bestuurlijk-maatregel-zonder-dwangsom-percent'), + id: "1f83ab34-d3a0-441a-9ccb-80d4a9cc14f3", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Bestuurlijk-maatregel-met-dwangsom'), + id: "f3858870-dce3-47a3-9836-30a6aa676057", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Bestuurlijk-maatregel-met-dwangsom-percent'), + id: "e71feba5-90df-4f90-b8c0-ac14b12cdf29", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Veiligheidsmaatregel'), + id: "39444ce5-84e1-4964-be44-1d791438e603", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Verbalitisanten'), + id: "ZZxXrq", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Overtredingsgraad'), + id: "wrJUxb", + }); + nebbie.render({ + element: document.querySelector('.RO-Barchart-Controles'), + id: "AwzbN", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-Herstelbaar'), + id: "WTBuPU", + }); + + nebbie.render({ + element: document.querySelector('.RO-KPI-Herstelvordering'), + id: "JqwMRw", + }); + nebbie.render({ + element: document.querySelector('.RO-KPI-ambtshaleveuitvoering'), + id: "GTvAFY", + }); + + /* Get fieldvalues of the field Naam Handhavingsinstantie in Qlik model and mount it in placeholder listbox*/ + const fieldName = 'Naam Handhavinginstantie'; // Should refer to a field in your app + (await nebbie.field(fieldName)) + .mount(document.querySelector('.listbox'),{search:false,title:"Gewestelijke handhavingsactoren",checkboxes:false}); + } + else if(window.location.pathname == '/provinciaalAnalyse') + { + /* + const fieldNameProv = 'Provincie'; // Should refer to a field in your app + (await nebbie.field(fieldNameProv)).mount(document.querySelector('.listboxProv')); */ + nebbie.field('Provincie').then((s) => + s.mount(document.querySelector('.listboxProv'), { + properties: { + qListObjectDef: { + qDef: { + qSortCriterias: [ + { + qSortByState: 0, + qSortByAscii: 1, + qSortByNumeric: 1, + qSortByLoadOrder: 1, + }, + ], + }, + }, + }, + }) + ) + nebbie.render({ + element: document.querySelector('.Bestuurlijk-maatregel-provinciegouverneur'), + id: "XjBqeE", + }); + nebbie.render({ + element: document.querySelector('.Veiligheidsmaatregelen-provinciegouverneur'), + id: "Gchmsr", + }); + nebbie.render({ + element: document.querySelector('.VTEHandhaving'), + id: "CptELfD", + }); + nebbie.render({ + element: document.querySelector('.ToezichthoudersProv'), + id: "vtQuSsz", + }); + nebbie.render({ + element: document.querySelector('.Klachten'), + id: "JvKBje", + }); + nebbie.render({ + element: document.querySelector('.Controles'), + id: "JAGuhL", + }); + nebbie.render({ + element: document.querySelector('.Aanvankelijkecontrolesmetovertreding'), + id: "JPctuae", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen'), + id: "XjBqeE", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-zonder-dwangsom'), + id: "RXcjfDd", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-tijdig-uitgevoerd'), + id: "gTxNP", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-metdwangsom'), + id: "czJPhQ", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-tijdig'), + id: "aPHqXZ", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-veiligheidsmaatregelen'), + id: "mwzmBf", + }); + nebbie.render({ + element: document.querySelector('.Bestuurlijkmaatregelen-veiligheidsmaatregelen-tijdig'), + id: "hcsvJ", + }); + nebbie.render({ + element: document.querySelector('.Provincialetoezichthouders'), + id: "fpdhcD", + }); + nebbie.render({ + element: document.querySelector('.TotaalVTE'), + id: "QCjyv", + }); + nebbie.render({ + element: document.querySelector('.TotaalVTEChart'), + id: "FPsjMJ", + }); + nebbie.render({ + element: document.querySelector('.KlachtenChart'), + id: "skLPSt", + }); + nebbie.render({ + element: document.querySelector('.ControlesChart'), + id: "UxdjFsS", + }); + nebbie.render({ + element: document.querySelector('.Raadgeving'), + id: "ZjSzs", + }); + nebbie.render({ + element: document.querySelector('.Aanmaning'), + id: "MqRzq", + }); + nebbie.render({ + element: document.querySelector('.Procesverbaal'), + id: "ZncUmUP", + }); + nebbie.render({ + element: document.querySelector('.BESTM'), + id: "QcUjLd", + }); + nebbie.render({ + element: document.querySelector('.BESTM-zonderdw'), + id: "PBLBHyp", + }); + nebbie.render({ + element: document.querySelector('.BESTM-zonderdw-percent'), + id: "KVpU", + }); + nebbie.render({ + element: document.querySelector('.BESTM-metdwangsom'), + id: "FPvJJ", + }); + nebbie.render({ + element: document.querySelector('.BESTM-metdwangsom-percent'), + id: "Pwq", + }); + nebbie.render({ + element: document.querySelector('.Veiligheidsmaatregel'), + id: "PjxFwJ", + }); + nebbie.render({ + element: document.querySelector('.Veiligheidsmaatregel-percent'), + id: "rcDAPp", + }); + nebbie.render({ + element: document.querySelector('.mapprovincies'), + id: "gmkbzX", + }); + + } + + + // Similar to componentDidMount and componentDidUpdate: + + + /* + document.querySelector('.theme').addEventListener('click', () => { + themeCounter ? nebbie.context({ theme: 'otherTheme' }) : nebbie.context({ theme: 'myTheme' }); + themeCounter = !themeCounter; + }); */ + + /* + document.querySelector('.css').addEventListener('click', () => { + if (styleNode) { + document.head.removeChild(styleNode); + styleNode = null; + } else { + const css = ` + div.njs-cell { + background: maroon; + } + p.njs-cell-footer, h6.njs-cell-title, p.njs-cell-sub-title { + color: white; + } + button.njs-cell-action { + color: white; + } + div.njs-action-toolbar-popover { + background: darkolivegreen; + } + `; + styleNode = document.createElement('style'); + document.head.appendChild(styleNode); + styleNode.appendChild(document.createTextNode(css)); + } + }); - */ + /* + let typeIndex = 0; + document.querySelectorAll('.object').forEach(async (el) => { + if (types[typeIndex]) { + nebbie.render({ + type: types[typeIndex].name, + element: el, + fields: ['title', '=rand()-0.5'], + properties: types[typeIndex].name !== "piechart" ? { + showTitles: true, + title: 'Main title', + subtitle: 'subtitle', + footnote: 'footer', + } : null, + }); + typeIndex++; + } + }); */ +} + +init() + + + + + + diff --git a/src/templates/analysis.js b/src/templates/analysis.js new file mode 100644 index 0000000..adad9ce --- /dev/null +++ b/src/templates/analysis.js @@ -0,0 +1,41 @@ +import { html } from "lit-element"; +import data from "../../package.json"; + +export const analysis = ({ children, title }) => html` + + +
+ ${children} +
`; diff --git a/src/templates/page.js b/src/templates/page.js new file mode 100644 index 0000000..01df125 --- /dev/null +++ b/src/templates/page.js @@ -0,0 +1,81 @@ +import { html } from "lit-element"; +import data from "../../package.json"; + +export const page = ({ children, title }) => html` + + + + Omgevingshandhavingsrapportage + Cijfers van 2021 + + +
+
+
${children}
+
+
`; diff --git a/src/views/gemeenten.js b/src/views/gemeenten.js new file mode 100644 index 0000000..ccb3e8f --- /dev/null +++ b/src/views/gemeenten.js @@ -0,0 +1,111 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/legacy/tabs"; +import { page } from "../templates/page"; + +export class Gemeenten extends LitElement { + render() { + return page({ + children: html`
+
+
+
+

+ Handhaving in de gemeenten +

+

+ De gemeenten hebben handhavingsbevoegdheden ten aanzien van de milieuregelgeving + en/of de regelgeving inzake ruimtelijke ordening. De burgemeester of zijn plaatsvervanger is in bepaalde gevallen + bevoegd voor het opleggen van bestuurlijke maatregelen en kan veiligheidsmaatregelen nemen in geval van een + aanzienlijk risico voor mens of milieu. De lokale toezichthouders oefenen daarnaast het toezicht uit op de + toepassing van specifieke milieuvoorschriften. De lokale verbalisanten, de agenten en de officieren van + gerechtelijke politie en de stedenbouwkundige inspecteurs/burgemeesters handhaven de regelgeving van de + Vlaamse Codex Ruimtelijke Ordening. + De gemeenten kunnen hun handhavingsactiviteiten organiseren binnen de eigen gemeentelijke administratie + en/of een intergemeentelijke vereniging en/of de lokale politie. + In de individuele handhavingsfiches en in de cartografische weergaves wordt gerapporteerd over de uitvoering + van hun handhavingsactiviteiten in het voorgaand jaar. Zie analyseer cijfers op kaart om voor een bepaalde + set van indicatoren de data geografisch op een vergelijkende wijze te raadplegen en zie analyseer cijfers + individuele gemeenten om de data van de individuele gemeenten te raadplegen. +

+
+
+ +
+ +
+
+ +
+


+ In onderstaande weergave worden de gegevens van de lokale handhavingsactoren gebundeld om zo een globaal + beeld te krijgen van de handhavingsactiviteiten aangaande het DABM en de VCRO op gemeentelijk niveau. +

+
+
+ + +
+
+
+ + + `, + title: "Gemeenten", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("gemeenten-view", Gemeenten); diff --git a/src/views/gemeentenAnalyse.js b/src/views/gemeentenAnalyse.js new file mode 100644 index 0000000..b3e903a --- /dev/null +++ b/src/views/gemeentenAnalyse.js @@ -0,0 +1,103 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { analysis } from "../templates/analysis"; +import { embed } from '@nebula.js/stardust'; +export class GemeentenAnalyseView extends LitElement { + + render() { + const features = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [ + [ + [197591.98788609868,212362.7856999063],[197965.54874224094,212308.57934437992],[201499.09807075968,213134.86246511305],[201739.76885696166,213534.22506094567],[202865.6628006802,212681.475414276],[203012.76571232532,212852.2800043406],[203346.53061169403,212771.51617261674],[203650.9223048727,213002.07508412568],[204139.84405951927,213006.53164691222],[204199.30111398452,213359.60055992115],[204799.7936760141,213384.33903089963],[204729.6769902702,213115.2172087478],[205258.15782099523,213157.32717956777],[205313.11414225397,213726.4939125945],[205563.73391764934,213697.11697830757],[205748.73774050735,214151.95923331982],[206394.47451529733,214352.50455871515],[206473.59266745427,215048.27405498468],[207035.47367618568,215319.7605839212],[206016.8866873387,215716.94037349097],[205154.64095724496,218053.17972652038],[202932.46315669297,216957.5928831135],[202098.16934861874,217058.27482198545],[201768.19454037136,216669.4624564231],[201074.13410378492,216346.6799803106],[200207.8614018748,215564.96248744312],[199460.26592820013,215659.36885830946],[199160.84872961813,215524.21677053737],[199304.39843083703,215248.91033064094],[199083.8625037169,214628.1747996554],[198913.78216464896,214551.95848097908],[198025.71643879145,212819.26505961566],[197591.98788609868,212362.7856999063] + ], + ], + }, + properties: { label: 'Mol'}, + }, + ], + }; + + const featuresB = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [ + [ + [233240.87433087776,213219.71905857965],[231805.61419938382,212554.69075051133],[231190.90879564942,211744.1420249226],[230762.39161824845,212267.8336274742],[230494.00579072203,211856.10179615236],[229842.8207599452,212103.94125724182],[228902.6412811699,212096.301435322],[228998.10420128744,211480.56816868874],[228386.241365894,211289.29976991034],[228106.72214569876,209954.78659098715],[227510.0196747905,209271.9320317726],[228308.07073651737,208079.93791175846],[229180.97609788974,208151.87956817012],[231162.00935084958,207658.11060147115],[231583.8938687883,207873.93557070612],[231460.47902665127,207760.88439634495],[232133.6939620706,205589.1740653746],[232483.09298731462,205094.04084476136],[231419.73554709737,204671.5768826474],[232435.95372899357,202930.2431864937],[234664.05354692257,205374.25859874912],[234317.26020932445,206118.77743488795],[234664.05354692257,206578.71290451344],[234941.44084086208,206513.5015674121],[235652.55668749433,206856.29310093363],[237240.13110592513,208214.6352482258],[238302.0672619719,208483.12041855097],[238819.17781933307,208415.18057362112],[240244.72584232868,208856.56219001274],[240144.0515469194,209084.4835439541],[240141.4458592735,209089.12200726254],[239543.7958655849,210065.92780986836],[239846.05563250787,210140.59797410853],[239745.1444564035,210519.31486070543],[233240.87433087776,213219.71905857965] + + ], + ], + }, + properties: { label: 'Dessel'}, + }, + ], + }; + const featuresC = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [ + [ + [203378.746386225,223128.8409393716],[203829.29346826847,220433.98470741537],[204326.26916654778,220397.60460303526],[205154.64095724496,218053.17972652038],[206016.8866873387,215716.94037349097],[207035.47367618568,215319.7605839212],[206473.59266745427,215048.27405498468],[206394.47451529733,214352.50455871515],[205748.73774050735,214151.95923331982],[205563.73391764934,213697.11697830757],[205313.11414225397,213726.4939125945],[205258.15782099523,213157.32717956777],[204729.6769902702,213115.2172087478],[204799.7936760141,213384.33903089963],[204199.30111398452,213359.60055992115],[204139.84405951927,213006.53164691222],[203650.9223048727,213002.07508412568],[203346.53061169403,212771.51617261674],[203012.76571232532,212852.2800043406],[202865.6628006802,212681.475414276],[201739.76885696166,213534.22506094567],[201499.09807075968,213134.86246511305],[197965.54874224094,212308.57934437992],[197591.98788609868,212362.7856999063],[197045.97788393768,212273.74539443597],[196594.4832791139,210022.08978409035],[197014.23587079687,208621.2738649344],[197426.64516093236,207778.34684644738],[197854.21481555302,207355.61003355056],[198507.5317725856,207488.21551401605],[198448.54847951047,207200.53983863036],[199375.6995200563,207064.56919850974],[199556.2026097078,206577.62150138203],[199347.27383664664,206346.97163961217],[199530.382613944,205064.30010943062],[199768.4477125001,205465.7545612651],[200169.24984857664,205555.97722012774],[200155.51076826197,205746.88181786233],[201129.3273057387,205677.57771901824],[201956.2778122654,205876.5768899774],[201967.88496632437,206139.60504464558],[202385.7425124467,206244.74354630406],[203342.74052057273,207493.39967889022],[203518.74287701768,207773.16268157322],[203447.20490710333,208223.63932405988],[203175.0289884556,208603.90236509292],[203535.7982870635,208675.3892701998],[203434.88711095913,209033.460447561],[204341.42953103295,208744.69336904393],[205058.46739504221,208879.57260603315],[205004.2217158687,209137.5075460881],[206058.5776896729,209031.641442342],[206114.00777232178,209353.33251532307],[205387.02091911912,210332.3211241917],[206869.18342823905,210762.69775900833],[206905.42617458638,210535.41305689362],[207745.8788807327,210621.27010323066],[207810.54731048972,210242.73511715568],[206885.5281961996,209266.2021653327],[206673.75685479745,208850.65042305097],[206635.85594358455,208298.67328934383],[207066.50504724125,208715.95308658364],[207611.80440731702,208921.04592502647],[209418.2565880024,208659.38202427258],[209934.8933839734,208794.17031100087],[209946.97429942252,210322.49849600907],[209305.50137714398,211092.21055443113],[209290.10413196374,211613.81030098087],[209098.70453033855,212631.63467127527],[209158.87222688904,215579.51452919515],[210668.27601594324,217185.6051873158],[209827.11266771168,217943.12991077054],[210910.6049670108,222067.9061453868],[207964.51976229218,223974.86026673095],[207710.1098957755,223715.92487380555],[206077.2912645843,223187.50385768455],[205356.4633094537,222573.86244705314],[203378.746386225,223128.8409393716] + + ], + ], + }, + properties: { label: 'Retie'}, + }, + ], + }; + + function randomcolor () { + var o = Math.round, r = Math.random, s = 255; + return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')'; + } + + return analysis({ + children: html` + + + +
+
+
+ +

Gemeenten op kaart

+
+ +
+
+
+ +

Aantal toezichthouders

+
+
+
+
+ `, + title: "GemeentenAnalyseView", + }); + } + + createRenderRoot() { + return this; + } +} +customElements.define("gemeentenanalyse-view", GemeentenAnalyseView); diff --git a/src/views/gewestelijk.js b/src/views/gewestelijk.js new file mode 100644 index 0000000..f7b1be4 --- /dev/null +++ b/src/views/gewestelijk.js @@ -0,0 +1,169 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/legacy/tabs"; +import { page } from "../templates/page"; + +export class Gewestelijk extends LitElement { + render() { + return page({ + children: html` +
+
+
+
+

+ Gewestelijke handhavingsactoren +

+

+ Verschillende gewestelijke actoren hebben handhavingsbevoegdheden ten aanzien van de milieuregelgeving en/of de regelgeving inzake ruimtelijke ordening. +

+
+
+ +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Gewestelijke actoren +
HandhavingsactorBevoegdheden
Afdeling Handhaving, Departement OmgevingMilieu + | Ruimtelijke ordening +
Agentschap voor Natuur en BosMilieu en Ruimtelijke ordening
Vlaamse LandmaatschappijMilieu
Openbare Vlaamse AfvalstoffenmaatschappijMilieu
Afdeling Gebiedsontwikkeling, Omgevingsplanning en -projecten, Departement OmgevingMilieu
Vlaams Planbureau voor Omgeving, Departement OmgevingMilieu
Departement Mobiliteit en Openbare WerkenMilieu
Vlaams Agentschap Zorg en GezondheidMilieu
De Vlaamse WaterwegMilieu
Agentschap Wonen Vlaanderen - afdeling Woonkwaliteit -Vlaamse WooninspectieRuimtelijke ordening
Agentschap Maritieme Dienstverlening en KustMilieu
Agentschap Wegen en VerkeerMilieu
Vlaams Energie- en KlimaatagentschapMilieu
+
+
+
+ +

Analyseer de cijfers

+
+ In de individuele handhavingsfiches wordt gerapporteerd over de uitvoering van hun handhavingsactiviteiten in het voorgaand jaar. Klik op analyseer de cijfers om de data van de individuele gewestelijke handhavingsactoren te raadplegen. +
+
+
+
+

+

+ In onderstaande weergave worden de gegevens van de gewestelijke handhavingsactoren gebundeld om zo een globaal beeld te krijgen van de handhavingsactiviteiten aangaande het DABM en de VCRO op gewestelijk niveau. +

+

+
+
`, + title: "Gewestelijk", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("gewestelijk-view", Gewestelijk); diff --git a/src/views/gewestelijkAnalyse.js b/src/views/gewestelijkAnalyse.js new file mode 100644 index 0000000..d23109b --- /dev/null +++ b/src/views/gewestelijkAnalyse.js @@ -0,0 +1,761 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { analysis } from "../templates/analysis"; +import { embed, useEffect } from "@nebula.js/stardust"; + +export class GewestelijkAnalyseView extends LitElement { + render() { + return analysis({ + children: html + ` + + +
+
+
+
+

Een wegwijzer doorheen de cijfers en grafieken

+

+ Deze pagina toont een inzichtelijke beeld over de cijfers van gewestelijke handhavingsactoren. + De grafieken zijn volledig interactief en de cijfers zullen worden gewijzigd naargelang de gekozen filtering. + Uw aangeduide filtering kan op elk moment verwijderd worden met de selectiebalk hieronder. +

+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ + Hierboven staan uw actieve selecties op de pagina en zullen de cijfers aangepast worden op basis van + de geselecteerde + gewestelijke handhavingsactor. Dit selectiebalk is interactief en u kunt selecties aanpassen of + toevoegen. + + + + + In de filterpaneel staan de mogelijke selecties dat u kunt uitvoeren op de pagina. + U kunt meerdere gewestelijke handhavingsactoren aanduiden en de cijfers en grafieken zullen + aangepast worden + op basis van uw selecties. + +
+
+
+
+ + + +
+
+
+
+

Cijfers voor milieuhandhaving

+
+
+
+
+ + In deze sectie worden de aantal gewestelijke toezichthouders aangegeven met de totaal aantal besteed + aan VTE. + De grafiek toont de verdeling aan van de VTE toezicthouders ten opzichte van de administratieve en + jurisdische ondersteuning. + +
+
+ +
+
+ + Aantal toezichthouders +
+ +
+
+
+
+
+ + Totaal VTE +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ + Verdeling van VTE toezichthouders en administratieve en juridische ondersteuning + +
+
+
+
+
+
+
+
+ +
+
+
+
+ + De klachten voor milieu worden onderverdeeld in negen milieucategoriën. + In de grafiek wordt de verdeling van de totale hoeveelheid klachten onderverdeeld in de + overeenkomstige milieucategoriën. + +
+
+ +
+
+ + + Aantal klachten + +
+ +
+
+
+
+
+ + Aantal klachten per milieucategorie + +
+
+
+
+
+
+ + +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + De grafiek wordt toont de verdeling van controles per controletype. + +
+
+ +
+
+ + Aantal controles + + +
+ +
+
+
+
+
+ Verdeling controles per categorie +
+
+
+
+
+
+ +
+
+ + Hierbij worden de controles weergegeven met een overtreding. De grafiek toont aan + de cateogriën met de meeste overtredingen. + +
+
+ +
+
+ + Verdeling controles per categorie +
+ +
+
+
+
+ +
+ + Verdeling controles per categorie +
+
+
+
+
+
+ +
+
+ + De instrumentarium is een verzameling van verschillende handelingen die worden uitgevoerd in kader + van milieuhandhaving. + + +
+
+ +
+
+ + Raadgeving +
+ +
+
+
+
+ +
+ + Aanmaning +
+ +
+
+
+
+ +
+
+
+ + Verslag van vaststelling +
+ +
+
+
+
+
+ + Proces-verbaal +
+ +
+
+
+
+
+ +
+
+ + Bestuurlijk maatregel +
+ +
+
+
+
+
+ Bestuurlijk maatregel met dwangsom + +
+ +
+
+
+
+
+ +
+
+ + Bestuurlijk maatregel zonder dwangsom +
+ +
+
+
+
+ +
+ Bestuurlijk maatregel zonder dwangsom + +
+ +
+
+
+
+
+ +
+
+ Veiligheidsmaatregel +
+ +
+
+
+
+ +
+ Veiligheidsmaatregel + +
+ +
+
+
+
+
+ +
+
+ Overtredingsgraad + +
+ +
+
+
+
+
+
+
+ +
+
+
+

Cijfers voor ruimtelijke ordening

+
+ +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + +
+
+ +
+
+ + Verbalitisanten + +
+
+
+
+
+ +
+ + Stedenbouwkundige inspecteurs + +
+
+ + + +
+
+
+ +
+ + + + + +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + +
+
+ +
+
+ Totaal VTE + + +
+
+
+
+
+
+ Totaal VTE + + +
+
+
+
+
+
+ + + + +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + +
+
+ +
+
+ Klachten + + +
+
+
+
+
+
+ Controles + + +
+
+
+
+
+
+ Aanvankelijke controles met overtreding + + +
+
+
+
+
+
+ +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + +
+
+ + +
+ + +
+ Verdeling van controles + + +
+
+
+
+
+
+ +
+
+ + Hieronder bevindt zich een overzicht van de cijfers voor de controles van de + omgevingshandhavingsrapportage. + +
+
+ + +
+
+ Raadgeving + + +
+
+
+
+
+ +
+ Aanmaning + + +
+
+
+
+
+
+ +
+
+ Verslag van vaststelling + + +
+
+
+
+
+
+ Proces-verbaal + + +
+
+
+
+
+
+ + +
+
+ +
+ + Bestuurlijk maatregel +
+
+ +
+
+ + Bestuurlijk maatregel zonder dwangsom +
+
+
+
+
+
+ Bestuurlijk maatregel zonder + dwangsom + +
+
+
+
+
+
+
+
+
+ Bestuurlijk maatregel met + dwangsom + + +
+
+
+
+
+ +
+ Bestuurlijk maatregel met + dwangsom + + +
+
+
+
+
+ +
+
+
+
+
+ +
+ + + +
+ +
+
+
+
+

Ga naar de volgende analyse

+ +

+ Provinciaal + Gemeentelijk + Strafrechtelijk en bestuurlijk + vervolgtraject +

+
+
+
+
+
+ `, + title: "GewestelijkAnalyseView", + }); + } + createRenderRoot() { + return this; + } +} +customElements.define("gewestelijkanalyse-view", GewestelijkAnalyseView); diff --git a/src/views/home.js b/src/views/home.js new file mode 100644 index 0000000..2806b8a --- /dev/null +++ b/src/views/home.js @@ -0,0 +1,95 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { page } from "../templates/page"; +import { embed } from '@nebula.js/stardust'; +export class Home extends LitElement { + render() { + /* + */ + return page({ + children: html` +
+
+
+
+

+ Omgevingshandhavingsrapportage +

+ +

+ Het decreet van 5 april 1995 houdende algemene bepalingen inzake milieubeleid (DABM) bepaalt in artikel + 16.2.3 dat gegevens over de omgevingshandhavingsuitvoering jaarlijks online worden gepubliceerd. +
Deze data bevatten een input- en outputweergave (handhavingsfiche) van de handhavingsactiviteiten in + het kader van het DABM en de Vlaamse Codex Ruimtelijke Ordening (VCRO) van de handhavingsactoren in het + Vlaamse gewest in het afgelopen jaar en hebben betrekking op de personele middelen die worden ingezet voor + de handhavingsuitvoering en de inzet van de instrumenten die de handhavers ter beschikking hebben + (controles, processen-verbaal, aanmaningen, …).Daarnaast worden ook data ter beschikking gesteld + over de sanctionering, o.a. afkomstig van de parketten bij de rechtbanken van eerste aanleg en de + gewestelijke beboetingsentiteit die instaat voor de bestuurlijke beboeting. Dit geeft een beeld over het + verdere traject van de instrumenten proces-verbaal en verslag van vaststelling. +

Jaarlijks worden de handhavingsactoren in het Vlaamse Gewest op uniforme en gestandaardiseerde + wijze bevraagd aangaande hun handhavingsactiviteiten in het voorgaande kalanderjaar. +

+

+ De data gepresenteerd in deze omgevingshandhavingsrapportage zijn de gegevens zoals ze worden aangeleverd + door de handhavingsactoren zelf op basis van hun eigen monitoring.
De handhavingsactoren worden + gevraagd “niet gekend” in te geven indien de gevraagde data niet beschikbaar zijn. Indien de gevraagde + gegevens niet worden ingevuld, wordt automatisch “niet gekend” ingevuld. Indien de handhavingsactor niet + ingaat op de bevraging, wordt deze actor als een non-respons weergegeven. +

Deze bevraging levert geen 100% responsgraad op, hetgeen implicaties heeft op de + interpreteerbaarheid van de cijfergegevens. Wanneer totalen worden getoond, betreft dit steeds de + gerapporteerde en enkel de gekende aantallen. Bij analyses van de data dient rekening te worden gehouden met + deze beperking. +

+ +

+ De jaarlijkse invoer van de cijfers wordt verwacht in de periode april-juni. De gepresenteerde data hebben + dan betrekking op het voorgaande kalenderjaar en op de handhavingsactiviteiten tussen 1 januari en 31 + december.
Wanneer evoluties over meerdere jaren worden getoond, worden de jaartallen vermeld. + De legende van de gebruikte iconen kan hier worden teruggevonden. + In onderstaande infographic wordt de omgevingshandhavingsuitvoering in het Vlaamse Gewest in het + voorbijgaande jaar in een notendop weergegeven. +

+ + +

+
+
+ +
+
+ +
+
+ ` + , + title: "Omgevingshandhavingsrapportage 2021", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("home-view", Home); diff --git a/src/views/map/hybrid.js b/src/views/map/hybrid.js new file mode 100644 index 0000000..44d050c --- /dev/null +++ b/src/views/map/hybrid.js @@ -0,0 +1,65 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/map"; +import Feature from "ol/Feature"; +import Point from "ol/geom/Point"; +import { ref, createRef } from "lit/directives/ref.js"; +import { + OlVectorSource, + OlVectorLayer +} from "vl-mapactions/dist/vl-mapactions.js"; +import { Circle, Fill, Style, Text } from "ol/style"; + +export class HybridMap extends LitElement { + constructor() { + super(); + this.mapRef = createRef(); + } + + firstUpdated() { + const map = this.mapRef.value; + map.ready.then(() => { + debugger; + const featuresLayer = new OlVectorLayer({ + source: new OlVectorSource({ + features: [ + new Feature({ + geometry: new Point([184189.45, 189395.79]), + }), + ], + }), + style: new Style({ + image: new Circle({ + fill: new Fill({ + color: "#AD3E00", + }), + radius: 50, + }), + text: new Text({ + font: "bold 14px Flanders Art Sans,sans-serif", + fill: new Fill({ color: "#fff" }), + text: "B", + }), + }), + }); + + map.addLayer(featuresLayer); + map.map.getView().fit(featuresLayer.getSource().getExtent(), { + maxZoom: 4, + }); + }); + } + + render() { + return html` + + + + `; + } + + createRenderRoot() { + return this; + } +} + +customElements.define("hybrid-map", HybridMap); diff --git a/src/views/map/index.js b/src/views/map/index.js new file mode 100644 index 0000000..8aa3dac --- /dev/null +++ b/src/views/map/index.js @@ -0,0 +1,28 @@ +import { LitElement, html } from "lit-element"; +import { page } from "../../templates/page"; +import "./hybrid"; +import "./native"; + +export class MapView extends LitElement { + render() { + return html` + ${page({ + children: html` +
+ +
+
+ +
+ `, + title: "Map", + })} + `; + } + + createRenderRoot() { + return this; + } +} + +customElements.define("map-view", MapView); diff --git a/src/views/map/native.js b/src/views/map/native.js new file mode 100644 index 0000000..efe44c8 --- /dev/null +++ b/src/views/map/native.js @@ -0,0 +1,103 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/map"; +import Map from "ol/Map"; +import VectorLayer from "ol/layer/Vector"; +import VectorSource from "ol/source/Vector"; +import View from "ol/View"; +import "ol/ol.css"; +import TileLayer from "ol/layer/Tile"; +import Feature from "ol/Feature"; +import Point from "ol/geom/Point"; +import XYZ from "ol/source/XYZ"; +import { Circle, Fill, Style, Text } from "ol/style"; +import { ref, createRef } from "lit/directives/ref.js"; +import { styleMap } from "lit/directives/style-map.js"; + +export class NativeMap extends LitElement { + static properties = { + // map: {}, + // featuresLayer: {}, + features: {}, + }; + + constructor() { + super(); + this.mapRef = createRef(); + this.features = [ + new Feature({ + geometry: new Point([210000, 190000]), + }), + ]; + this.featuresLayer = new VectorLayer({ + source: new VectorSource(), + style: new Style({ + image: new Circle({ + fill: new Fill({ + color: "#AD3E00", + }), + radius: 11, + }), + text: new Text({ + font: "bold 14px Flanders Art Sans,sans-serif", + fill: new Fill({ color: "#fff" }), + text: "B", + }), + }), + }); + } + + firstUpdated() { + const map = new Map({ + layers: [ + new TileLayer({ + source: new XYZ({ + url: "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}", + }), + }), + this.featuresLayer, + ], + target: this.mapRef.value, + view: new View({ + center: [0, 0], + zoom: 2, + }), + }); + this.map = map; + } + + updated(changedProperties) { + changedProperties.forEach((oldValue, propName) => { + switch (propName) { + case "features": + if (this.features.length > 0 && this.map) { + this.featuresLayer.setSource( + new VectorSource({ + features: this.features, + }) + ); + this.map.getView().fit(this.featuresLayer.getSource().getExtent(), { + maxZoom: 4, + }); + } + break; + default: + break; + } + }); + } + + render() { + return html` +
+ `; + } + + createRenderRoot() { + return this; + } +} + +customElements.define("native-map", NativeMap); diff --git a/src/views/provinciaal.js b/src/views/provinciaal.js new file mode 100644 index 0000000..b08ef17 --- /dev/null +++ b/src/views/provinciaal.js @@ -0,0 +1,107 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/legacy/tabs"; +import { page } from "../templates/page"; + +export class Provinciaal extends LitElement { + render() { + return page({ + children: html` +
+
+
+
+

+ Provinciale handhavingsactoren +

+ +

+ De provincies hebben handhavingsbevoegdheden ten aanzien van de milieuregelgeving. De provinciegouverneur of zijn plaatsvervanger is in bepaalde gevallen bevoegd voor het opleggen van bestuurlijke maatregelen en kan veiligheidsmaatregelen nemen in geval van een aanzienlijk risico voor mens of milieu. De provinciale toezichthouders oefenen daarnaast het toezicht uit op de toepassing van specifieke milieuvoorschriften. + In de individuele handhavingsfiches wordt per provincie gerapporteerd over de uitvoering van hun handhavingsactiviteiten in het voorgaand jaar. Zie analyseer cijfers om de data van de individuele provincies te raadplegen. +

+
+
+ +
+
+
+ +
+
+
+
+ +

Analyseer de cijfers

+
+ In de individuele handhavingsfiches wordt gerapporteerd over de uitvoering van hun handhavingsactiviteiten in het voorgaand jaar. Klik op analyseer de cijfers om de data van de individuele gewestelijke handhavingsactoren te raadplegen. +
+
+
+
+
+ +
+
+
+
+

+ In onderstaande weergave worden de gegevens van de provinciale handhavingsactoren gebundeld om zo een globaal beeld te krijgen van de handhavingsactiviteiten aangaande het DABM op provinciaal niveau. + +

+
+
+
+
`, + title: "Provinciaal", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("provinciaal-view", Provinciaal); diff --git a/src/views/provinciaalAnalyse.js b/src/views/provinciaalAnalyse.js new file mode 100644 index 0000000..8e9b61f --- /dev/null +++ b/src/views/provinciaalAnalyse.js @@ -0,0 +1,452 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { analysis } from "../templates/analysis"; +import { embed } from '@nebula.js/stardust'; +export class ProvinciaalAnalyseView extends LitElement { + render() { + return analysis({ + children: html` + + + + +
+
+
+
+
+
+

Cijfers voor provinciale handhavingsactoren

+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + Hierboven staan uw actieve selecties op de pagina en zullen de cijfers aangepast + worden op basis van de geselecteerde + gewestelijke handhavingsactor. Dit selectiebalk is interactief en u kunt selecties + aanpassen of toevoegen. + + + In de filterpaneel staan de mogelijke selecties dat u kunt uitvoeren op de pagina. + U kunt meerdere gewestelijke handhavingsactoren aanduiden en de cijfers en grafieken + zullen aangepast worden + op basis van uw selecties. + +
+
+
+ +
+
+
+ + +
+
+
+ +
+ + Provinciegouverneur +
+ + + + + + Bestuurlijke maatregelen +
+ +
+
+
+ + + + + + Bestuurlijke maatregelen zonder dwangsom +
+ +
+
+
+ + + + + Bestuurlijke maatregelen met dwangsom +
+ +
+
+
+ + + + + Veiligheidsmaatregel +
+ +
+
+
+
+
+
+
+ + Aantal toezichthouders +
+ +
+ +
+
+ + Totaal VTE +
+ +
+
+
+
+
+ + Totaal VTE +
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+ + Aantal klachten +
+ +
+
+
+
+ +
+ + Verdeling van aantal klachten per categorie +
+ +
+
+
+
+
+
+ +
+
+
+ + +
+
+
+
+ + Totaal VTE +
+ +
+
+
+
+ +
+ + Totaal VTE +
+ +
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+
+ + Aanvankelijke controles met schending +
+ +
+
+
+
+ +
+ + Verdeling aanvankelijke controles met schending +
+ +
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+
+ + Raadgeving +
+ +
+
+
+
+
+ + Aanmaning +
+ +
+
+
+
+
+ + Verslag van vaststelling +
+ +
+
+
+
+
+ + Proces-verbaal +
+ +
+
+
+
+
+ +
+
+ + Bestuurlijke maatregel +
+ +
+
+
+
+ + +
+
+ + Veiligheidsmaatregel +
+ +
+
+
+
+
+ + Veiligheidsmaatregel +
+ +
+
+
+
+ +
+ +
+
+

Andere beschikbare analyses

+
+ +
+
+ +
+
+ + + + + + +
+ + +
+
+
+ +
+
+
+
+ `, + title: "ProvinciaalAnalyseView", + }); + } + + createRenderRoot() { + return this; + } +} +customElements.define("provinciaalanalyse-view", ProvinciaalAnalyseView); diff --git a/src/views/start.js b/src/views/start.js new file mode 100644 index 0000000..fbb6b6b --- /dev/null +++ b/src/views/start.js @@ -0,0 +1,102 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/legacy/tabs"; +import { page } from "../templates/page"; + +export class Start extends LitElement { + + render() { + return page({ + children: html` +
+
+
+
+

+ Een kijkje naar de handhavingsactiviteiten van 2021 +

+
+ +
+ Autoloze zondag in Brussel + +
+ + + +
+ + +
+
+ +

Spring direct naar de cijfers

+
+
+ +

Analyseer de cijfers voor gewestelijke actoren

+
+ In dit analyse worden de handhavingsactiviteiten van de gewestelijke handhavingsactoren in kaart gebracht. +
+
+
+
+ +

Analyseer de cijfers voor provinciale actoren

+
+ In dit analyse worden de handhavingsactiviteiten van de provinciale handhavingsactoren in kaart gebracht. +
+
+
+ +

Analyseer de cijfers voor de gemeenten

+
+ In dit analyse worden de handhavingsactiviteiten van de gemeentelijke handhavingsactoren in kaart gebracht. +
+
+
+
+
+ +
+
+
+ + + + +
+
+
+ + + `, + title: "Start", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("start-view", Start); diff --git a/src/views/strafrechtelijk.js b/src/views/strafrechtelijk.js new file mode 100644 index 0000000..870136e --- /dev/null +++ b/src/views/strafrechtelijk.js @@ -0,0 +1,69 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { analysis } from "../templates/analysis"; +import { embed } from '@nebula.js/stardust'; +import { page } from "../templates/page"; +export class StrafrechtelijkAnalyseView extends LitElement { + render() { + return page({ + children: html` +
+
+
+
+ +

Strafrechtelijk en bestuurlijk vervolgtraject

+

+ In deze datasets wordt het verdere verloop van twee handhavingsinstrumenten weergegeven: +

+
    +
  • Het proces-verbaal dat werd opgemaakt bij de vaststelling van een misdrijf en dat wordt overgemaakt aan de parketten bij de rechtebanken van eerste aanleg met het oog op een strafrechtelijke afhandeling
  • +
  • + het verslag van vastelling dat werd opgemaakt bij de vastelling van een inbreuk en dat wordt overgemaakt aan de gewestelijke beboetingsentiteit met het oog op een bestuurlijke afhandeling. +
  • +
+

Rudimentaire schematische voorstelling van deze trajecten:

+
+
+ + +
Proces-verbaal
Proces-verbaal
Parketten bij de rechtbanken van eerste aanleg
Parketten bij de rechtbank...
Verslag van vastelling
Verslag van vastelli...
Gewestelijke beboetingsentiteit (GBE)
Gewestelijke beboetingsent...
Handhavingscollege (HHC)
Handhavingscollege (HHC)
door handhaver overgemaakt aan het parket 
met oog op strafrechtelijke afhandeling
door handhaver overgemaakt aan het parket...
door handhaver overgemaakt aan de GBE
met oog op bestuurlijke afhandeling
door handhaver overgemaakt aan de GBE...
Het parket kan (al het dit niet zelf wenst te 
behandelen) een proces-verbaal overmaken
aan GBE met het oog op het opleggen van
een alternatieve bestuurlijke geldboete

Het parket kan (al het dit niet zelf wens...
Als de GBE een alternatieve of exclusieve 
bestuurlijke geldboete heeft opgelegd, kan hier 
tegen in beroep worden gegaan bij het HHC
Als de GBE een alternatieve of exclusieve...
Text is not SVG - cannot display
+
+
+ + +

Bekijk de cijfers voor strafrechtelijk en bestuurlijk vervolgtraject

+
+
+
+

Openbaar ministerie

+ + PDF + Duiding bij de statische bijdrage + PDF - 580 kB + +
+
+

Instroom - herkomst

+
+
+
+

Instroom - thematisch

+
+
+
+
+
+ `, + title: "StrafrechtelijkAnalyseView", + }); + } + + createRenderRoot() { + return this; + } +} +customElements.define("strafrechtelijkanalyse-view", StrafrechtelijkAnalyseView); diff --git a/src/views/strafrechtelijktest.js b/src/views/strafrechtelijktest.js new file mode 100644 index 0000000..2a275e5 --- /dev/null +++ b/src/views/strafrechtelijktest.js @@ -0,0 +1,223 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/components/doormat"; +import "uig-webcomponents/lib/components/doormat/styles.css"; +import { analysis } from "../templates/analysis"; +import { embed } from '@nebula.js/stardust'; +import { page } from "../templates/page"; +export class StrafrechtelijktestView extends LitElement { + render() { + return page({ + children: html` +
+
+
+
+
+
+

Strafrechtelijk en bestuurlijk vervolgtraject

+
+ +
+

Over de cijfers en procedure

+ +

+ In deze datasets wordt het verdere verloop van twee handhavingsinstrumenten weergegeven: +

+
    +
  • Het proces-verbaal dat werd opgemaakt bij de vaststelling van een misdrijf en dat wordt overgemaakt aan de parketten bij de rechtebanken van eerste aanleg met het oog op een strafrechtelijke afhandeling
  • +
  • + het verslag van vastelling dat werd opgemaakt bij de vastelling van een inbreuk en dat wordt overgemaakt aan de gewestelijke beboetingsentiteit met het oog op een bestuurlijke afhandeling. +
  • +
+

Rudimentaire schematische voorstelling van deze trajecten:

+
+ + + + + + + + +
+
Proces-verbaal
Proces-verbaal
Parketten bij de rechtbanken van eerste aanleg
Parketten bij de rechtbank...
Verslag van vastelling
Verslag van vastelli...
Gewestelijke beboetingsentiteit (GBE)
Gewestelijke beboetingsent...
Handhavingscollege (HHC)
Handhavingscollege (HHC)
door handhaver overgemaakt aan het parket 
met oog op strafrechtelijke afhandeling
door handhaver overgemaakt aan het parket...
door handhaver overgemaakt aan de GBE
met oog op bestuurlijke afhandeling
door handhaver overgemaakt aan de GBE...
Het parket kan (al het dit niet zelf wenst te 
behandelen) een proces-verbaal overmaken
aan GBE met het oog op het opleggen van
een alternatieve bestuurlijke geldboete

Het parket kan (al het dit niet zelf wens...
Als de GBE een alternatieve of exclusieve 
bestuurlijke geldboete heeft opgelegd, kan hier 
tegen in beroep worden gegaan bij het HHC
Als de GBE een alternatieve of exclusieve...
Text is not SVG - cannot display
+
+ + +
+

Bekijk de cijfers

+
+ +

Openbaar ministerie

+ Hieronder kan u de bestand downloaden in PDF formaat van de duiding van strafrechtelijk + + PDF + Duiding bij de statische bijdrage + PDF - 580 kB + +
+ +
+
+

Instroom - herkomst

+
+ +
+

Instroom - herkomst

+
+
+

Instroom - herkomst

+
+
+

Instroom - herkomst

+
+ + + +
+
+ +
+ +

Gewestelijke beboetingsentiteit en bestuurlijke geldboeten

+

Navigeer naar de externe pagina's

+ +
+
+ +
+

Instroom

+
+
+ +
+

Behandeling - algemeen

+
+
+ +
+

Behandeling - Thematisch

+ +
+ +
+

Handhavingscollege - beroepen tav bestuurlijke geldboeten

+ +
+ +
+ +
+
+
+
+ +
+
+
+
+ `, + title: "StrafrechtelijktestView", + }); + } + + createRenderRoot() { + return this; + } +} +customElements.define("strafrechtelijktest-view", StrafrechtelijktestView); diff --git a/src/views/toegankelijkheid.js b/src/views/toegankelijkheid.js new file mode 100644 index 0000000..7d78427 --- /dev/null +++ b/src/views/toegankelijkheid.js @@ -0,0 +1,24 @@ +import { LitElement, html } from "lit-element"; +import { page } from "../templates/page"; +export class Toegankelijkheid extends LitElement { + + render() { + return page({ + childeren: html` + +

Test

+ +
` + , + title: "Toegankelijkheid", + }); + } + + + createRenderRoot() { + return this; + } + +} +customElements.define("toegankelijkheid-view", Toegankelijkheid); diff --git a/src/views/upload.js b/src/views/upload.js new file mode 100644 index 0000000..4ed376b --- /dev/null +++ b/src/views/upload.js @@ -0,0 +1,29 @@ +import { LitElement, html } from "lit-element"; +import "uig-webcomponents/lib/legacy/upload"; +import "vl-ui-alert"; +import { page } from "../templates/page"; + +export class UploadView extends LitElement { + render() { + return page({ + children: html`
+ +
+
+ +

Test

+
+
`, + title: "Upload", + }); + } + + createRenderRoot() { + return this; + } +} + +customElements.define("upload-view", UploadView);