From c45bebe53810357615751feb57477d85ebcc6207 Mon Sep 17 00:00:00 2001
From: Matthias Mohr <m.mohr@uni-muenster.de>
Date: Tue, 21 Jul 2020 17:23:04 +0200
Subject: [PATCH] Adapt to openEO API 1.0

---
 README.md                     |  4 ++--
 components/Collection.vue     | 43 ++++++++++++++++++-----------------
 components/Process.vue        |  2 +-
 components/ProcessExample.vue | 15 +-----------
 components/UdfRuntime.vue     |  2 +-
 components/UdfRuntimes.vue    |  4 ++--
 6 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index b4f54da..266804f 100644
--- a/README.md
+++ b/README.md
@@ -55,8 +55,8 @@ Visualizes a collection following the STAC-based collection description.
 - `collection-after-summary`
 - `collection-before-details`
 - `collection-after-details`
-- `collection-spatial-extent` - Custom HTML to display the spatial extent, e.g. a map. The variable `extent` is provides an array containing four elements (west, south, east, north) with the WGS84 coordinates.
-- `collection-temporal-extent` - Custom HTML to display the temporal extent. The variable `extent` is provides an array with two elements (start, end). Each is a RFC3339 compatible `date-time` or `null` to indicate an open range.
+- `collection-spatial-extents` - Custom HTML to display the spatial extents, e.g. a map. The variable `extents` provides an array of arrays, each containing four elements (west, south, east, north) with the WGS84 coordinates.
+- `collection-temporal-extents` - Custom HTML to display the temporal extents. The variable `extents` provides an array of arrays, each with two elements (start, end). Both are RFC3339 compatible `date-time`, or `null` to indicate an open range.
 
 
 ### `Description`
diff --git a/components/Collection.vue b/components/Collection.vue
index 5c01784..2220303 100644
--- a/components/Collection.vue
+++ b/components/Collection.vue
@@ -46,24 +46,25 @@
 				<span class="value" v-else>{{ collection.license }}</span>
 			</section>
 
-			<section class="extent" v-if="temporalInterval || boundingBox">
-				<template v-if="temporalInterval">
+			<section class="extent" v-if="temporalIntervals.length || boundingBoxes.length">
+				<template v-if="temporalIntervals.length">
 					<h3>Temporal Extent</h3>
-					<slot name="collection-temporal-extent" :extent="temporalInterval">
-						<p>{{ stac.formatTemporalExtent(temporalInterval) }}</p>
+					<slot name="collection-temporal-extents" :extents="temporalIntervals">
+						<ul v-for="(interval, i) in temporalIntervals" :key="i">
+							<li>{{ stac.formatTemporalExtent(interval) }}</li>
+						</ul>
 					</slot>
 				</template>
 			
-				<template v-if="boundingBox">
+				<template v-if="boundingBoxes.length">
 				<h3>Spatial Extent</h3>
-					<slot name="collection-spatial-extent" :extent="boundingBox">
+					<slot name="collection-spatial-extents" :extents="boundingBoxes">
 						<div :id="'map-' + collection.id" class="map" ref="mapContainer">
-							<ul v-if="!map">
-								<li>North: {{boundingBox[3]}}</li>
-								<li>South: {{boundingBox[1]}}</li>
-								<li>East: {{boundingBox[2]}}</li>
-								<li>West: {{boundingBox[0]}}</li>
-							</ul>
+							<template v-if="!map">
+								<ul v-for="(bbox, i) in boundingBoxes" :key="i">
+									<li>Latitudes: {{ bbox[1] }} / {{ bbox[3] }}, Longitudes: {{ bbox[0] }} / {{ bbox[2] }}</li>
+								</ul>
+							</template>
 						</div>
 					</slot>
 				</template>
@@ -205,19 +206,19 @@ export default {
 		}
 	},
 	computed: {
-		temporalInterval() {
+		temporalIntervals() {
 			let e = this.collection.extent;
-			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.temporal) && CommonUtils.size(e.temporal.interval) > 0 && e.temporal.interval[0].length >= 2) {
-				return e.temporal.interval[0];
+			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.temporal) && CommonUtils.size(e.temporal.interval) > 0) {
+				return e.temporal.interval.filter(interval => interval.length >= 2);
 			}
-			return null;
+			return [];
 		},
-		boundingBox() {
+		boundingBoxes() {
 			let e = this.collection.extent;
-			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.spatial) && CommonUtils.size(e.spatial.bbox) > 0 && e.spatial.bbox[0].length >= 4) {
-				return e.spatial.bbox[0];
+			if (CommonUtils.isObject(e) && CommonUtils.isObject(e.spatial) && CommonUtils.size(e.spatial.bbox) > 0) {
+				return e.spatial.bbox.filter(bbox => bbox.length >= 4);
 			}
-			return null;
+			return [];
 		},
 		leafletOptions() {
 			return {  // keep in sync with Readme
@@ -288,7 +289,7 @@ export default {
 			return Array.isArray(asset.roles) && asset.roles.includes('thumbnail') && IMAGE_MEDIA_TYPES.includes(asset.type);
 		},
 		initMap() {
-			if (!!this.$slots['collection-spatial-extent'] || this.map !== null) {
+			if (!!this.$slots['collection-spatial-extents'] || this.map !== null) {
 				return;
 			}
 			try {
diff --git a/components/Process.vue b/components/Process.vue
index 72b5efd..5aa80ab 100644
--- a/components/Process.vue
+++ b/components/Process.vue
@@ -74,7 +74,7 @@
 			<section class="examples" v-if="hasElements(process.examples)">
 				<h3>Examples</h3>
 				<ProcessExample v-for="(example, key) in process.examples" :key="key" :id="key" :example="example" :processId="process.id" :processParameters="process.parameters" :processReferenceParser="processReferenceParser" />
-				<LinkList :links="exampleLinks" heading="More examples (full processes)" headingTag="h4" />
+				<LinkList :links="exampleLinks" heading="Processes" headingTag="h4" />
 			</section>
 
 			<section class="links">
diff --git a/components/ProcessExample.vue b/components/ProcessExample.vue
index ae07a78..6dd449f 100644
--- a/components/ProcessExample.vue
+++ b/components/ProcessExample.vue
@@ -5,11 +5,8 @@
 		<div class="content">
 			<Description v-if="example.description" :description="example.description" :preprocessor="processReferenceParser" />
 
-			<div class="process-graph" v-if="example.process_graph">
-				<Description :description="renderedGraph()" />
-			</div>
 			<div class="arguments" v-if="example.arguments">
-				<code v-html="renderedArguments()"></code>
+				<code v-html="renderedArguments"></code>
 			</div>
 		</div>
 	</div>
@@ -39,16 +36,6 @@ export default {
 		},
 		title() {
 			return this.example.title ? this.example.title + " (" + this.identifier + ")" : "Example " + this.identifier;
-		}
-	},
-	methods: {
-		// deprecated
-		renderedGraph() {
-			var md = "##### Process Graph\n```json\n" + JSON.stringify(this.example.process_graph, null, 2) + "\n```";
-			if (typeof this.example.returns !== 'undefined') {
-				md += "\n##### Result\n```json\n" + JSON.stringify(this.example.returns, null, 2) + "\n```";
-			}
-			return md;
 		},
 		renderedArguments() {
 			var params = [];
diff --git a/components/UdfRuntime.vue b/components/UdfRuntime.vue
index b739306..47f4205 100644
--- a/components/UdfRuntime.vue
+++ b/components/UdfRuntime.vue
@@ -81,7 +81,7 @@ export default {
 			return this.runtimeData.title || this.runtimeId;
 		},
 		isDocker() {
-			return Boolean(this.runtimeData.docker && this.runtimeData.tags);
+			return Boolean(this.runtimeData.type === 'docker' || (this.runtimeData.docker && this.runtimeData.tags));
 		},
 		selectVersion() {
 			if ((Utils.isObject(this.runtimeData.versions) && this.runtimeData.versions[this.runtimeVersion]) || (Array.isArray(this.runtimeData.tags) && this.runtimeData.tags[this.runtimeVersion])) {
diff --git a/components/UdfRuntimes.vue b/components/UdfRuntimes.vue
index fbc12e3..20360ff 100644
--- a/components/UdfRuntimes.vue
+++ b/components/UdfRuntimes.vue
@@ -4,8 +4,8 @@
 			<strong>{{ name }}</strong>
 			<template v-if="env.title"> - {{ env.title }}</template>
 			<ul class="badges small">
-				<template v-if="env.docker">
-					<li class="badge docker">Docker</li>
+				<template v-if="env.type === 'docker' || (env.docker && env.tags)">
+					<li class="badge docker">Docker: {{ env.docker }}</li>
 					<li class="badge version" :class="{default: tag === env.default}" v-for="tag in env.tags" :key="tag">{{ tag }}</li>
 				</template>
 				<template v-else>