Add help button. Fix filter and legend buttons. (d8ed75e7) · Commits · Matěj Lang / antarstick-js

src/components/header/Header.vue

+36 −27

Original line number	Original line	Diff line number	Diff line
	@@ -2,22 +2,19 @@
	<div class="header-container" :style="cssVars">		<div class="header-container" :style="cssVars">
	<div class="top-bar">		<div class="top-bar">
	<h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>		<h1 style="margin-top: auto; margin-bottom: auto;">ANTARSTICK</h1>
	<filter-icon		<help-circle-icon
			v-if="!showHelp"
	class="icon"		class="icon"
	v-if="!showFilters"		@click="showHelp = true"
	@click="onToggleShowFilters"
	/>		/>
	<filter-off-icon class="icon" v-else @click="onToggleShowFilters" />		<help-circle-outline-icon class="icon" v-else @click="showHelp = false" />
	<map-legend-icon		<filter-icon
	class="icon"
	v-if="!showLegend"
	@click="onToggleShowLegend"
	/>
	<help-circle-outline-icon
	class="icon"		class="icon"
	v-else		v-if="!showFilters"
	@click="onToggleShowLegend"		@click="showFilters = true"
	/>		/>
			<filter-off-icon class="icon" v-else @click="showFilters = false" />
			<map-legend-icon class="icon" @click="showLegend = !showLegend" />
	<content-save-icon		<content-save-icon
	class="icon"		class="icon"
	@click="commitChangesToDisk"		@click="commitChangesToDisk"
	@@ -25,8 +22,6 @@
	/>		/>
	</div>		</div>
	<div class="charts">		<div class="charts">
	<Filters v-if="showFilters" />
	<Legend v-if="showLegend" />
	<div		<div
	v-for="cameraID in cameraIDs"		v-for="cameraID in cameraIDs"
	:key="cameraID"		:key="cameraID"
	@@ -75,6 +70,7 @@ import ContentSaveIcon from 'icons/ContentSave'
	import FilterIcon from 'icons/Filter'		import FilterIcon from 'icons/Filter'
	import FilterOffIcon from 'icons/FilterOff'		import FilterOffIcon from 'icons/FilterOff'
	import MapLegendIcon from 'icons/MapLegend'		import MapLegendIcon from 'icons/MapLegend'
			import HelpCircleIcon from 'icons/HelpCircle'
	import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'		import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'
	import ChevronDownIcon from 'icons/ChevronDown'		import ChevronDownIcon from 'icons/ChevronDown'
	import ChevronRightIcon from 'icons/ChevronRight'		import ChevronRightIcon from 'icons/ChevronRight'
	@@ -86,13 +82,14 @@ export default {
	components: {		components: {
	ContextMap,		ContextMap,
	AveragesMap,		AveragesMap,
	Filters,		// Filters,
	Legend,		// Legend,

	ContentSaveIcon,		ContentSaveIcon,
	FilterIcon,		FilterIcon,
	FilterOffIcon,		FilterOffIcon,
	MapLegendIcon,		MapLegendIcon,
			HelpCircleIcon,
	HelpCircleOutlineIcon,		HelpCircleOutlineIcon,
	ChevronDownIcon,		ChevronDownIcon,
	ChevronRightIcon,		ChevronRightIcon,
	@@ -114,12 +111,30 @@ export default {
	hasUncommitedChanges() {		hasUncommitedChanges() {
	return this.$store.getters.hasUncommitedChanges		return this.$store.getters.hasUncommitedChanges
	},		},
	showFilters() {		showFilters: {
			get() {
	return this.$store.getters.showFilters		return this.$store.getters.showFilters
	},		},
	showLegend() {		set(value) {
			this.$store.dispatch('setShowFilters', value)
			}
			},
			showLegend: {
			get() {
	return this.$store.getters.showLegend		return this.$store.getters.showLegend
	},		},
			set(value) {
			this.$store.dispatch('setShowLegend', value)
			}
			},
			showHelp: {
			get() {
			return this.$store.getters.showHelp
			},
			set(value) {
			this.$store.dispatch('setShowHelp', value)
			}
			},
	cameraIDs() {		cameraIDs() {
	return this.$store.getters.cameraIDs		return this.$store.getters.cameraIDs
	},		},
	@@ -156,12 +171,6 @@ export default {
	if (this.hasUncommitedChanges) {		if (this.hasUncommitedChanges) {
	this.$store.dispatch('commitChangesToDisk')		this.$store.dispatch('commitChangesToDisk')
	}		}
	},
	onToggleShowFilters() {
	this.$store.dispatch('setShowFilters', !this.showFilters)
	},
	onToggleShowLegend() {
	this.$store.dispatch('setShowLegend', !this.showLegend)
	}		}
	}		}
	}		}
	@@ -184,7 +193,7 @@ export default {
	display: grid;		display: grid;
	row-gap: 10px;		row-gap: 10px;
	grid-template-rows: 50px;		grid-template-rows: 50px;
	grid-template-columns: auto 50px 50px 50px 20px;		grid-template-columns: auto 50px 50px 50px 50px 20px;
	}		}

	.charts {		.charts {

src/store/actions.js

+10 −0

Original line number	Original line	Diff line number	Diff line
	@@ -507,6 +507,16 @@ export default {
	}		}
	}		}
	},		},
			setShowHelp({ commit }, showHelp) {
			if (typeof showHelp === 'boolean') {
			commit('SET_SHOW_HELP', showHelp)
			} else {
			throw {
			name: 'TypeError',
			message: 'setShowHelp: showHelp must be a boolean.'
			}
			}
			},
	setZoomState({ commit }, zoomState) {		setZoomState({ commit }, zoomState) {
	commit('SET_ZOOM_STATE', zoomState)		commit('SET_ZOOM_STATE', zoomState)
	},		},

src/store/getters.js

+3 −0

Original line number	Original line	Diff line number	Diff line
	@@ -56,6 +56,9 @@ export default {
	showLegend: state => {		showLegend: state => {
	return state.controls.showLegend		return state.controls.showLegend
	},		},
			showHelp: state => {
			return state.controls.showHelp
			},
	timespanStart: state => {		timespanStart: state => {
	return state.timespan.start		return state.timespan.start
	},		},

src/store/index.js

+2 −1

Original line number	Original line	Diff line number	Diff line
	@@ -94,7 +94,8 @@ export default new Vuex.Store({
	showDaysGradient: true,		showDaysGradient: true,
	showImageDialog: false,		showImageDialog: false,
	showFilters: false,		showFilters: false,
	showLegend: false		showLegend: false,
			showHelp: false
	},		},
	zoomState: {		zoomState: {
	selection: [0, 1],		selection: [0, 1],

src/store/mutations.js

+3 −0

Original line number	Original line	Diff line number	Diff line
	@@ -104,6 +104,9 @@ export default {
	SET_SHOW_LEGEND(state, showLegend) {		SET_SHOW_LEGEND(state, showLegend) {
	state.controls.showLegend = showLegend		state.controls.showLegend = showLegend
	},		},
			SET_SHOW_HELP(state, showHelp) {
			state.controls.showHelp = showHelp
			},
	SET_ZOOM_STATE(state, zoomState) {		SET_ZOOM_STATE(state, zoomState) {
	state.zoomState = zoomState		state.zoomState = zoomState
	},		},