Skip to content

Commit e579518

Browse files
tcoupintcoupin
authored
1.2.0 on master (#15)
* try multi banch deploy * link issue * edit image interface * color picker button * Imagedrawble : event listener * Daw on image work on computer * Image drwing : work on mobile * MEssage pour cliquer sur l'image * bug issue template * Use scope to prevent point outside instance bounds * release 1.1.0 * close color picker on choose * release 1.1.1 * color map markers * build: clean before checkout * remove button on card, sub button for floatting action button * form * filter * filter: global checkbox
1 parent 2cad3e5 commit e579518

15 files changed

+769
-470
lines changed

Diff for: ‎.travis.yml

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ services:
99
script:
1010
- git checkout master
1111
- docker run -it --rm -v $PWD:/app -e WEBPACK_MODE=production -w /app node:alpine sh -c 'npm install && npm run webpack && (echo "app.vigilo.city" > /app/dist/CNAME) && mv /app/dist /app/public'
12+
- git checkout -- .
1213
- git checkout develop
1314
- docker run -it --rm -v $PWD:/app -e WEBPACK_MODE=development -w /app node:alpine sh -c 'npm install && npm run webpack && (echo "app.vigilo.city" > /app/dist/CNAME) && mv /app/dist /app/public/develop'
1415
- find public

Diff for: ‎package-lock.json

+347-347
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vigilo-webapp",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

Diff for: ‎src/css/main.scss

+6
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ nav.nav-extended {
8383
display: flex;
8484
flex-wrap: wrap;
8585
.card {
86+
cursor: pointer;
8687
height: calc( 100% - 1rem );
8788
.card-image {
8889
display: flex;
@@ -106,3 +107,8 @@ nav.nav-extended {
106107
}
107108
}
108109

110+
#modal-filters {
111+
h6 {
112+
cursor: pointer;
113+
}
114+
}

Diff for: ‎src/index.html

+73-5
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,11 @@
4444
géographique</a></li>
4545
</ul>
4646
</li>
47-
<li><a class="waves-effect grey-text" target="_blank" href="http://www.jesuisundesdeux.org"><i class="material-icons">open_in_new</i>#JeSuisUnDesDeux</a></li>
48-
<li><a class="waves-effect grey-text" target="_blank" href="https://github.com/jesuisundesdeux/vigilo-webapp/issues/new?template=bug.md"><i class="material-icons">bug_report</i>Signaler un bug</a></li>
47+
<li><a class="waves-effect grey-text" target="_blank" href="http://www.jesuisundesdeux.org"><i
48+
class="material-icons">open_in_new</i>#JeSuisUnDesDeux</a></li>
49+
<li><a class="waves-effect grey-text" target="_blank"
50+
href="https://github.com/jesuisundesdeux/vigilo-webapp/issues/new?template=bug.md"><i
51+
class="material-icons">bug_report</i>Signaler un bug</a></li>
4952
<li id="version" class="center-align"><a href="#" class="grey-text">Version : </a></li>
5053
</ul>
5154

@@ -90,11 +93,76 @@ <h5>Zone géographique</h5>
9093
</div>
9194
</div>
9295
<div class="fixed-action-btn">
93-
<a class="btn-floating btn-large yellow darken-3 black-text" onclick="startForm()">
94-
<i class="large material-icons">add</i>
96+
<a class="btn-floating btn-large yellow darken-3 black-text">
97+
<i class="large material-icons">more_vert</i>
9598
</a>
99+
<ul>
100+
<li>
101+
<a class="btn-floating blue darken-1 black-text modal-trigger" href="#modal-filters">
102+
<i class="material-icons">filter_list</i>
103+
</a>
104+
</li>
105+
<li>
106+
<a class="btn-floating green darken-3 black-text" onclick="startForm()">
107+
<i class="material-icons">add</i>
108+
</a>
109+
</li>
110+
</ul>
111+
</div>
112+
<!-- Modal for filters -->
113+
<div id="modal-filters" class="modal modal-fixed-footer">
114+
<div class="modal-content">
115+
<h5>Filtres</h5>
116+
<div class="row">
117+
<div id="categories-select" class="input-field col s12 m6">
118+
<h6 class="valign-wrapper"><i class="material-icons">check_box</i> Catégories</h6>
119+
</div>
120+
<div id="daytime-select" class="col s12 m6">
121+
<div>
122+
<h6 class="valign-wrapper"><i class="material-icons">check_box</i> Jour</h6>
123+
<p>
124+
<label>
125+
<input type="checkbox" name="dow" value="worked" checked="checked" />
126+
<span>En semaine</span>
127+
</label>
128+
</p>
129+
<p>
130+
<label>
131+
<input type="checkbox" name="dow" value="weekend" checked="checked" />
132+
<span>Week-end</span>
133+
</label>
134+
</p>
135+
</div>
136+
<div>
137+
<h6 class="valign-wrapper"><i class="material-icons">check_box</i> Heure</h6>
138+
<p>
139+
<label>
140+
<input type="checkbox" name="hour" value="morning" checked="checked" />
141+
<span>Matin</span>
142+
</label>
143+
</p>
144+
<p>
145+
<label>
146+
<input type="checkbox" name="hour" value="afternoon" checked="checked" />
147+
<span>Après-midi</span>
148+
</label>
149+
</p>
150+
<p>
151+
<label>
152+
<input type="checkbox" name="hour" value="night" checked="checked" />
153+
<span>Soirée-Nuit</span>
154+
</label>
155+
</p>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
<div class="modal-footer">
161+
<a href="#!" class="modal-close waves-effect waves-light btn"><i class="material-icons">check</i></a>
162+
</div>
96163
</div>
97164
</div>
165+
98166
<div id="stats" class="container">
99167

100168
<div class="row" id="stats-last30days">
@@ -237,4 +305,4 @@ <h4>Envoi...</h4>
237305
<script src="js/main.js"></script>
238306
</body>
239307

240-
</html>
308+
</html>

Diff for: ‎src/js/app.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import * as vigiloconfig from './vigilo-config';
2+
import * as map from './issue-map';
3+
import * as list from './issue-list';
4+
import './issue-filter';
5+
import * as form from './form';
6+
import * as stats from './stats';
7+
import M from 'materialize-css';
8+
9+
import dataManager from './dataManager';
10+
11+
export default class VigiloApp {
12+
async init() {
13+
$("#version a").append(vigiloconfig.VERSION_NUMBER);
14+
15+
16+
/**
17+
* SELECT ZONE MODAL
18+
*/
19+
var current_instance = vigiloconfig.getInstance() == null ? '' : vigiloconfig.getInstance().name;
20+
var instances = await vigiloconfig.getInstances();
21+
for (var i in instances) {
22+
$("#modal-zone .modal-content .collection").append(`<a href="#!" onclick="setInstance('${instances[i].name}')" class="collection-item${(instances[i].name == current_instance ? ' active' : '')}">${instances[i].name}</a>`)
23+
}
24+
25+
M.Modal.init($("#modal-zone"));
26+
if (vigiloconfig.getInstance() == null) {
27+
M.Modal.getInstance($("#modal-zone")).open();
28+
return
29+
}
30+
31+
/**
32+
* TITLE
33+
*/
34+
$("title").append(" " + vigiloconfig.getInstance().name)
35+
$("nav .brand-logo").append(" " + vigiloconfig.getInstance().name)
36+
37+
38+
39+
/**
40+
* SIDENAV
41+
*/
42+
M.Sidenav.init($("#mobile-menu"));
43+
M.Tabs.init($("#mobile-menu .tabs"), {
44+
onShow: function () {
45+
M.Sidenav.getInstance($("#mobile-menu")).close()
46+
}
47+
});
48+
49+
/**
50+
* ISSUE FORM
51+
*/
52+
form.init();
53+
stats.init()
54+
55+
/**
56+
* ISSUES LIST AND MAP
57+
*/
58+
M.Tabs.init($("#issues .tabs"));
59+
M.Tabs.getInstance($("#issues .tabs")).options.onShow = function () { map.focus() }
60+
await map.init()
61+
M.Modal.init($("#modal-issue"));
62+
$(window).scroll(() => {
63+
if (($(window.document.body).height() - $(window).height() - $(window).scrollTop()) < 10) {
64+
list.displayIssues(10)
65+
}
66+
})
67+
M.FloatingActionButton.init($('.fixed-action-btn'));
68+
69+
70+
$(dataManager).on('filterchange',async ()=>{
71+
list.cleanIssues();
72+
map.cleanIssues();
73+
await list.displayIssues(10)
74+
await map.displayIssues(true)
75+
})
76+
77+
await list.displayIssues(10)
78+
await map.displayIssues()
79+
}
80+
81+
82+
83+
}

Diff for: ‎src/js/circle-marker-dynamic.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import 'leaflet';
2+
3+
const CircleMarkerDynamic = L.CircleMarker.extend({
4+
initialize: function(latlng, options){
5+
L.CircleMarker.prototype.initialize.call(this, latlng, options);
6+
this.styles = {};
7+
for (var i in this.options.styles){
8+
if (i.split('-').length == 1) {
9+
// simple level
10+
this.styles[parseInt(i)] = this.options.styles[i];
11+
} else {
12+
// range
13+
for (var ind = parseInt(i.split('-')[0]); ind <= parseInt(i.split('-')[1]); ind++){
14+
this.styles[ind] = this.options.styles[i];
15+
}
16+
}
17+
}
18+
},
19+
20+
onAdd: function(map) {
21+
L.CircleMarker.prototype.onAdd.call(this, map);
22+
map.on("zoom", this.onZoom, this)
23+
this.onZoom();
24+
},
25+
onRemove: function(map) {
26+
L.CircleMarker.prototype.onRemove.call(this, map);
27+
map.off("zoom", this.onZoom, this)
28+
},
29+
30+
onZoom: function(){
31+
if (this.styles[this._map.getZoom()] !== undefined){
32+
this.setStyle(this.styles[this._map.getZoom()]);
33+
}
34+
}
35+
})
36+
37+
L.CircleMarkerDynamic = CircleMarkerDynamic;
38+
39+
L.circleMarkerDynamic = function(latlng, options){
40+
return new CircleMarkerDynamic(latlng, options);
41+
}

Diff for: ‎src/js/colors.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const CATEGORIES_COLORS = {
2+
"Véhicule ou objet gênant": { stack: "Cohabitation", color: "crimson" },
3+
"Incivilité récurrente sur la route": { stack: "Cohabitation", color: "lightcoral" },
4+
"Défaut d'entretien": { stack: "Infrastructures", color: "darkgreen" },
5+
"Aménagement mal conçu": { stack: "Infrastructures", color: "seagreen" },
6+
"Signalisation, marquage": { stack: "Infrastructures", color: "yellowgreen" },
7+
"Absence d'arceaux de stationnement": { stack: "Infrastructures", color: "turquoise" },
8+
"Absence d'aménagement": { stack: "Infrastructures", color: "paleturquoise" },
9+
"Accident, chute, incident": { stack: "Autre", color: "black" },
10+
"Autre": { stack: "Autre", color: "grey" },
11+
}

Diff for: ‎src/js/dataManager.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as vigilo from './vigilo-api';
2+
3+
class DataManager {
4+
constructor(){
5+
this.dow = [];
6+
this.hour = [];
7+
this.categories = [];
8+
}
9+
async getData() {
10+
var data = await vigilo.getIssues();
11+
data = data.filter((issue)=>{
12+
if (this.dow.length >0){
13+
if (this.days.indexOf(issue.date_obj.getDay()) == -1){
14+
return false;
15+
}
16+
}
17+
if (this.hour.length >0){
18+
if (this.hours.indexOf(issue.date_obj.getHours()) == -1){
19+
return false;
20+
}
21+
}
22+
if (this.categories.length >0){
23+
if (this.categories.indexOf(issue.categorie) == -1){
24+
return false;
25+
}
26+
}
27+
return true;
28+
});
29+
return data;
30+
}
31+
setFilter(filters){
32+
var change = false;
33+
if (filters.dow && filters.dow != this.dow){
34+
this.dow = filters.dow;
35+
this.days = [];
36+
if (this.dow.indexOf('worked') != -1){
37+
this.days.push(1,2,3,4,5)
38+
}
39+
if (this.dow.indexOf('weekend') != -1){
40+
this.days.push(6,0)
41+
}
42+
change = true;
43+
}
44+
if (filters.hour && filters.hour != this.hour){
45+
this.hour = filters.hour;
46+
this.hours = [];
47+
if (this.hour.indexOf('morning') != -1){
48+
this.hours.push(6,7,8,9,10,11,12);
49+
}
50+
if (this.hour.indexOf('afternoon') != -1){
51+
this.hours.push(13,14,15,16,17,18,19);
52+
}
53+
if (this.hour.indexOf('night') != -1){
54+
this.hours.push(20,21,22,23,0,1,2,3,4,5);
55+
}
56+
change = true;
57+
}
58+
if (filters.categories && filters.categories != this.categories){
59+
this.categories = filters.categories;
60+
change = true;
61+
}
62+
if (change){
63+
$(this).trigger('filterchange');
64+
}
65+
}
66+
}
67+
68+
export default new DataManager();

Diff for: ‎src/js/issue-filter.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as vigiloconfig from './vigilo-config';
2+
import * as vigiloui from './ui-template';
3+
import dataManager from './dataManager';
4+
5+
(async function() {
6+
try {
7+
// Fill category select
8+
var cats = await vigiloconfig.getCategories();
9+
for (var i in cats) {
10+
$("#modal-filters #categories-select")
11+
.append(`<p>
12+
<label>
13+
<input type="checkbox" checked="checked" name="categories" value="${i}" />
14+
<span>${cats[i]}</span>
15+
</label>
16+
</p>`)
17+
}
18+
M.Modal.init($("#modal-filters"));
19+
M.Modal.getInstance($("#modal-filters")).options.onCloseStart = function(){
20+
dataManager.setFilter({
21+
categories: $.map($("#modal-filters input[name=categories]:checked"), (i)=>$(i).val()),
22+
dow: $.map($("#modal-filters input[name=dow]:checked"), (i)=>$(i).val()),
23+
hour: $.map($("#modal-filters input[name=hour]:checked"), (i)=>$(i).val())
24+
})
25+
}
26+
27+
function updateCheckbox(){
28+
if ($(this).parent().parent().find('input:checked').length == 0){
29+
$(this).parent().parent().find('h6 i').html('check_box_outline_blank');
30+
} else if ($(this).parent().parent().find('input:checked').length != $(this).parent().parent().find('input').length){
31+
$(this).parent().parent().find('h6 i').html('indeterminate_check_box');
32+
} else {
33+
$(this).parent().parent().find('h6 i').html('check_box');
34+
}
35+
}
36+
37+
$('#modal-filters h6').click(function(){
38+
if ($(this).find('i').html() == "check_box"){
39+
$(this).parent().find('input').prop('checked',false)
40+
} else {
41+
$(this).parent().find('input').prop('checked',true)
42+
}
43+
updateCheckbox.call($(this).parent().find('label').first())
44+
});
45+
46+
$('#modal-filters label').click(updateCheckbox);
47+
48+
49+
} catch (e) {
50+
$("#issues .cards-container").empty().append(vigiloui.errorCard(e));
51+
}
52+
})()

0 commit comments

Comments
 (0)