Fullscreen for batch job and other panels #340

Open-EO · Jan 15, 2025 · fa88c3e · fa88c3e
1 parent 88f87c9
commit fa88c3e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/src/components/CustomProcessPanel.vue b/src/components/CustomProcessPanel.vue
@@ -3,6 +3,7 @@
 		<template slot="toolbar">
 			<AsyncButton title="Store the process in the process editor on the server" :fn="addProcessFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Add</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
+			<FullscreenButton :element="() => this.$el" />
 		</template>
 		<template #actions="p">
 			<AsyncButton title="Show details about this process" :fn="() => processInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
@@ -15,6 +16,7 @@
 <script>
 import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
+import FullscreenButton from './FullscreenButton.vue';
 import SyncButton from './SyncButton.vue';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
 import Utils from '../utils.js';
@@ -25,6 +27,7 @@ export default {
 	mixins: [WorkPanelMixin('userProcesses', 'custom process', 'custom processes', false), EventBusMixin],
 	components: {
 		AsyncButton,
+		FullscreenButton,
 		SyncButton
 	},
 	data() {

diff --git a/src/components/FilePanel.vue b/src/components/FilePanel.vue
@@ -10,6 +10,7 @@
 					</div>
 				</div>
 				<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
+				<FullscreenButton :element="() => this.$el" />
 			</template>
 			<template #actions="p">
 				<AsyncButton title="Download this file to your computer" :fn="() => downloadFile(p.row)" v-show="supportsRead" fa icon="fas fa-download"></AsyncButton>
@@ -22,6 +23,7 @@
 <script>
 import WorkPanelMixin from './WorkPanelMixin';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
+import FullscreenButton from './FullscreenButton.vue';
 import SyncButton from './SyncButton.vue';
 import Utils from '../utils.js';
 
@@ -30,6 +32,7 @@ export default {
 	mixins: [WorkPanelMixin('files', 'file', 'files')],
 	components: {
 		AsyncButton,
+		FullscreenButton,
 		SyncButton
 	},
 	data() {

diff --git a/src/components/FullscreenButton.vue b/src/components/FullscreenButton.vue
@@ -35,13 +35,13 @@ export default {
 			el.addEventListener('keydown', this.keyDownFn);
 		}
 	},
-    beforeDestroy() {
+	beforeDestroy() {
 		let el = this.getElement();
 		if (el) {
 			el.removeEventListener('keydown', this.keyDownFn);
 		}
-    },
-    computed: {
+	},
+	computed: {
 		...Utils.mapState('editor', ['hightestModalZIndex'])
 	},
 	methods: {
@@ -52,7 +52,7 @@ export default {
 				this.toggleFullscreen();
 				e.preventDefault();
 				e.stopPropagation();
-    		}
+			}
 		},
 		getElement() {
 			if (typeof this.element === 'string') {

diff --git a/src/components/JobPanel.vue b/src/components/JobPanel.vue
@@ -4,6 +4,7 @@
 			<AsyncButton title="Create a new job from the process in the process editor for batch processing" :fn="createJobFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create Batch Job</AsyncButton>
 			<AsyncButton title="Run the process in the process editor directly and view the results without storing them permanently" :fn="executeProcess" v-show="supports('computeResult')" :disabled="!this.hasProcess" fa confirm icon="fas fa-play">Run now</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
+			<FullscreenButton :element="() => this.$el" />
 		</template>
 		<template #actions="p">
 			<AsyncButton title="Show details about this job" :fn="() => showJobInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
@@ -25,6 +26,7 @@
 import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
 import SyncButton from './SyncButton.vue';
+import FullscreenButton from './FullscreenButton.vue';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
 import Utils from '../utils.js';
 import { Job } from '@openeo/js-client';
@@ -43,6 +45,7 @@ export default {
 	],
 	components: {
 		AsyncButton,
+		FullscreenButton,
 		SyncButton
 	},
 	data() {

diff --git a/src/components/ServicePanel.vue b/src/components/ServicePanel.vue
@@ -4,6 +4,7 @@
 			<AsyncButton title="Create a new permanent service from the process in the process editor" :fn="createServiceFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create</AsyncButton>
 			<AsyncButton title="Quickly show the process on map without storing it permanently" :fn="quickViewServiceFromScript" v-show="supportsQuickView" :disabled="!this.hasProcess" fa confirm icon="fas fa-map">Show on Map</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
+			<FullscreenButton :element="() => this.$el" />
 		</template>
 		<template #actions="p">
 			<AsyncButton title="Show details about this service" :fn="() => serviceInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
@@ -22,6 +23,7 @@ import EventBusMixin from './EventBusMixin';
 import WorkPanelMixin from './WorkPanelMixin';
 import FieldMixin from './FieldMixin';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
+import FullscreenButton from './FullscreenButton.vue';
 import SyncButton from './SyncButton.vue';
 import Utils from '../utils';
 import { Service } from '@openeo/js-client';
@@ -36,6 +38,7 @@ export default {
 	],
 	components: {
 		AsyncButton,
+		FullscreenButton,
 		SyncButton
 	},
 	data() {