Wahlen眉bersicht

<!DOCTYPE html> <html lang="de"> <head> <title>Wahlen眉bersicht</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv='X-UA-Compatible' content='IE=11'> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'> <meta http-equiv='expires' content='Mon, 26 Jul 1997 05:00:00 GMT'> <meta http-equiv='cache-control' content='no-cache, must-revalidate'> <meta http-equiv='pragma' content='no-cache'> <link rel="SHORTCUT ICON" href="img/favicon.png" type="image/x-icon"> <link rel="icon" href="img/favicon.png" type="image/x-icon"> <link type="image/x-icon" href="img/favicon.png" /> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/app.css"> <link rel="stylesheet" type="text/css" href="../api/praesentation/eigene.css"> </head> <body> <div class="container" role="main" id="vue_index_container"> <komponente_menu_wahltermin></komponente_menu_wahltermin> <div class="row"> <div class="col-md-8 col-sm-12"> <div class="card mb-4" v-for="wahleintrag in wahleintraege" :key="wahleintrag.wahl.id+'_'+wahleintrag.gebiet_link.id+'_'+wahleintrag.stimmentyp.id"> <div class="card-body"> <h4 class="card-title">{{wahleintrag.wahl.titel}} <small>{{getZusatzbezeichnungWahleintrag(wahleintrag)}}</small> </h4> <div :id="previewId(wahleintrag)" class="mt-1" style="height:250px"><canvas></canvas></div> <div class="web-init-info d-none"> <div class="alert alert-warning m-2"> Es liegen noch keine Schnellmeldungen vor! </div> </div> <div class="p-2 pl-3"><a class="card-link text-decoration-none" href="#" v-on:click="navigate(wahleintrag,$event)" :title="wahleintrag.wahl.titel">mehr ... </a> </div> </div> </div> <komponente_eigener_text :text="eigener_text"> </komponente_ergebnis_grafik> </div> <div class="col-md-4 col-sm-12"> <div class="list-group mb-4"> <a class="list-group-item list-group-item-action" v-for="link in links" :href="link.url"> <h4 class="list-group-item-heading">{{link.titel}}</h4> <div>{{link.text}} </div> </a> </div> <div v-if="neuste_ergebnisse.length > 0" class="list-group mb-4"> <div class="list-group-item pb-0 bg-light"> <h5>Neueste Ergebnisse</h5> </div> <div class="list-group-item" v-for="ergebnis in neuste_ergebnisse"> <div class="row"> <div class="text-center col-auto"> <div>{{ergebnis.datum.substring(0,6)}}</div> <div class="fw-light" style="line-height:16px"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" style="padding: 0 2px 3px 0"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" /> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" /> </svg>{{ergebnis.datum.substring(11)}} </div> </div> <div class="col"> <b>{{ergebnis.titel}}</b> <br> <a href="#" v-on:click="goToNeusteErgebnisBezirk(ergebnis, $event)">{{ergebnis.bezirk}}</a> </div> </div> </div> </div> <div class="list-group mb-4"> <template v-if="behoerden_links"> <a v-if="behoerden_links.header" :href="behoerden_links.header.url" class="list-group-item list-group-item-action pb-0 bg-light"> <h5>{{behoerden_links.header.text}}</h5> </a> <template v-for="link in behoerden_links.links"> <a v-if="link.url" :href="link.url" class="list-group-item list-group-item-action">{{link.text}}</a> <span v-if="!link.url" class="list-group-item fw-light">{{link.text}}</span> </template> </template> </div> <div class="list-group mb-4"> <a v-for="link in eigene_seiten" :href="getLinkEigeneSeite(link)" class="list-group-item list-group-item-action">{{link.titel}}</a> </div> </div> </div> <komponente_footer> </komponente_footer> </div> <script type="text/javascript" src="vendor/jquery.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="vendor/vue.min.js"></script> <script type="text/javascript" src="vendor/httpVueLoader.js"></script> <script type="text/javascript" src="vendor/es6-promise.auto.min.js"></script> <script type="text/javascript" src="vendor/autocomplete.js"></script> <script type="text/javascript" src="vendor/Chart.bundle.min.js"></script> <script type="text/javascript" src="js/app.js"></script> <script> Praesentation.initApp(function () { document.title = Praesentation.Api.Termin.seitentitel; const vue_index = new Vue({ el: '#vue_index_container', data: { links: Praesentation.Api.Config.links, behoerden_links: Praesentation.Api.Config.behoerden_links, wahleintraege: Praesentation.Api.Termin.wahleintraege, umgebung: Praesentation.Api.Config.umgebung, neuste_ergebnisse: [], eigene_seiten: [], eigener_text: Praesentation.Api.Config.eigene_texte ? Praesentation.Api.Config.eigene_texte.behoerden_startseite : "" }, created: function () { var vue_object = this; $.getJSON(Praesentation.Path.ToNeusteErgebnisseJson(), function (data) { vue_object.neuste_ergebnisse = data.ergebnisse; //Print File-Infos 'VOT-19253 Praesentation.log("neueste_ergebnisse: " + JSON.stringify({ file_version: data.file_version, file_timestamp: data.file_timestamp, url: Praesentation.Path.ToNeusteErgebnisseJson() })); }); $.getJSON(Praesentation.Path.ToEigeneSeitenJson(), function (data) { vue_object.eigene_seiten = data.seiten; //Print File-Infos 'VOT-19253 Praesentation.log("eigene_seite: " + JSON.stringify({ file_version: data.file_version, file_timestamp: data.file_timestamp, url: Praesentation.Path.ToEigeneSeitenJson() })); }); var i; for (i = 0; i < this.wahleintraege.length; i++) { loadPreviewGrafik(vue_object.wahleintraege[i]); } }, methods: { navigate: function (wahleintrag, event) { event.preventDefault(); Praesentation.link(wahleintrag.gebiet_link, { wahl_id: wahleintrag.wahl.id, stimmentyp: wahleintrag.stimmentyp.id, } ) }, goToNeusteErgebnisBezirk: function (ergebnis, event) { event.preventDefault(); Praesentation.link(ergebnis.link, { wahl_id: ergebnis.wahl, stimmentyp: ergebnis.stimmentyp, ebene: ergebnis.ebene, gebiet_id: ergebnis.gebiet_id } ) }, getZusatzbezeichnungWahleintrag: function (wahleintrag) { return (wahleintrag.stimmentyp.titel.length > 0 ? " (" + wahleintrag.stimmentyp.titel + ")" : ""); }, getFormattedZeit: function (strDate) { var datum = new Date(strDate); var stunden = datum.getHours(); stunden = stunden < 10 ? "0" + stunden : stunden; var minuten = datum.getMinutes(); minuten = minuten < 10 ? "0" + minuten : minuten; return stunden + ":" + minuten; }, getFormattedDatum: function (strDate) { var datum = new Date(strDate); var monat = datum.getMonth(); monat = monat < 10 ? "0" + monat : monat; var tag = datum.getDay(); tag = tag < 10 ? "0" + tag : tag; return tag + "." + monat; }, previewId: function (wahleintrag) { return getPreviewId(wahleintrag); }, getLinkEigeneSeite: function (eigeneSeite) { return "eigene_seite.html?id=" + eigeneSeite.id; } }, components: Praesentation.Vue.ladeKomponenten(['menu_wahltermin', 'eigener_text']) }); }); function getPreviewId(wahleintrag) { return "vorschau_" + wahleintrag.wahl.id + "_" + wahleintrag.gebiet_link.id + "_" + wahleintrag.stimmentyp.id; } function loadPreviewGrafik(wahleintrag) { var wahl_id = wahleintrag.wahl.id; var id = wahleintrag.gebiet_link.id; var stimmentyp = wahleintrag.stimmentyp.id; $.getJSON(Praesentation.Path.ToErgebnisJson(wahl_id, id, stimmentyp), function (data) { if (data.Komponente) { readyFunction(wahleintrag, data); } else { webInitFunction(wahleintrag); } }).fail(function () { webInitFunction(wahleintrag); }); } function readyFunction(wahleintrag, data) { var ergebnis = data.Komponente.grafik; var labels = new Array(); var data = new Array(); var backgroundColor = new Array(); var tooltips = new Array(); $.each(ergebnis.balken, function (index, element) { data.push(element.prozentGerundet); labels.push([element.bezeichnung, element.prozentString]); backgroundColor.push(element.color); tooltips.push({ title: element.bezeichnung, label: element.bezeichnungAusfuehrlich, afterLabel: element.prozentString + " (" + element.wertString + ")" }); }); if (ergebnis.sonstige) { data.push(ergebnis.sonstige.prozentGerundet); labels.push(["Sonstige", ergebnis.sonstige.prozentString]); backgroundColor.push(ergebnis.sonstige.color); tooltips.push({ title: ergebnis.sonstige.bezeichnung, afterLabel: ergebnis.sonstige.prozentString + " (" + ergebnis.sonstige.wertString + ")", }); } var container = document.getElementById(getPreviewId(wahleintrag)); //Bei einer Balkendarstellung, ben枚togt die Grafik mehr H枚he if (ergebnis.isBalkenDarstellung) { var heightOfHeaderAndFooter = 200; var minHeightOfCanvas = ergebnis.balken.length * 30; container.style.height = (heightOfHeaderAndFooter + minHeightOfCanvas) + "px"; } var ctx = container.firstChild.getContext("2d"); new Chart(ctx, { type: ergebnis.isBalkenDarstellung ? "horizontalBar" : "bar", data: { labels: labels, datasets: [ { data: data, backgroundColor: backgroundColor, }, ], }, options: { maintainAspectRatio: false, legend: { display: false, }, title: { display: false, }, tooltips: { titleFontSize: 16, bodyFontSize: 14, displayColors: false, callbacks: { title: function (tooltipItem, data) { return tooltips[tooltipItem[0].index].title; }, label: function (tooltipItem, data) { return tooltips[tooltipItem.index].label; }, afterLabel: function (tooltipItem, data) { return tooltips[tooltipItem.index].afterLabel; }, }, }, scales: { xAxes: [ { ticks: { beginAtZero: true, }, scaleLabel: { display: true, labelString: ergebnis.footer, fontColor: "black", fontSize: 12, padding: { top: 10, }, }, }, ], yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, }, }); } function webInitFunction(wahleintrag) { //Es liegen noch keine Schnellmeldungen vor! $("#" + getPreviewId(wahleintrag)).parents().children(".web-init-info").removeClass("d-none"); $("#" + getPreviewId(wahleintrag)).addClass("d-none"); } </script> </body> </html>

CINXE.COM

Wahlen眉bersicht