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

3
inc/project.php
View File

@@ -85,13 +85,14 @@ class Project extends PhpObject {
if($iProjectId > 0) $asInfo['constraint'] = array(Db::getId(self::PROJ_TABLE)=>$iProjectId);
$asProjects = $this->oDb->selectRows($asInfo, 'codename');
foreach($asProjects as &$asProject) {
foreach($asProjects as $sCodeName=>&$asProject) {
switch($asProject['mode']) {
case 0: $asProject['mode'] = self::MODE_PREVIZ; break;
case 1: $asProject['mode'] = self::MODE_BLOG; break;
case 2: $asProject['mode'] = self::MODE_HISTO; break;
}
$asProject['geofile'] = Spot::addTimestampToFilePath(self::GEO_FOLDER.$asProject['geofile']);
$asProject['codename'] = $sCodeName;
}
return $asProjects;
}

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)

4
style/_fa.scss
View File

@@ -1,7 +1,7 @@
$fa-font-path: "fa/fonts";
$fa-css-prefix: fa;
@import 'fa/light';
@import 'fa/solid';
@import 'fa/mixins';
@import 'fa/core';
@import 'fa/larger';
@@ -13,7 +13,7 @@ $fa-css-prefix: fa;
@import 'fa/stacked';
.fa {
@extend .fal;
@extend .fas;
&.push {
margin-right: 0.5em;

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

4
style/spot.css.map
View File

File diff suppressed because one or more lines are too long

38
style/spot.scss
View File

@@ -7,6 +7,15 @@
@import 'common';
#messages {
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(35% - 0.66666em);
color: #666;
@extend .flicker;
}
#map {
position: absolute;
@@ -16,17 +25,6 @@
width: 100%;
background: #EEE;
.loader {
position: absolute;
font-size: 3em;
width: 1em;
height: 1em;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
color: #666;
@extend .flicker;
}
.track_tooltip {
p {
margin: 0;
@@ -42,13 +40,23 @@
}
}
#legend, #projects, .leaflet-control-layers.leaflet-control {
background-color: rgba(255, 255, 255, 0.5);
.leaflet-control-layers.leaflet-control {
background-color: rgba(255, 255, 255, 0.6);
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border: none;
margin: 1em;
&.leaflet-control-layers-expanded {
color: #000000;
width: calc(100% - 2em - 16px);
}
&+.leaflet-control-layers.leaflet-control {
margin-top: 0;
}
}
#legend {
//right: 30vw;
@@ -74,6 +82,10 @@
}
}
#elems {
display: none;
}
#feed {
position: absolute;
right: 0;