history: toggle-able sidebar
This commit is contained in:
Nils Schneider
parent
ad663f60fd
commit
b7fa08ef2a
89
history.html
89
history.html
|
|
@ -11,6 +11,25 @@
|
|||
font-size: 11pt;
|
||||
}
|
||||
|
||||
#sidebarhandle {
|
||||
cursor: pointer;
|
||||
font-family: sans;
|
||||
font-size: 18pt;
|
||||
position: absolute;
|
||||
right: -1.4em;
|
||||
top: 2em;
|
||||
z-index: 10;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
width: 1.5em;
|
||||
padding: 0.25em 0;
|
||||
text-align: center;
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
}
|
||||
|
||||
#sidebarhandle:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.hostname {
|
||||
}
|
||||
|
||||
|
|
@ -26,8 +45,21 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#lists {
|
||||
#sidebar {
|
||||
max-width: 50em;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar.hidden {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#sidebar.hidden #lists {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#lists {
|
||||
overflow: auto;
|
||||
padding: 0 1em 1em;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -51,7 +83,7 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 80em) {
|
||||
#lists {
|
||||
#sidebar {
|
||||
max-width: 50vw;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
@ -62,14 +94,30 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#lists {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#sidebarhandle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
#lists {
|
||||
#sidebar {
|
||||
max-width: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#sidebar.hidden {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#sidebar.hidden #lists {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
||||
|
|
@ -83,23 +131,28 @@
|
|||
<div id="container">
|
||||
<div id="map">
|
||||
</div>
|
||||
<div id="lists">
|
||||
<p>
|
||||
Zeigt Knoten an, die in den letzten 14 Tagen dazu gekommen oder verschwunden sind.
|
||||
Funktioniert nur in wirklich modernen Browsern.
|
||||
</p>
|
||||
<div id="sidebar">
|
||||
<div id="sidebarhandle">
|
||||
✕
|
||||
</div>
|
||||
<div id="lists">
|
||||
<p>
|
||||
Zeigt Knoten an, die in den letzten 14 Tagen dazu gekommen oder verschwunden sind.
|
||||
Funktioniert nur in wirklich modernen Browsern.
|
||||
</p>
|
||||
|
||||
<h2>Neue Knoten</h2>
|
||||
<table>
|
||||
<tbody id="newnodes">
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Neue Knoten</h2>
|
||||
<table>
|
||||
<tbody id="newnodes">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Verschwundene Knoten</h2>
|
||||
<table>
|
||||
<tbody id="lostnodes">
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Verschwundene Knoten</h2>
|
||||
<table>
|
||||
<tbody id="lostnodes">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
62
history.js
62
history.js
|
|
@ -27,7 +27,25 @@ function getJSON(url) {
|
|||
}
|
||||
|
||||
function main() {
|
||||
getJSON('nodes.json').then(handle_data)
|
||||
var options = { worldCopyJump: true,
|
||||
zoomControl: false
|
||||
}
|
||||
|
||||
var map = L.map(document.getElementById("map"), options)
|
||||
|
||||
var sh = document.getElementById("sidebarhandle")
|
||||
sh.onclick = function () {
|
||||
var sb = document.getElementById("sidebar")
|
||||
|
||||
if (sb.classList.contains("hidden"))
|
||||
sb.classList.remove("hidden")
|
||||
else
|
||||
sb.classList.add("hidden")
|
||||
|
||||
map.invalidateSize()
|
||||
}
|
||||
|
||||
getJSON('nodes.json').then(handle_data(map))
|
||||
}
|
||||
|
||||
function sort(key, d) {
|
||||
|
|
@ -66,38 +84,34 @@ function subtract(a, b) {
|
|||
})
|
||||
}
|
||||
|
||||
function handle_data(data) {
|
||||
var nodes = Object.keys(data.nodes).map(function (key) { return data.nodes[key] })
|
||||
function handle_data(map) {
|
||||
return function (data) {
|
||||
var nodes = Object.keys(data.nodes).map(function (key) { return data.nodes[key] })
|
||||
|
||||
nodes = nodes.filter( function (d) {
|
||||
return "firstseen" in d && "lastseen" in d
|
||||
})
|
||||
nodes = nodes.filter( function (d) {
|
||||
return "firstseen" in d && "lastseen" in d
|
||||
})
|
||||
|
||||
nodes.forEach( function(node) {
|
||||
node.firstseen = moment(node.firstseen)
|
||||
node.lastseen = moment(node.lastseen)
|
||||
})
|
||||
nodes.forEach( function(node) {
|
||||
node.firstseen = moment(node.firstseen)
|
||||
node.lastseen = moment(node.lastseen)
|
||||
})
|
||||
|
||||
var age = moment().subtract(14, 'days')
|
||||
var age = moment().subtract(14, 'days')
|
||||
|
||||
var newnodes = limit("firstseen", age, sort("firstseen", nodes).filter(online))
|
||||
var lostnodes = limit("lastseen", age, sort("lastseen", nodes).filter(offline))
|
||||
var newnodes = limit("firstseen", age, sort("firstseen", nodes).filter(online))
|
||||
var lostnodes = limit("lastseen", age, sort("lastseen", nodes).filter(offline))
|
||||
|
||||
var onlinenodes = subtract(nodes.filter(online).filter(has_location), newnodes)
|
||||
var onlinenodes = subtract(nodes.filter(online).filter(has_location), newnodes)
|
||||
|
||||
addToList(document.getElementById("newnodes"), "firstseen", newnodes)
|
||||
addToList(document.getElementById("lostnodes"), "lastseen", lostnodes)
|
||||
addToList(document.getElementById("newnodes"), "firstseen", newnodes)
|
||||
addToList(document.getElementById("lostnodes"), "lastseen", lostnodes)
|
||||
|
||||
mkmap(document.getElementById("map"), newnodes, lostnodes, onlinenodes)
|
||||
mkmap(map, newnodes, lostnodes, onlinenodes)
|
||||
}
|
||||
}
|
||||
|
||||
function mkmap(el, newnodes, lostnodes, onlinenodes) {
|
||||
var options = { worldCopyJump: true,
|
||||
zoomControl: false
|
||||
}
|
||||
|
||||
var map = L.map(el, options)
|
||||
|
||||
function mkmap(map, newnodes, lostnodes, onlinenodes) {
|
||||
L.control.zoom({ position: "topright" }).addTo(map)
|
||||
|
||||
L.tileLayer("http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", {
|
||||
|
|
|
|||
Reference in New Issue