infobox/location: beautify location-sidebar
and cleanup sourcecode
This commit is contained in:
anoy
PetaByteBoy // Milan Pässler
parent
5fce722f24
commit
31545c758d
|
|
@ -1,80 +1,83 @@
|
|||
define(function () {
|
||||
return function (config, el, router, d) {
|
||||
var h2 = document.createElement("h2")
|
||||
h2.textContent = "Location: " + d.toString()
|
||||
el.appendChild(h2)
|
||||
var sidebarTitle = document.createElement("h2")
|
||||
sidebarTitle.textContent = "Location: " + d.toString()
|
||||
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) {
|
||||
h2.textContent = result.display_name
|
||||
if(result.display_name)
|
||||
sidebarTitle.textContent = result.display_name
|
||||
})
|
||||
|
||||
var latDiv = document.createElement("div")
|
||||
var h3lat = document.createElement("h3")
|
||||
h3lat.textContent = "Breitengrad"
|
||||
h3lat.id = "h3-latitude"
|
||||
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 editLat = document.createElement("input")
|
||||
editLat.type = "text"
|
||||
editLat.value = d.lat.toFixed(9)
|
||||
el.appendChild(createBox("lat", "Breitengrad", editLat))
|
||||
|
||||
var longDiv = document.createElement("div")
|
||||
var h3lng = document.createElement("h3")
|
||||
h3lng.textContent = "Längengrad"
|
||||
longDiv.appendChild(h3lng)
|
||||
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 editLng = document.createElement("input")
|
||||
editLng.type = "text"
|
||||
editLng.value = d.lng.toFixed(9)
|
||||
el.appendChild(createBox("lng", "Längengrad", editLng))
|
||||
|
||||
var a1 = document.createElement("a")
|
||||
a1.textContent = "plain"
|
||||
a1.onclick = function() {
|
||||
var editUci = document.createElement("textarea")
|
||||
editUci.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"
|
||||
|
||||
el.appendChild(createBox("uci", "Befehl", editUci, false))
|
||||
|
||||
var linkPlain = document.createElement("a")
|
||||
linkPlain.textContent = "plain"
|
||||
linkPlain.onclick = function() {
|
||||
switch2plain()
|
||||
return false
|
||||
}
|
||||
a1.href = "#"
|
||||
var a2 = document.createElement("a")
|
||||
a2.textContent = "uci"
|
||||
a2.onclick = function() {
|
||||
linkPlain.href = "#"
|
||||
|
||||
var linkUci = document.createElement("a")
|
||||
linkUci.textContent = "uci"
|
||||
linkUci.onclick = function() {
|
||||
switch2uci()
|
||||
return false
|
||||
}
|
||||
a2.href = "#"
|
||||
linkUci.href = "#"
|
||||
|
||||
var p3 = document.createElement("p")
|
||||
p3.textContent = "Du kannst zwischen "
|
||||
p3.appendChild(a1)
|
||||
var t1 = document.createTextNode(" und ")
|
||||
p3.appendChild(t1)
|
||||
p3.appendChild(a2)
|
||||
var t2 = document.createTextNode(" wechseln.")
|
||||
p3.appendChild(t2)
|
||||
el.appendChild(p3)
|
||||
var hintText = document.createElement("p")
|
||||
hintText.appendChild(document.createTextNode("Du kannst zwischen "))
|
||||
hintText.appendChild(linkPlain)
|
||||
hintText.appendChild(document.createTextNode(" und "))
|
||||
hintText.appendChild(linkUci)
|
||||
hintText.appendChild(document.createTextNode(" wechseln."))
|
||||
el.appendChild(hintText)
|
||||
|
||||
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")
|
||||
btn.className = "ion-ios-copy"
|
||||
btn.title = "Kopieren"
|
||||
btn.onclick = function() {
|
||||
copy2clip(id)
|
||||
}
|
||||
return btn
|
||||
btn.onclick = function() { copy2clip(inputElem.id) }
|
||||
inputElem.id = "location-" + name
|
||||
inputElem.readOnly = true
|
||||
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) {
|
||||
var copyTextarea = document.querySelector("#" + id)
|
||||
copyTextarea.select()
|
||||
var copyField = document.querySelector("#" + id)
|
||||
copyField.select()
|
||||
try {
|
||||
document.execCommand("copy")
|
||||
} catch (err) {
|
||||
|
|
@ -83,18 +86,15 @@ define(function () {
|
|||
}
|
||||
|
||||
function switch2plain() {
|
||||
var box1 = document.getElementById("location-latitude")
|
||||
box1.value = d.lat.toFixed(9)
|
||||
var box2 = document.getElementById("location-longitude")
|
||||
box2.value = d.lng.toFixed(9)
|
||||
document.getElementById("h3-latitude").textContent = "Breitengrad"
|
||||
document.getElementById("div-longitude").style.display = "block"
|
||||
document.getElementById("box-uci").style.display = "none"
|
||||
document.getElementById("box-lat").style.display = "block"
|
||||
document.getElementById("box-lng").style.display = "block"
|
||||
}
|
||||
|
||||
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("h3-latitude").textContent = "Befehl"
|
||||
document.getElementById("div-longitude").style.display = "none"
|
||||
document.getElementById("box-uci").style.display = "block"
|
||||
document.getElementById("box-lat").style.display = "none"
|
||||
document.getElementById("box-lng").style.display = "none"
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -151,6 +151,27 @@ table.attributes td {
|
|||
img {
|
||||
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 {
|
||||
|
|
|
|||
Reference in New Issue