franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add project radio buttons

Browse Source
This commit is contained in:
Franzz
2019-01-27 16:42:15 +01:00
parent 62b94624f0
commit 54426daca6
6 changed files with 101 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
masks/project.html
View File

@@ -1,15 +1,6 @@
<div id="messages">
<div id="map">
<div class="loader fa fa-map"></div>
</div>
<div id="projects">
</div>
<div id="legend">
<div class="line main">Trajet principal</div>
<div class="line off-track">Variante</div>
<div class="line hitchhiking">Hors rando</div>
</div>
<div class="loader fa fa-fw fa-map"></div>
<div id="map"></div>
<div id="feed">
<div id="posts">
<div id="poster"></div>
@@ -17,6 +8,13 @@
<div id="loading"></div>
</div>
</div>
<div id="elems">
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="line main">Trajet principal</div>
<div class="line off-track">Variante</div>
<div class="line hitchhiking">Hors rando</div>
</div>
</div>
</div>
<script type="text/javascript" src="script/lightbox.min.js"></script>
<script type="text/javascript">
@@ -24,37 +22,47 @@ self.onSamePageMove = function(asHash){
if(typeof self.tmp('map') != 'undefined') {
self.tmp('map').remove();
self.tmp('$Map').empty();
self.tmp('map', null);
}
self.pageInit(asHash);
initProject(asHash.items[0]);
return false;
};
oSpot.pageInit = function(asHash)
{
//Set active project
if(asHash.items.length==0) {
self.setHash(asHash.page, [self.vars('default_project_codename')]);
return;
if(asHash.items.length==0) self.setHash(asHash.page, [self.vars('default_project_codename')]);
else {
self.tmp('$Map', $('#map'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('feed_width', $('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
self.tmp('map_padding', 0.05);
self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
//Assign Track Type Colors
self.tmp('track-type-styles', 'object');
$('#legend').find('.line').each(function(iKey, oLegend){
var $Legend = $(oLegend);
var sTrackType = $Legend.attr('class').replace('line', '').trim();
self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
});
//Scrollbar
self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
//Add "Loading" Post
getPost({type: 'loading', formatted_time: '', relative_time: '', displayed_id: 'Chargement...'}).appendTo($('#loading'));
//project Bootstrap
initProject(asHash.items[0]);
}
self.vars('project', self.vars(['projects', asHash.items[0]]));
self.tmp('$Map', $('#map'));
self.tmp('track-type-styles', 'object');
//Assign Track Type Colors
$('#legend').find('.line').each(function(iKey, oLegend){
var $Legend = $(oLegend);
var sTrackType = $Legend.attr('class').replace('line', '').trim();
self.tmp(['track-type-styles', sTrackType], {weight: parseInt($Legend.css('line-height')), color: $Legend.css('border-top-color'), opacity: 1});
});
//Add "Loading" Post
var asLoading = {
type: 'loading',
formatted_time: '',
relative_time: '',
displayed_id: 'Chargement...'
};
getPost(asLoading).appendTo($('#loading'));
};
function initProject(sProjectCodeName){
self.vars('project', self.vars(['projects', sProjectCodeName]));
//Spot Messages
$.when(
@@ -76,20 +84,9 @@ oSpot.pageInit = function(asHash)
//Posts
updateFeed(true);
initPosts();
};
}
function buildSpotMessages(aoMessages, aoTracks){
//Build Feed
self.tmp('updatable', true);
self.tmp('out-of-data', 'boolean');
self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
self.tmp('infowindow', 'boolean');
self.tmp('feed_width', $('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
self.tmp('map_padding', 0.05);
self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
function buildSpotMessages(aoMessages, aoTracks) {
//Tile layers
var oMapBoxSat = L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}),
@@ -215,29 +212,46 @@ function buildSpotMessages(aoMessages, aoTracks){
//Legend
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return L.DomUtil.get('legend');};
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
oLegend.addTo(oMap);
//Projects
var oProjects = L.control({position: 'bottomleft'});
oProjects.onAdd = function(oMap) {return L.DomUtil.get('projects');};
oProjects.onAdd = function(oMap) {
var $Labels = $('<div>', {'class': 'leaflet-control-layers-base'});
$.each(self.vars('projects'), function(sCodeName, asProject){
var asRadioAttrs = {'type': 'radio', 'class': 'leaflet-control-layers-selector', 'name':'project', 'value': sCodeName};
if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked';
var $Radio =$('<input>', asRadioAttrs).change(function(){
self.setHash(self.vars('page'), [$(this).val()]);
});
var $Label = $('<label>').append($('<div>')
.append($Radio)
.append($('<span>').text(' '+asProject.name))
);
$Labels.append($Label);
});
return $('<div>', {'class':'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'}).append($('<section>').append($Labels))[0];
};
oProjects.addTo(oMap);
}
function initPosts() {
if(self.vars(['project', 'mode'])==self.consts.modes.histo) $('#poster').hide();
var $Poster = $('#poster').empty();
if(self.vars(['project', 'mode'])==self.consts.modes.histo) $Poster.hide();
else {
var asPoster = {
type: 'poster',
formatted_time: '',
relative_time: 'Nouveau message'
};
getPost(asPoster).appendTo($('#poster'));
getPost(asPoster).appendTo($Poster);
//$('#name').defaultVal('Nom...');
//$('#post').defaultVal('Ton message...');
$('#submit').click(function(){
if($('#poster').checkForm())
if($Poster.checkForm())
{
self.get(
'add_post',
@@ -343,7 +357,7 @@ function updateFeed(bFirstChunk)
function getPost(asPost) {
var $Post = $('<div>', {'class':'post '+asPost.type});
var sRelTime = (self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time;
var sRelTime = (asPost.relative_time!='')?((self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
var sAbsTime = asPost.formatted_time;
var $Body = {};
switch(asPost.type)