<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<style>
h1 {
font-size: 20pt;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.mdl-layout {
width : 90%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.mdl-textfield__input{
display: inline-block;
}
.mdl-search--icon {
width: 10%;
display: inline-block;
}
.haku {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
footer {
position: fixed;
bottom: 0;
width : 100%;
max-width: 928px;
margin-left: auto;
margin-right: auto;
}
#alkuNappi {
margin-top: 15px;
}
.sortButton {
font-weight: bold;
margin: 0;
padding-left: 0;
color: gray;
width: auto;
height: 25px;
border: none;
background-color: transparent;
}
.sortButton:hover {
cursor: pointer;
background-color: lightgray;
}
.sortIcons {
display: inline-block;
position: relative;
top: 7px;
}
.row {
display: inline;
}
table {
margin-bottom: 100px;
}
</style>
<title>Kuntien asukastilastoja</title>
</head>
<body>
<%
const tuhatErotin = (asukasLuku) => {
let tulos;
if(asukasLuku >= 1000){
tulos = asukasLuku.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
else {
tulos = asukasLuku;
}
return tulos;
}
const lukumaara = () => {
let lkm = 0;
if(kunnat.length > 0){
kunnat.map((kunta) => {
lkm++;
});
}
return lkm;
}
const keskiarvo = () => {
let keskiarvo = 0;
let lkm = 0;
if(kunnat.length > 0){
kunnat.map((kunta) => {
keskiarvo = keskiarvo + kunta.asukkaatYhteensa;
lkm++;
});
keskiarvo = keskiarvo / lkm;
}
return Math.round(keskiarvo);
}
const naiset = () => {
let asukkaatYhteensa = 0;
let naiset = 0;
let naisprosentti = 0;
if(kunnat.length > 0){
kunnat.map((kunta) => {
asukkaatYhteensa = asukkaatYhteensa + kunta.asukkaatYhteensa;
naiset = naiset + kunta.asukkaatNaiset;
});
naisprosentti = naiset / asukkaatYhteensa;
}
return Math.round((naisprosentti + Number.EPSILON) * 100 * 100) / 100;
}
%>
<div class="mdl-layout">
<div class="haku">
<h1>Kuntien asukastilastoja</h1>
<form method="GET" action="/">
<button id="alkuNappi" class="mdl-button">Alkuun</button>
</form>
</div>
<form method="POST" action="/hae">
<div class="haku">
<input name="nimi" class="mdl-textfield__input" type="text" placeholder="Hae kuntaa...">
<button type="submit" class="mdl-button mdl-search--icon">
<i class="material-icons">search</i>
</button>
</div>
</form>
<% if(kunnat.length <= 0){ %>
<h5>Hakusi ei tuottanut tuloksia</h5>
<% } else { %>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">
<form method="POST" action="/sortByName" class="row">
<input type="hidden" name="kunnat" value="<%= JSON.stringify(kunnat) %>">
<input type="hidden" name="key" value="<%= key %>">
<button class="sortButton" type="submit">Kunnan nimi</button>
</form>
<% if (key === 'name') { %>
<i class="material-icons sortIcons">arrow_drop_down</i>
<% } else if(key === "nameDown"){ %>
<i class="material-icons sortIcons">arrow_drop_up</i>
<% } %>
</th>
<th>
<form method="POST" action="/sortByPeople" class="row">
<input type="hidden" name="kunnat" value="<%= JSON.stringify(kunnat) %>">
<input type="hidden" name="key" value="<%= key %>">
<button class="sortButton" type="submit">Asukkaita yhteensä</button>
</form>
<% if (key === 'people') { %>
<i class="material-icons sortIcons">arrow_drop_down</i>
<% } else if(key === "peopleDown"){ %>
<i class="material-icons sortIcons">arrow_drop_up</i>
<% } %>
</th>
<th>
<form method="POST" action="/sortByMen" class="row">
<input type="hidden" name="kunnat" value="<%= JSON.stringify(kunnat) %>">
<input type="hidden" name="key" value="<%= key %>">
<button class="sortButton" type="submit">Miehiä</button>
</form>
<% if (key === 'men') { %>
<i class="material-icons sortIcons">arrow_drop_down</i>
<% } else if(key === "menDown"){ %>
<i class="material-icons sortIcons">arrow_drop_up</i>
<% } %>
</th>
<th>
<form method="POST" action="/sortByWomen" class="row">
<input type="hidden" name="kunnat" value="<%= JSON.stringify(kunnat) %>">
<input type="hidden" name="key" value="<%= key %>">
<button class="sortButton" type="submit">Naisia</button>
</form>
<% if (key === 'women') { %>
<i class="material-icons sortIcons">arrow_drop_down</i>
<% } else if(key === "womenDown"){ %>
<i class="material-icons sortIcons">arrow_drop_up</i>
<% } %>
</th>
</tr>
</thead>
<% kunnat.forEach((kunta) => { %>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric"><%= kunta.kunta %></td>
<td><%= tuhatErotin(kunta.asukkaatYhteensa) %></td>
<td><%= tuhatErotin(kunta.asukkaatMiehet) %></td>
<td><%= tuhatErotin(kunta.asukkaatNaiset) %></td>
</tr>
</tbody>
<% })}; %>
</table>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
Kuntien lukumäärä: <%= lukumaara(); %>
</div>
</div>
<div class="mdl-mini-footer__middle-section">
<div class="mdl-logo">
Kuntien asukasluvun keskiarvo: <%= tuhatErotin(keskiarvo()); %>
</div>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">
Kuntien naisten prosentuaalinen osuus: <%= naiset() %> %
</div>
</div>
</footer>
</div>
</body>
</html>