gluon-config-mode: show map when online

This commit is contained in:
Nils Schneider 2014-01-30 10:41:57 +01:00
parent 19403474eb
commit c0213c617a
2 changed files with 99 additions and 0 deletions

View File

@ -51,6 +51,7 @@ o.datatype = "integer"
s = f:section(SimpleSection, nil, [[Um deinen Knoten auf der Karte anzeigen
zu können benötigen wir seine Koordinaten. Hier hast du die Möglichkeit
diese zu hinterlegen.]])
s.template = "gluon-config-mode/cbi/map"
o = s:option(Flag, "_location", "Knoten auf der Karte anzeigen")
o.default = uci:get_first("gluon-locaton", "location", "share_location", o.disabled)

View File

@ -0,0 +1,98 @@
<fieldset class="cbi-section">
<% if self.title and #self.title > 0 then -%>
<legend><%=self.title%></legend>
<%- end %>
<% if self.description and #self.description > 0 then -%>
<div class="cbi-section-descr"><%=self.description%></div>
<%- end %>
<div class="cbi-section-node" id="cbi-<%=self.config%>-<%=tostring(self):sub(8)%>">
<div>
<% self:render_children(1, scope or {}) %>
</div>
<% if self.error and self.error[1] then -%>
<div class="cbi-section-error">
<ul><% for _, e in ipairs(self.error[1]) do -%>
<li>
<%- if e == "invalid" then -%>
<%:One or more fields contain invalid values!%>
<%- elseif e == "missing" then -%>
<%:One or more required fields have no value!%>
<%- else -%>
<%=pcdata(e)%>
<%- end -%>
</li>
<%- end %></ul>
</div>
<%- end %>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<div id='map'></div>
<script>
function showmap() {
document.getElementById('cbi-wizard-1-_latitude').style.display = 'none';
document.getElementById('cbi-wizard-1-_longitude').style.display = 'none';
var tiles ={
"scheme": "xyz",
"tiles": [
"http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 18,
"bounds": [ -180, -85, 180, 85 ],
"center": [ 0, 0, 2 ]
}
var start = new L.LatLng(
document.getElementById('cbid.wizard.1._latitude').value,
document.getElementById('cbid.wizard.1._longitude').value
);
var initial_zoom = 16;
var map = L.mapbox.map('map', tiles).setView(start, initial_zoom);
var marker = L.marker(start, {
icon: L.mapbox.marker.icon({'marker-color': 'CC0033'}),
draggable: true
});
marker.addTo(map);
marker.on('dragend', function () {
var latlng = this.getLatLng();
document.getElementById('cbid.wizard.1._location').checked = true;
document.getElementById('cbid.wizard.1._latitude').value = latlng.lat;
document.getElementById('cbid.wizard.1._longitude').value = latlng.lng;
});
map._onResize();
}
if (typeof L !== 'undefined')
showmap()
</script>
</div>
<br />
</fieldset>
<%-
if type(self.hidden) == "table" then
for k, v in pairs(self.hidden) do
-%>
<input type="hidden" id="<%=k%>" name="<%=k%>" value="<%=pcdata(v)%>" />
<%-
end
end
%>