253 lines
10 KiB
HTML
253 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
|
||
|
|
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
||
|
|
<style>
|
||
|
|
.dropbtn {
|
||
|
|
background-color: #3498DB;
|
||
|
|
color: white;
|
||
|
|
padding: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.dropbtn:hover, .dropbtn:focus {
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
background-color: #f1f1f1;
|
||
|
|
min-width: 160px;
|
||
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content a {
|
||
|
|
color: black;
|
||
|
|
padding: 12px 16px;
|
||
|
|
text-decoration: none;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown-content a:hover {background-color: #ddd}
|
||
|
|
|
||
|
|
.show {display:block;}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
function changeName(name, suffix){
|
||
|
|
document.getElementById("all"+suffix).classList.replace("is-primary", "is-dark");
|
||
|
|
for (i = 2013; i <= 2019; i++)
|
||
|
|
document.getElementById(i+suffix).classList.replace("is-primary", "is-dark");
|
||
|
|
|
||
|
|
|
||
|
|
if(name == "salvini") {
|
||
|
|
document.getElementById("all"+suffix).disabled = false;
|
||
|
|
for (i = 2013; i <= 2019; i++)
|
||
|
|
document.getElementById(i+suffix).disabled = false;
|
||
|
|
} else {
|
||
|
|
document.getElementById("all"+suffix).disabled = true;
|
||
|
|
for (i = 2013; i <= 2019; i++)
|
||
|
|
document.getElementById(i+suffix).disabled = true;
|
||
|
|
}
|
||
|
|
if(name == "renzi"){
|
||
|
|
document.getElementById("all"+suffix).disabled = false;
|
||
|
|
document.getElementById("2019"+suffix).disabled = false;
|
||
|
|
document.getElementById("2018"+suffix).disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function managePolitician(name, suffix){
|
||
|
|
var other = "";
|
||
|
|
if(name == "renzi") other = "salvini";
|
||
|
|
else if(name == "salvini") other = "renzi";
|
||
|
|
document.getElementById(other+"-btn"+suffix).classList.replace("is-primary", "is-dark");
|
||
|
|
document.getElementById(name+"-btn"+suffix).classList.replace("is-dark", "is-primary");
|
||
|
|
changeName(name, suffix);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updatePage(year, suffix){
|
||
|
|
const is_salvini = document.getElementById("salvini-btn").classList.contains("is-primary");
|
||
|
|
const is_renzi = document.getElementById("renzi-btn").classList.contains("is-primary");
|
||
|
|
var politician = "";
|
||
|
|
if(is_salvini) politician = "salvini";
|
||
|
|
else if(is_renzi) politician = "renzi";
|
||
|
|
|
||
|
|
document.getElementById("all"+suffix).classList.replace("is-primary", "is-dark");
|
||
|
|
for (i = 2013; i <= 2019; i++){
|
||
|
|
document.getElementById(i+suffix).classList.replace("is-primary", "is-dark");
|
||
|
|
}
|
||
|
|
var btn = document.getElementById(year+suffix);
|
||
|
|
btn.classList.replace("is-dark", "is-primary");
|
||
|
|
|
||
|
|
const viz = "{{ viz|safe }}";
|
||
|
|
|
||
|
|
// create iframe
|
||
|
|
if(politician == "salvini" || politician == "renzi"){
|
||
|
|
var iframe = document.createElement('iframe');
|
||
|
|
iframe.width=980
|
||
|
|
iframe.height=600
|
||
|
|
if( viz == 'trends' || viz == 'sharing') {
|
||
|
|
|
||
|
|
// bar #2
|
||
|
|
const is_salvini2 = document.getElementById("salvini-btn-2").classList.contains("is-primary");
|
||
|
|
const is_renzi2 = document.getElementById("renzi-btn-2").classList.contains("is-primary");
|
||
|
|
var politician2 = "";
|
||
|
|
if(is_salvini2) politician2 = "salvini";
|
||
|
|
else if(is_renzi2) politician2 = "renzi";
|
||
|
|
else return;
|
||
|
|
|
||
|
|
// button 1
|
||
|
|
var is_all1 = document.getElementById("all").classList.contains("is-primary");
|
||
|
|
var year1 = 0;
|
||
|
|
for (i = 2013; i <= 2019; i++){
|
||
|
|
if(document.getElementById(i).classList.contains("is-primary")){
|
||
|
|
year1 = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(year1 == 0 && is_all1 == false) return;
|
||
|
|
else if(is_all1) {
|
||
|
|
year1 = "all";
|
||
|
|
}
|
||
|
|
|
||
|
|
//button 2
|
||
|
|
var is_all2 = document.getElementById("all-2").classList.contains("is-primary");
|
||
|
|
var year2 = 0;
|
||
|
|
for (i = 2013; i <= 2019; i++){
|
||
|
|
if(document.getElementById(i+"-2").classList.contains("is-primary")){
|
||
|
|
year2 = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(year2 == 0 && is_all2 == false) return;
|
||
|
|
else if(is_all2) {
|
||
|
|
year2 = "all";
|
||
|
|
}
|
||
|
|
|
||
|
|
iframe.src = `http://localhost:5000/{{ viz|safe }}/${year1}/${politician}/${year2}/${politician2}`;
|
||
|
|
} else {
|
||
|
|
iframe.src = `http://localhost:5000/{{ viz|safe }}/${year}/${politician}`;
|
||
|
|
}
|
||
|
|
console.log(iframe.src);
|
||
|
|
iframe.style = "position:fixed; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;";
|
||
|
|
var div = document.getElementById("iframe");
|
||
|
|
div.innerHTML="";
|
||
|
|
div.appendChild(iframe);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<container class="navbar-menu">
|
||
|
|
<div class="navbar-start">
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="salvini-btn" onclick="managePolitician('salvini','')" class="dropbtn button is-dark">Matteo Salvini</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="renzi-btn" onclick="managePolitician('renzi','')" class="dropbtn button is-dark">Matteo Renzi</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<container class="navbar-end">
|
||
|
|
{% if viz == "sleep" or viz == "trends" %}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="all" style="display: none;" onclick="updatePage('all', '')" disabled class=" button is-dark">All</button>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="all" onclick="updatePage('all', '')" disabled class=" button is-dark">All</button>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2019" onclick="updatePage('2019', '')" disabled class=" button is-dark">2019</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2018" onclick="updatePage('2018', '')" disabled class=" button is-dark">2018</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2017" onclick="updatePage('2017', '')" disabled class=" button is-dark">2017</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2016" onclick="updatePage('2016', '')" disabled class=" button is-dark">2016</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2015" onclick="updatePage('2015', '')" disabled class=" button is-dark">2015</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2014" onclick="updatePage('2014', '')" disabled class=" button is-dark">2014</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2013" onclick="updatePage('2013', '')" disabled class="button is-dark">2013</button>
|
||
|
|
</div>
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
</container>
|
||
|
|
</container>
|
||
|
|
{% if viz=="sharing" or viz=="trends" %}
|
||
|
|
<container class="navbar-menu">
|
||
|
|
<div class="navbar-start">
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="salvini-btn-2" onclick="managePolitician('salvini', '-2')" class="dropbtn button is-dark">Matteo Salvini</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="renzi-btn-2" onclick="managePolitician('renzi', '-2')" class="dropbtn button is-dark">Matteo Renzi</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<container class="navbar-end">
|
||
|
|
{% if viz == "sleep" or viz == "trends"%}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="all-2" style="display: none;" onclick="updatePage('all', '-2')" disabled class=" button is-dark">All</button>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="all-2" onclick="updatePage('all', '-2')" disabled class=" button is-dark">All</button>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2019-2" onclick="updatePage('2019', '-2')" disabled class=" button is-dark">2019</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2018-2" onclick="updatePage('2018', '-2')" disabled class=" button is-dark">2018</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2017-2" onclick="updatePage('2017', '-2')" disabled class=" button is-dark">2017</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2016-2" onclick="updatePage('2016', '-2')" disabled class=" button is-dark">2016</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2015-2" onclick="updatePage('2015', '-2')" disabled class=" button is-dark">2015</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2014-2" onclick="updatePage('2014', '-2')" disabled class=" button is-dark">2014</button>
|
||
|
|
</div>
|
||
|
|
<div class="navbar-item">
|
||
|
|
<button id="2013-2" onclick="updatePage('2013', '-2')" disabled class="button is-dark">2013</button>
|
||
|
|
</div>
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
<hr class="navbar-divider">
|
||
|
|
</container>
|
||
|
|
</container>
|
||
|
|
{% endif %}
|
||
|
|
<container>
|
||
|
|
<div id="iframe">
|
||
|
|
<iframe src="http://localhost:7777/explanations.html#/{{ n|safe }}" width="400" height="200"
|
||
|
|
style="position:fixed; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
</container>
|
||
|
|
</body>
|
||
|
|
</html>
|