infobox/location: beautify location-sidebar

and cleanup sourcecode
This commit is contained in:
anoy 2016-04-02 22:47:57 +02:00 committed by PetaByteBoy // Milan Pässler
parent 5fce722f24
commit 31545c758d
2 changed files with 85 additions and 64 deletions

View file

@ -1,80 +1,83 @@
define(function () { define(function () {
return function (config, el, router, d) { return function (config, el, router, d) {
var h2 = document.createElement("h2") var sidebarTitle = document.createElement("h2")
h2.textContent = "Location: " + d.toString() sidebarTitle.textContent = "Location: " + d.toString()
el.appendChild(h2) el.appendChild(sidebarTitle)
getJSON("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + d.lat + "&lon=" + d.lng + "&zoom=18&addressdetail=0") getJSON("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + d.lat + "&lon=" + d.lng + "&zoom=18&addressdetails=0")
.then(function(result) { .then(function(result) {
h2.textContent = result.display_name if(result.display_name)
sidebarTitle.textContent = result.display_name
}) })
var latDiv = document.createElement("div") var editLat = document.createElement("input")
var h3lat = document.createElement("h3") editLat.type = "text"
h3lat.textContent = "Breitengrad" editLat.value = d.lat.toFixed(9)
h3lat.id = "h3-latitude" el.appendChild(createBox("lat", "Breitengrad", editLat))
latDiv.appendChild(h3lat)
var txt1 = document.createElement("textarea")
txt1.id = "location-latitude"
txt1.value = d.lat.toFixed(9)
var p = document.createElement("p")
p.appendChild(txt1)
p.appendChild(createCopyButton(txt1.id))
latDiv.appendChild(p)
el.appendChild(latDiv)
var longDiv = document.createElement("div") var editLng = document.createElement("input")
var h3lng = document.createElement("h3") editLng.type = "text"
h3lng.textContent = "Längengrad" editLng.value = d.lng.toFixed(9)
longDiv.appendChild(h3lng) el.appendChild(createBox("lng", "Längengrad", editLng))
var txt2 = document.createElement("textarea")
txt2.id = "location-longitude"
txt2.value = d.lng.toFixed(9)
var p2 = document.createElement("p")
p2.appendChild(txt2)
p2.appendChild(createCopyButton(txt2.id))
longDiv.appendChild(p2)
longDiv.id = "div-longitude"
el.appendChild(longDiv)
var a1 = document.createElement("a") var editUci = document.createElement("textarea")
a1.textContent = "plain" editUci.value =
a1.onclick = function() { "uci set gluon-node-info.@location[0]='location'; " +
"uci set gluon-node-info.@location[0].share_location='1';" +
"uci set gluon-node-info.@location[0].latitude='" + d.lat.toFixed(9) + "';" +
"uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "';" +
"uci commit gluon-node-info"
el.appendChild(createBox("uci", "Befehl", editUci, false))
var linkPlain = document.createElement("a")
linkPlain.textContent = "plain"
linkPlain.onclick = function() {
switch2plain() switch2plain()
return false return false
} }
a1.href = "#" linkPlain.href = "#"
var a2 = document.createElement("a")
a2.textContent = "uci" var linkUci = document.createElement("a")
a2.onclick = function() { linkUci.textContent = "uci"
linkUci.onclick = function() {
switch2uci() switch2uci()
return false return false
} }
a2.href = "#" linkUci.href = "#"
var p3 = document.createElement("p") var hintText = document.createElement("p")
p3.textContent = "Du kannst zwischen " hintText.appendChild(document.createTextNode("Du kannst zwischen "))
p3.appendChild(a1) hintText.appendChild(linkPlain)
var t1 = document.createTextNode(" und ") hintText.appendChild(document.createTextNode(" und "))
p3.appendChild(t1) hintText.appendChild(linkUci)
p3.appendChild(a2) hintText.appendChild(document.createTextNode(" wechseln."))
var t2 = document.createTextNode(" wechseln.") el.appendChild(hintText)
p3.appendChild(t2)
el.appendChild(p3)
function createCopyButton(id) { function createBox(name, title, inputElem, isVisible) {
var visible = typeof isVisible !== "undefined" ? isVisible : true
var box = document.createElement("div")
var heading = document.createElement("h3")
heading.textContent = title
box.appendChild(heading)
var btn = document.createElement("button") var btn = document.createElement("button")
btn.className = "ion-ios-copy" btn.className = "ion-ios-copy"
btn.title = "Kopieren" btn.title = "Kopieren"
btn.onclick = function() { btn.onclick = function() { copy2clip(inputElem.id) }
copy2clip(id) inputElem.id = "location-" + name
} inputElem.readOnly = true
return btn var line = document.createElement("p")
line.appendChild(inputElem)
line.appendChild(btn)
box.appendChild(line)
box.id = "box-" + name
box.style.display = visible ? "block" : "none"
return box
} }
function copy2clip(id) { function copy2clip(id) {
var copyTextarea = document.querySelector("#" + id) var copyField = document.querySelector("#" + id)
copyTextarea.select() copyField.select()
try { try {
document.execCommand("copy") document.execCommand("copy")
} catch (err) { } catch (err) {
@ -83,18 +86,15 @@ define(function () {
} }
function switch2plain() { function switch2plain() {
var box1 = document.getElementById("location-latitude") document.getElementById("box-uci").style.display = "none"
box1.value = d.lat.toFixed(9) document.getElementById("box-lat").style.display = "block"
var box2 = document.getElementById("location-longitude") document.getElementById("box-lng").style.display = "block"
box2.value = d.lng.toFixed(9)
document.getElementById("h3-latitude").textContent = "Breitengrad"
document.getElementById("div-longitude").style.display = "block"
} }
function switch2uci() { function switch2uci() {
document.getElementById("location-latitude").value = "uci set gluon-node-info.@location[0]='location'; uci set gluon-node-info.@location[0].share_location='1'; uci set gluon-node-info.@location[0].latitude='" + d.lat.toFixed(9) + "'; uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "'; uci commit gluon-node-info" document.getElementById("box-uci").style.display = "block"
document.getElementById("h3-latitude").textContent = "Befehl" document.getElementById("box-lat").style.display = "none"
document.getElementById("div-longitude").style.display = "none" document.getElementById("box-lng").style.display = "none"
} }
} }
}) })

View file

@ -151,6 +151,27 @@ table.attributes td {
img { img {
max-width: 100%; max-width: 100%;
} }
input[type="text"], textarea {
box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
border-radius: 5px;
border: none;
line-height: 1.67em;
vertical-align: bottom;
margin-right: 0.7em;
padding: 3px 6px;
font-family: monospace;
width: 70%;
max-width: 500px;
min-height: 42px;
font-size: 1.15em;
}
textarea {
resize: vertical;
overflow: auto;
max-height: 300px;
}
} }
button { button {