Stash

package.json

@@ -20,7 +20,6 @@
         "file-saver": "^2.0.0",
         "gps-to-gpx": "git://github.com/phyks/gps-to-gpx.git#1cb5adf4dd382266d076d7df3cb5aa3a4d7dd27b",
         "localforage": "^1.7.3",
-        "nosleep.js": "^0.9.0",
         "ol": "^5.3.0",
         "roboto-fontface": "^0.10.0",
         "serviceworker-webpack-plugin": "^1.0.1",

scripts/opendata/works.py

@@ -60,14 +60,14 @@ def preprocess_hauts_de_seine(data):
             new_fields['date_debut'] = arrow.get(
                 datetime.datetime(
                     now.year,
-                    (now.month // 3) * 3,
+                    max(1, min((now.month // 3) * 3, 12)),
                     1
                 )
             ).isoformat()
             new_fields['date_fin'] = arrow.get(
                 datetime.datetime(
                     now.year,
-                    (now.month // 3 + 1) * 3,
+                    max(1, min((now.month // 3 + 1) * 3, 12)),
                     1
                 )
             ).isoformat()

src/components/PermissionsSwitches.vue

@@ -1,47 +1,104 @@
 <template>
-    <div>
-        <v-switch
-            class="switch"
-            :messages="preventSuspendMessages"
-            color="success"
-            :label="$t('permissions.preventSuspend')"
-            v-model="hasPreventSuspendPermission"
+    <v-list subheader three-line>
+        <v-subheader>Permissions</v-subheader>
+
+        <v-list-tile
+            @click.prevent="hasPlaySoundPermission = !hasPlaySoundPermission"
             >
-        </v-switch>
-        <v-switch
-            class="switch"
-            color="success"
-            :label="$t('permissions.playSound')"
-            v-model="hasPlaySoundPermission"
+            <v-list-tile-action>
+                <v-checkbox
+                    v-model="hasPlaySoundPermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content
+                >
+                <v-list-tile-title>
+                    {{ $t('permissions.playSound') }}
+                </v-list-tile-title>
+            </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile
+            @click.prevent="hasVibratePermission = !hasVibratePermission"
             >
-        </v-switch>
-        <v-switch
-            class="switch"
-            color="success"
-            :label="$t('permissions.vibrate')"
-            v-model="hasVibratePermission"
+            <v-list-tile-action>
+                <v-checkbox
+                    v-model="hasVibratePermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content
+                >
+                <v-list-tile-title>
+                    {{ $t('permissions.vibrate') }}
+                </v-list-tile-title>
+            </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile
+            @click.prevent="hasGeolocationPermission = !hasGeolocationPermission"
             >
-        </v-switch>
-        <v-switch
-            class="switch"
-            :messages="geolocationPermissionMessages"
-            color="success"
-            :label="$t('permissions.geolocation')"
-            v-model="hasGeolocationPermission"
+            <v-list-tile-action>
+                <v-checkbox
+                    v-model="hasGeolocationPermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content>
+                <v-list-tile-title>
+                    {{ $t('permissions.geolocation') }}
+                </v-list-tile-title>
+                <v-list-tile-sub-title>
+                    {{ $t('permissions.geolocationDescription') }}
+                </v-list-tile-sub-title>
+            </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile
+            @click.prevent="hasPreventSuspendPermission = !hasPreventSuspendPermission"
             >
-        </v-switch>
-        <v-switch
-            class="switch"
-            :messages="permanentNotificationMessages"
-            color="success"
-            :label="$t('permissions.permanentNotification')"
-            v-model="hasPermanentNotificationPermission"
+            <v-list-tile-action>
+                <v-checkbox
+                    v-model="hasPreventSuspendPermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content>
+                <v-list-tile-title>
+                    {{ $t('permissions.preventSuspend') }}
+                </v-list-tile-title>
+                <v-list-tile-sub-title>
+                    {{ $t('permissions.preventSuspendDescription') }}
+                </v-list-tile-sub-title>
+            </v-list-tile-content>
+        </v-list-tile>
+
+        <v-list-tile
+            @click.prevent="hasPermanentNotificationPermission = (
+                !hasPermanentNotificationPermission
+            )"
             >
-        </v-switch>
-    </div>
+            <v-list-tile-action>
+                <v-checkbox
+                    v-model="hasPermanentNotificationPermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content>
+                <v-list-tile-title>
+                    {{ $t('permissions.permanentNotification') }}
+                </v-list-tile-title>
+                <v-list-tile-sub-title>
+                    {{ $t('permissions.permanentNotificationDescription') }}
+                </v-list-tile-sub-title>
+            </v-list-tile-content>
+        </v-list-tile>
+    </v-list>
 </template>
 
 <script>
+// TODO: Disable list items if function is not supported
 export default {
     computed: {
         hasGeolocationPermission: {
@@ -85,19 +142,6 @@ export default {
             },
         },
     },
-    data() {
-        return {
-            geolocationPermissionMessages: [
-                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.geolocationDescription')}`,
-            ],
-            permanentNotificationMessages: [
-                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.permanentNotificationDescription')}`,
-            ],
-            preventSuspendMessages: [
-                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.preventSuspendDescription')}`,
-            ],
-        };
-    },
 };
 </script>
 

src/views/Map.vue

@@ -52,9 +52,7 @@
 </template>
 
 <script>
-// Import directly from dist to avoid ES6 issues
-// See https://github.com/richtr/NoSleep.js/issues/46.
-import NoSleep from 'nosleep.js';
+import NoSleep from '@/tools/nosleep';
 
 import Alert from '@/components/Alert.vue';
 import Map from '@/components/Map.vue';

src/views/Settings.vue

@@ -1,58 +1,138 @@
 <template>
     <v-container fluid class="no-padding">
         <v-layout row wrap>
+            <v-dialog v-model="isDialog" max-width="250px">
+                <v-card>
+                    <template v-if="whichDialog === LOCALE">
+                        <v-card-title>
+                            {{ $t('settings.locale') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="i18nItems"
+                                v-model="locale"
+                                item-text="name"
+                                item-value="iso"
+                                required
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === TILE_SERVER">
+                        <v-card-title>
+                            {{ $t('settings.tileServer') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="tileServers"
+                                v-model="tileServer"
+                                :label="$t('settings.tileServer')"
+                                required
+                                ></v-select>
+
+                            <v-text-field
+                                :hint="$t('settings.customTileServerURLHint')"
+                                :label="$t('settings.customTileServerURL')"
+                                v-model="customTileServerURL"
+                                v-if="showCustomTileServerURLField"
+                                required
+                                >
+                            </v-text-field>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === DEFAULT_ORIENTATION">
+                        <v-card-title>
+                            {{ $t('settings.defaultOrientationMode') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="orientationModes"
+                                v-model="defaultOrientationMode"
+                                required
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <template v-else-if="whichDialog === TILE_CACHING">
+                        <v-card-title>
+                            {{ $t('settings.tileCachingDuration') }}
+                        </v-card-title>
+                        <v-card-text>
+                            <v-select
+                                :items="tileCachingDurationOptions"
+                                v-model="tileCachingDuration"
+                                item-text="name"
+                                item-value="duration"
+                                required
+                                v-if="tileCachingEnabled"
+                                ></v-select>
+                        </v-card-text>
+                    </template>
+                    <v-card-actions>
+                        <v-btn color="primary" flat @click="isDialog = false">Close</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
             <v-flex xs12 sm4 offset-sm4 class="text-xs-center">
-                <h2>{{ $t('menu.Settings') }}</h2>
-                <form>
-                    <v-select
-                        :items="i18nItems"
-                        v-model="locale"
-                        item-text="name"
-                        item-value="iso"
-                        :label="$t('settings.locale')"
-                        required
-                        ></v-select>
+                <v-list subheader two-line>
+                    <v-subheader>{{ $t('settings.general') }}</v-subheader>
 
-                    <v-select
-                        :items="tileServers"
-                        v-model="tileServer"
-                        :label="$t('settings.tileServer')"
-                        required
-                        ></v-select>
+                    <v-list-tile @click="showDialog(LOCALE)">
+                        <v-list-tile-content>
+                            <v-list-tile-title>
+                                {{ $t('settings.locale') }}
+                            </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ localeName }}
+                            </v-list-tile-sub-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
 
-                    <v-select
-                        :items="orientationModes"
-                        v-model="defaultOrientationMode"
-                        :label="$t('settings.defaultOrientationMode')"
-                        required
-                        ></v-select>
+                    <v-list-tile @click="showDialog(TILE_SERVER)">
+                        <v-list-tile-content>
+                            <v-list-tile-title>
+                                {{ $t('settings.tileServer') }}
+                            </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ tileServer }}
+                            </v-list-tile-sub-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
 
-                    <v-select
-                        :items="tileCachingDurationOptions"
-                        v-model="tileCachingDuration"
-                        item-text="name"
-                        item-value="duration"
-                        :label="$t('settings.tileCachingDuration')"
-                        required
-                        v-if="tileCachingEnabled"
-                        ></v-select>
+                    <v-list-tile @click="showDialog(DEFAULT_ORIENTATION)">
+                        <v-list-tile-content>
+                            <v-list-tile-title>
+                                {{ $t('settings.defaultOrientationMode') }}
+                            </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ defaultOrientationModeName }}
+                            </v-list-tile-sub-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
 
-                    <v-text-field
-                        :hint="$t('settings.customTileServerURLHint')"
-                        :label="$t('settings.customTileServerURL')"
-                        v-model="customTileServerURL"
-                        v-if="showCustomTileServerURLField"
-                        required
-                        >
-                    </v-text-field>
-
-                    <v-checkbox
-                        :label="$t('settings.skipOnboarding')"
-                        v-model="skipOnboarding"
-                        ></v-checkbox>
-
-                    <PermissionsSwitches></PermissionsSwitches>
-                </form>
+                    <v-list-tile v-if="tileCachingEnabled"  @click="showDialog(TILE_CACHING)">
+                        <v-list-tile-content>
+                            <v-list-tile-title>
+                                {{ $t('settings.tileCachingDuration') }}
+                            </v-list-tile-title>
+                            <v-list-tile-sub-title>
+                                {{ tileCachingDurationName }}
+                            </v-list-tile-sub-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
+                </v-list>
+                <v-divider></v-divider>
+                <PermissionsSwitches></PermissionsSwitches>
+                <v-divider></v-divider>
+                <v-list subheader>
+                    <v-subheader>{{ $t('settings.misc') }}</v-subheader>
+                    <v-list-tile @click="dialog">
+                        <v-list-tile-content>
+                            <v-list-tile-title>
+                                {{ $t('settings.showOnboarding') }}
+                            </v-list-tile-title>
+                        </v-list-tile-content>
+                    </v-list-tile>
+                </v-list>
             </v-flex>
         </v-layout>
     </v-container>
@@ -95,6 +175,11 @@ export default {
                 );
             },
         },
+        defaultOrientationModeName() {
+            return this.orientationModes.find(
+                item => item.value === this.defaultOrientationMode,
+            ).text;
+        },
         locale: {
             get() {
                 return this.$store.state.settings.locale;
@@ -103,6 +188,21 @@ export default {
                 this.$store.dispatch('setLocale', { locale });
             },
         },
+        localeName() {
+            return this.i18nItems.find(item => item.iso === this.locale).name;
+        },
+        orientationModes() {
+            return [
+                {
+                    text: this.$t('settings.fixedNorth'),
+                    value: false,
+                },
+                {
+                    text: this.$t('settings.autorotate'),
+                    value: true,
+                },
+            ];
+        },
         showCustomTileServerURLField() {
             return !(this.$store.state.settings.tileServer in TILE_SERVERS);
         },
@@ -143,6 +243,11 @@ export default {
                 },
             ];
         },
+        tileCachingDurationName() {
+            return this.tileCachingDurationOptions.find(
+                item => item.duration === this.tileCachingDuration,
+            ).name;
+        },
         tileServer: {
             get() {
                 const tileServerStore = this.$store.state.settings.tileServer;
@@ -164,7 +269,6 @@ export default {
         },
     },
     data() {
-        const $t = this.$t.bind(this);
         const i18nItems = [];
         Object.keys(AVAILABLE_LOCALES).forEach(iso => i18nItems.push({
             iso,
@@ -178,19 +282,21 @@ export default {
         );
 
         return {
+            DEFAULT_ORIENTATION: 'DEFAULT_ORIENTATION',
+            LOCALE: 'LOCALE',
+            TILE_CACHING: 'TILE_CACHING',
+            TILE_SERVER: 'TILE_SERVER',
+            isDialog: false,
+            whichDialog: null,
             i18nItems,
-            orientationModes: [
-                {
-                    text: $t('settings.fixedNorth'),
-                    value: false,
-                },
-                {
-                    text: $t('settings.autorotate'),
-                    value: true,
-                },
-            ],
             tileCachingEnabled,
         };
     },
+    methods: {
+        showDialog(which) {
+            this.isDialog = true;
+            this.whichDialog = which;
+        },
+    },
 };
 </script>

src/vuetify.js

@@ -9,6 +9,7 @@ import VCard from 'vuetify/es5/components/VCard';
 import VCheckbox from 'vuetify/es5/components/VCheckbox';
 import VCombobox from 'vuetify/es5/components/VCombobox';
 import VDialog from 'vuetify/es5/components/VDialog';
+import VDivider from 'vuetify/es5/components/VDivider';
 import VGrid from 'vuetify/es5/components/VGrid';
 import VIcon from 'vuetify/es5/components/VIcon';
 import VList from 'vuetify/es5/components/VList';
@@ -16,6 +17,7 @@ import VMenu from 'vuetify/es5/components/VMenu';
 import VProgressCircular from 'vuetify/es5/components/VProgressCircular';
 import VProgressLinear from 'vuetify/es5/components/VProgressLinear';
 import VSelect from 'vuetify/es5/components/VSelect';
+import VSubheader from 'vuetify/es5/components/VSubheader';
 import VSwitch from 'vuetify/es5/components/VSwitch';
 import VTextarea from 'vuetify/es5/components/VTextarea';
 import VTextField from 'vuetify/es5/components/VTextField';
@@ -32,6 +34,7 @@ Vue.use(Vuetify, {
         VCheckbox,
         VCombobox,
         VDialog,
+        VDivider,
         VGrid,
         VIcon,
         VList,
@@ -39,6 +42,7 @@ Vue.use(Vuetify, {
         VProgressCircular,
         VProgressLinear,
         VSelect,
+        VSubheader,
         VSwitch,
         VTextarea,
         VTextField,

yarn.lock

@@ -5722,11 +5722,6 @@ normalize-url@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.2.0.tgz#98d0948afc82829f374320f405fe9ca55a5f8567"
 
-nosleep.js@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/nosleep.js/-/nosleep.js-0.9.0.tgz#0f1371b81dc182e3b6bbdb837e880f16db9d7163"
-  integrity sha512-qLOl2MmuGOPZY7Exi0kYJSCr2e9IcAtOykOo7hXUGAoaMC1Iqj0m+Aj2REuay68mDkhbc5CoA4ccUvcZI175Kw==
-
 npm-bundled@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"