beginning to implement favorites

Signed-off-by: Julien Veyssier <[email protected]>

src/components/AppNavigationContactsItem.vue

@@ -36,6 +36,7 @@
 				:force-menu="false"
 				@click="onGroupClick(gid)">
 				<template slot="counter">
+					&nbsp;
 					<span v-if="enabled && contacts.length && g.enabled">{{ g.counter }}</span>
 				</template>
 				<template slot="actions">

src/components/AppNavigationFavoritesItem.vue

@@ -0,0 +1,142 @@
+<template>
+	<AppNavigationItem
+		:icon="loading ? 'icon-loading-small' : 'icon-favorite'"
+		:title="t('maps', 'My favorites')"
+		:class="{ 'item-disabled': !enabled }"
+		:allow-collapse="true"
+		:open="open"
+		:force-menu="false"
+		@click="onFavoritesClick"
+		@update:open="onUpdateOpen">
+		<template slot="counter">
+			&nbsp;
+			<span v-if="enabled && nbFavorites">{{ nbFavorites }}</span>
+		</template>
+		<template v-if="enabled" slot="actions">
+			<ActionButton
+				icon="icon-checkmark"
+				@click="onToggleAllClick">
+				{{ t('maps', 'Toggle all') }}
+			</ActionButton>
+			<ActionButton
+				icon="icon-search"
+				:close-after-click="true"
+				@click="onZoomAllClick">
+				{{ t('maps', 'Zoom') }}
+			</ActionButton>
+		</template>
+		<template #default>
+			<AppNavigationItem
+				v-for="(c, catid) in categories"
+				:key="catid"
+				:title="c.name"
+				:class="{ 'subitem-disabled': !c.enabled }"
+				:allow-collapse="false"
+				:force-menu="false"
+				@click="onCategoryClick(catid)">
+				<template #icon>
+					<img :src="getIconUrl(c.color)">
+				</template>
+				<template slot="counter">
+					&nbsp;
+					<span v-if="enabled && nbFavorites && c.enabled">{{ c.counter }}</span>
+				</template>
+				<template slot="actions">
+					<ActionButton v-if="enabled && nbFavorites && c.enabled"
+						icon="icon-search"
+						:close-after-click="true"
+						@click="onZoomCategoryClick(catid)">
+						{{ t('maps', 'Zoom') }}
+					</ActionButton>
+				</template>
+			</AppNavigationItem>
+		</template>
+	</AppNavigationItem>
+</template>
+
+<script>
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import { generateUrl } from '@nextcloud/router'
+
+import optionsController from '../optionsController'
+
+export default {
+	name: 'AppNavigationFavoritesItem',
+
+	components: {
+		AppNavigationItem,
+		ActionButton,
+	},
+
+	props: {
+		enabled: {
+			type: Boolean,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		favorites: {
+			type: Object,
+			required: true,
+		},
+		categories: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			open: optionsController.optionValues?.favoriteCategoryListShow === 'true',
+		}
+	},
+
+	computed: {
+		nbFavorites() {
+			return Object.keys(this.favorites).length
+		},
+	},
+
+	methods: {
+		onFavoritesClick() {
+			if (!this.enabled && !this.open) {
+				this.open = true
+				optionsController.saveOptionValues({ favoriteCategoryListShow: 'true' })
+			}
+			this.$emit('favorites-clicked')
+		},
+		onUpdateOpen(isOpen) {
+			this.open = isOpen
+			optionsController.saveOptionValues({ favoriteCategoryListShow: isOpen ? 'true' : 'false' })
+		},
+		onToggleAllClick() {
+			this.$emit('toggle-all-categories')
+		},
+		onZoomAllClick() {
+			this.$emit('zoom-all-categories')
+		},
+		onZoomCategoryClick(catid) {
+			this.$emit('zoom-category', catid)
+		},
+		onCategoryClick(catid) {
+			this.$emit('category-clicked', catid)
+		},
+		getIconUrl(color) {
+			return generateUrl('/svg/core/actions/star?color=' + color)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.item-disabled {
+	opacity: 0.5;
+}
+
+.subitem-disabled {
+	opacity: 0.5;
+}
+</style>

src/network.js

@@ -93,6 +93,11 @@ export function placeContact(bookid, uri, uid, lat, lng, address, type = 'home')
 	return axios.put(url, req)
 }
 
+export function getFavorites() {
+	const url = generateUrl('/apps/maps/favorites')
+	return axios.get(url)
+}
+
 export function getPhotos() {
 	const url = generateUrl('/apps/maps/photos')
 	return axios.get(url)

src/optionsController.js

@@ -14,7 +14,8 @@ const optionsController = {
 	optionValues: {},
 	photosEnabled: true,
 	contactsEnabled: true,
-	enabledFavoriteCategories: [],
+	favoritesEnabled: true,
+	disabledFavoriteCategories: [],
 	disabledContactGroups: [],
 	enabledTracks: [],
 	enabledDevices: [],
@@ -69,6 +70,19 @@ const optionsController = {
 			this.contactsEnabled = false
 		}
 
+		if ('favoritesEnabled' in optionsValues && optionsValues.favoritesEnabled !== 'true') {
+			this.favoritesEnabled = false
+		}
+		if ('jsonDisabledFavoriteCategories' in optionsValues
+			&& optionsValues.jsonDisabledFavoriteCategories
+			&& optionsValues.jsonDisabledFavoriteCategories !== '') {
+			try {
+				this.disabledFavoriteCategories = JSON.parse(this.optionValues.jsonDisabledFavoriteCategories)
+			} catch (error) {
+				console.error(error)
+			}
+		}
+
 		// routing
 		if ('osrmCarURL' in optionsValues && optionsValues.osrmCarURL !== '') {
 			this.nbRouters++
@@ -87,88 +101,6 @@ const optionsController = {
 			this.nbRouters++
 		}
 		/*
-		// set tilelayer before showing photo layer because it needs a max zoom value
-		if (optionsValues.hasOwnProperty('displaySlider') && optionsValues.displaySlider === 'true') {
-			$('#timeRangeSlider').show();
-			$('#display-slider').prop('checked', true);
-		}
-
-		//detect Webgl
-		var canvas = document.createElement('canvas');
-		var experimental = false;
-		var gl;
-
-		try { gl = canvas.getContext("webgl"); }
-		catch (x) { gl = null; }
-
-		if (gl == null) {
-			try { gl = canvas.getContext("experimental-webgl"); experimental = true; }
-			catch (x) { gl = null; }
-		}
-
-		if (optionsValues.hasOwnProperty('mapboxAPIKEY') && optionsValues.mapboxAPIKEY !== '' && gl != null) {
-			// change "button" layers
-			delete mapController.baseLayers['OpenStreetMap'];
-			delete mapController.baseLayers['ESRI Aerial'];
-			mapController.defaultStreetLayer = 'Mapbox vector streets';
-			mapController.defaultSatelliteLayer = 'Mapbox satellite';
-			// remove dark, esri topo and openTopoMap
-			// Mapbox outdoors and dark are good enough
-			mapController.controlLayers.removeLayer(mapController.baseLayers['ESRI Topo']);
-			mapController.controlLayers.removeLayer(mapController.baseLayers['OpenTopoMap']);
-			mapController.controlLayers.removeLayer(mapController.baseLayers['Dark']);
-			delete mapController.baseLayers['ESRI Topo'];
-			delete mapController.baseLayers['OpenTopoMap'];
-			delete mapController.baseLayers['Dark'];
-
-			// add mapbox-gl tile servers
-			var attrib = '<a href="https://www.mapbox.com/about/maps/">© Mapbox</a> '+
-				'<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap</a> '+
-				'<a href="https://www.mapbox.com/map-feedback/">'+t('maps', 'Improve this map')+'</a>';
-			var attribSat = attrib + '<a href="https://www.digitalglobe.com/">© DigitalGlobe</a>'
-
-			mapController.baseLayers['Mapbox vector streets'] = L.mapboxGL({
-				accessToken: optionsValues.mapboxAPIKEY,
-				style: 'mapbox://styles/mapbox/streets-v8',
-				minZoom: 1,
-				maxZoom: 22,
-				attribution: attrib
-			});
-			//mapController.controlLayers.addBaseLayer(mapController.baseLayers['Mapbox vector streets'], 'Mapbox vector streets');
-
-			mapController.baseLayers['Topographic'] = L.mapboxGL({
-				accessToken: optionsValues.mapboxAPIKEY,
-				style: 'mapbox://styles/mapbox/outdoors-v11',
-				minZoom: 1,
-				maxZoom: 22,
-				attribution: attrib
-			});
-			mapController.controlLayers.addBaseLayer(mapController.baseLayers['Topographic'], 'Topographic');
-
-			mapController.baseLayers['Dark'] = L.mapboxGL({
-				accessToken: optionsValues.mapboxAPIKEY,
-				style: 'mapbox://styles/mapbox/dark-v8',
-				minZoom: 1,
-				maxZoom: 22,
-				attribution: attrib
-			});
-			mapController.controlLayers.addBaseLayer(mapController.baseLayers['Dark'], 'Dark');
-
-			mapController.baseLayers['Mapbox satellite'] = L.mapboxGL({
-				accessToken: optionsValues.mapboxAPIKEY,
-				style: 'mapbox://styles/mapbox/satellite-streets-v9',
-				minZoom: 1,
-				maxZoom: 22,
-				attribution: attribSat
-			});
-			//mapController.controlLayers.addBaseLayer(mapController.baseLayers['Mapbox satellite'], 'Mapbox satellite');
-		}
-		if (optionsValues.hasOwnProperty('tileLayer')) {
-			mapController.changeTileLayer(optionsValues.tileLayer);
-		}
-		else {
-			mapController.changeTileLayer(mapController.defaultStreetLayer);
-		}
 		if (!optionsValues.hasOwnProperty('photosLayer') || optionsValues.photosLayer === 'true') {
 			photosController.toggleLayer();
 		}
@@ -187,15 +119,6 @@ const optionsController = {
 		if (!optionsValues.hasOwnProperty('favoriteCategoryListShow') || optionsValues.favoriteCategoryListShow === 'true') {
 			favoritesController.toggleCategoryList();
 		}
-		if (optionsValues.hasOwnProperty('enabledFavoriteCategories')
-			&& optionsValues.enabledFavoriteCategories
-			&& optionsValues.enabledFavoriteCategories !== '')
-		{
-			that.enabledFavoriteCategories = optionsValues.enabledFavoriteCategories.split('|');
-		}
-		if (!optionsValues.hasOwnProperty('favoritesEnabled') || optionsValues.favoritesEnabled === 'true') {
-			favoritesController.toggleFavorites();
-		}
 		if (!optionsValues.hasOwnProperty('trackListShow') || optionsValues.trackListShow === 'true') {
 			tracksController.toggleTrackList();
 		}