Skip to content

Commit f3043ea

Browse files
m-mohrm-mohr
committed
Merge remote-tracking branch 'origin/development', v0.4.0-beta.2
2 parents cfbc770 + 55d2324 commit f3043ea

31 files changed

+872
-474
lines changed

‎package.json

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "@openeo/web-editor",
3-
"version": "0.4.0-beta.1",
3+
"version": "0.4.0-beta.2",
44
"apiVersions": [
55
"0.4.0",
6-
"0.4.1"
6+
"0.4.1",
7+
"0.4.2"
78
],
89
"author": "openEO Consortium",
910
"contributors": [
@@ -35,26 +36,28 @@
3536
"build": "vue-cli-service build"
3637
},
3738
"dependencies": {
38-
"@openeo/js-client": "^0.4.0-beta.2",
39-
"@openeo/js-commons": "^0.4.0-beta.2",
40-
"@openeo/vue-components": "^0.3.5",
39+
"@openeo/js-client": "^0.4.0",
40+
"@openeo/js-commons": "^0.4.3",
41+
"@openeo/vue-components": "^0.3.10",
4142
"ajv": "^6.10.0",
42-
"codemirror": "^5.42.2",
43-
"leaflet": "^1.4.0",
43+
"codemirror": "^5.47.0",
44+
"core-js": "^2.6.9",
45+
"leaflet": "^1.5.1",
4446
"leaflet-fullscreen": "^1.0.2",
4547
"leaflet-geotiff": "^0.2.0",
4648
"leaflet-side-by-side": "github:digidem/leaflet-side-by-side",
47-
"vue": "^2.5.22",
48-
"vue-ctk-date-time-picker": "^2.1.0",
49+
"leaflet-tile-loading-progress-control": "^1.0.9",
50+
"vue": "^2.6.10",
51+
"vue-ctk-date-time-picker": "^2.1.1",
4952
"vue-snotify": "^3.2.1",
50-
"vuedraggable": "^2.17.0",
53+
"vuedraggable": "^2.21.0",
5154
"vuex": "^3.1.1"
5255
},
5356
"devDependencies": {
54-
"@vue/cli-plugin-babel": "^3.5.5",
55-
"@vue/cli-service": "^3.5.3",
57+
"@vue/cli-plugin-babel": "^3.9.2",
58+
"@vue/cli-service": "^3.9.2",
5659
"vue-cli-plugin-webpack-bundle-analyzer": "^1.3.0",
57-
"vue-template-compiler": "^2.5.22"
60+
"vue-template-compiler": "^2.6.10"
5861
},
5962
"browserslist": [
6063
"> 1%",

‎src/Page.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<Modal ref="modal" maxWidth="60%" />
66
<vue-snotify />
77
<div ref="webEditorInfo" style="display: none;">
8-
<p>{{ pkg.description }}</p>
9-
<p>This software is published by the <strong>openEO Consortium</strong> under the <strong>Apache 2.0 license</strong>. Please find more information about the openEO project on our <a href="http://www.openeo.org" target="_blank">homepage</a> and visit the <a href="https://github.com/Open-EO/openeo-web-editor" target="_blank">GitHub repository</a> for information about the Web Editor. Feel encouraged to <strong>report bugs, feature requests and other issues in the <a href="https://github.com/Open-EO/openeo-web-editor/issues" target="_blank">GitHub issue tracker</a></strong>.</p>
10-
<h3>Supported API versions:</h3>
11-
<ul>
12-
<li v-for="v in pkg.apiVersions" :key="v">{{ v }}</li>
8+
<p class="aboutPage">{{ pkg.description }}</p>
9+
<p class="aboutPage">This software is published by the <strong>openEO Consortium</strong> under the <strong>Apache 2.0 license</strong>. Please find more information about the openEO project on our <a href="http://www.openeo.org" target="_blank">homepage</a> and visit the <a href="https://github.com/Open-EO/openeo-web-editor" target="_blank">GitHub repository</a> for information about the Web Editor. Feel encouraged to <strong>report bugs, feature requests and other issues in the <a href="https://github.com/Open-EO/openeo-web-editor/issues" target="_blank">GitHub issue tracker</a></strong>.</p>
10+
<h3 class="aboutPage">Supported API versions:</h3>
11+
<ul class="aboutPage">
12+
<li v-for="v in pkg.apiVersions" :key="v"><a :href="'https://open-eo.github.io/openeo-api/v/'+v+'/index.html'" target="_blank">{{ v }}</a></li>
1313
</ul>
1414
</div>
1515
</div>
@@ -186,4 +186,13 @@ button {
186186
#container .snotifyToast__body {
187187
font-size: 0.9em;
188188
}
189+
190+
p.aboutPage {
191+
line-height: 1.33em;
192+
text-align: justify;
193+
margin-top: 0;
194+
}
195+
h3.aboutPage {
196+
margin-bottom: 0.5em;
197+
}
189198
</style>

‎src/components/Editor.vue

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<Tabs ref="tabs" id="processGraphContent">
3-
<Tab id="visual" name="Visual Model" icon="fa-code-branch" :selected="true" :onActivate="changeEditor">
3+
<Tab id="visual" name="Visual Model" icon="fa-code-branch" :selected="true" :onBeforeShow="prepareProcessGraph" :onShow="transferProcessGraph">
44
<template v-slot:tab="{ tab }">
5-
<VisualEditor ref="graphBuilder" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_visual'" />
5+
<VisualEditor ref="graphBuilder" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_visual'" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage" />
66
</template>
77
</Tab>
8-
<Tab id="source" name="Process Graph" icon="fa-code" :onActivate="changeEditor">
8+
<Tab id="source" name="Process Graph" icon="fa-code" :onBeforeShow="prepareProcessGraph" :onShow="transferProcessGraph">
99
<template v-slot:tab="{ tab }">
10-
<TextEditor ref="sourceEditor" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_text'" />
10+
<TextEditor ref="sourceEditor" :active="tab.active" :editable="editable" :value="processGraph" :id="id + '_text'" :enableClear="enableClear" :enableExecute="enableExecute" :enableLocalStorage="enableLocalStorage" />
1111
</template>
1212
</Tab>
1313
</tabs>
@@ -39,19 +39,36 @@ export default {
3939
processGraph: {
4040
type: Object,
4141
default: null
42+
},
43+
enableClear: {
44+
type: Boolean,
45+
default: true
46+
},
47+
enableLocalStorage: {
48+
type: Boolean,
49+
default: true
50+
},
51+
enableExecute: {
52+
type: Boolean,
53+
default: true
4254
}
4355
},
56+
data() {
57+
return {
58+
pgToInsert: null
59+
};
60+
},
4461
computed: {
4562
activeEditor() {
46-
if (this.$refs.tabs.getActiveTab() === 'source') {
63+
if (this.$refs.tabs.getActiveTabId() === 'source') {
4764
return this.$refs.sourceEditor;
4865
}
4966
else {
5067
return this.$refs.graphBuilder;
5168
}
5269
},
5370
inactiveEditor() {
54-
if (this.$refs.tabs.getActiveTab() !== 'source') {
71+
if (this.$refs.tabs.getActiveTabId() !== 'source') {
5572
return this.$refs.sourceEditor;
5673
}
5774
else {
@@ -60,19 +77,55 @@ export default {
6077
}
6178
},
6279
methods: {
63-
64-
getProcessGraph(callback, silent = false, passNull = false) {
65-
this.activeEditor.getProcessGraph(callback, silent, passNull);
80+
getProcessGraph(success, failure = null, passNull = false) {
81+
if (failure === null) {
82+
failure = (message, exception = null) => {
83+
if (exception !== null) {
84+
Utils.exception(this, exception, message);
85+
}
86+
else {
87+
Utils.error(this, message);
88+
}
89+
};
90+
}
91+
this.activeEditor.getProcessGraph(success, failure, passNull);
6692
},
6793
6894
insertProcessGraph(pg) {
6995
this.activeEditor.insertProcessGraph(pg);
7096
},
7197
72-
changeEditor() {
98+
prepareProcessGraph() {
7399
if (this.editable) {
74-
this.inactiveEditor.getProcessGraph(pg => this.activeEditor.insertProcessGraph(pg), true, true);
100+
return new Promise((resolve, reject) => {
101+
this.getProcessGraph(
102+
pg => {
103+
this.pgToInsert = pg;
104+
resolve(true);
105+
},
106+
(message, exception) => {
107+
if (exception) {
108+
Utils.exception(this, exception, message);
109+
}
110+
// Don't show default error that the model is invalid
111+
// We resolve here as reject would lead to an error popping up from Vue.
112+
// We can resolve safely as we have handled and shown the exception.
113+
resolve(false);
114+
},
115+
true
116+
);
117+
});
75118
}
119+
else {
120+
this.pgToInsert = this.processGraph;
121+
return true;
122+
}
123+
},
124+
125+
transferProcessGraph() {
126+
this.activeEditor.onShow();
127+
this.insertProcessGraph(this.pgToInsert);
128+
this.pgToInsert = null;
76129
}
77130
78131
}

‎src/components/EditorToolbar.vue

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<h3 v-if="scriptName">{{ scriptName }}</h3>
44
<div class="sourceToolbar">
55
<slot></slot>
6-
<span class="sepl">
7-
<button v-if="editable" type="button" @click="newScript" title="Clear current script / New script"><i class="fas fa-file"></i></button>
8-
<button v-if="editable" type="button" @click="openScriptChooser" title="Load script from local storage"><i class="fas fa-folder-open"></i></button>
9-
<button type="button" @click="saveScript" title="Save script to local storage"><i class="fas fa-save"></i></button>
6+
<span class="sepl" v-if="enableLocalStorage || enableClear">
7+
<button v-if="enableClear && editable" type="button" @click="newScript" title="Clear current script / New script"><i class="fas fa-file"></i></button>
8+
<button v-if="enableLocalStorage && editable" type="button" @click="openScriptChooser" title="Load script from local storage"><i class="fas fa-folder-open"></i></button>
9+
<button v-if="enableLocalStorage" type="button" @click="saveScript" title="Save script to local storage"><i class="fas fa-save"></i></button>
1010
</span>
11-
<button type="button" @click="executeProcessGraph" title="Run current process graph and view results" class="sepl" v-if="editable && this.supports('computeResult')"><i class="fas fa-play"></i></button>
11+
<button v-if="enableExecute && supports('computeResult')" type="button" @click="executeProcessGraph" title="Run current process graph and view results" class="sepl"><i class="fas fa-play"></i></button>
1212
</div>
1313
</div>
1414
</template>
@@ -35,34 +35,41 @@ export default {
3535
onStore: {
3636
type: Function,
3737
required: true
38+
},
39+
enableClear: {
40+
type: Boolean,
41+
default: true
42+
},
43+
enableLocalStorage: {
44+
type: Boolean,
45+
default: true
46+
},
47+
enableExecute: {
48+
type: Boolean,
49+
default: true
3850
}
3951
},
40-
data() {
41-
return {
42-
scriptName: ''
43-
};
44-
},
4552
computed: {
4653
...Utils.mapState('server', ['connection']),
47-
...Utils.mapState('editor', ['storedScripts']),
54+
...Utils.mapState('editor', ['storedScripts', 'scriptName']),
4855
...Utils.mapGetters('server', ['supports'])
4956
},
5057
methods: {
51-
...Utils.mapMutations('editor', ['addScript', 'removeScript']),
58+
...Utils.mapMutations('editor', ['addScript', 'removeScript', 'setScriptName']),
5259
5360
newScript() {
5461
var confirmed = confirm("Do you really want to clear the existing script to create a new one?");
5562
if (confirmed) {
5663
this.onClear();
57-
this.scriptName = null;
64+
this.setScriptName(null);
5865
}
5966
},
6067
6168
loadScript(name) {
6269
var pg = this.storedScripts[name];
6370
if (pg) {
6471
this.onInsert(pg);
65-
this.scriptName = name;
72+
this.setScriptName(name);
6673
return true; // to close the modal
6774
}
6875
else {
@@ -90,13 +97,13 @@ export default {
9097
},
9198
9299
saveScript() {
93-
var name = prompt("Name for the script:", this.scriptName);
100+
var name = prompt("Name for the script:", typeof this.scriptName === 'string' ? this.scriptName : "");
94101
if (!name) {
95102
return;
96103
}
97104
this.onStore(script => {
98105
this.addScript({name, script});
99-
this.scriptName = name;
106+
this.setScriptName(name);
100107
});
101108
},
102109

‎src/components/FilePanel.vue

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div id="FilePanel">
33
<div v-show="supports('uploadFile')" class="addFile">
4-
<input type="file" name="uploadUserFile" id="uploadUserFile">
5-
<button title="Add new file" id="uploadUserFileBtn" @click="uploadFile()" v-show="!uploadProgress"><i class="fas fa-upload"></i></button>
4+
<input type="file" name="uploadUserFile" id="uploadUserFile" @change="uploadFiles" multiple>
65
</div>
76
<div class="percent"><div class="used" :class="{error: uploadErrored}" :style="'width: ' + this.uploadProgress + '%; opacity: ' + this.uploadFadeOut"></div></div>
87
<DataTable ref="table" :dataSource="listFiles" :columns="columns">
@@ -50,36 +49,60 @@ export default {
5049
},
5150
subscribed: false,
5251
uploadProgress: 0,
52+
uploadProgressPerFile: [],
5353
uploadErrored: false,
5454
uploadFadeOut: 1
5555
};
5656
},
57+
watch: {
58+
uploadProgressPerFile: {
59+
deep: true,
60+
handler() {
61+
this.uploadProgress = this.uploadProgressPerFile.reduce((a,b) => a + b, 0) / this.uploadProgressPerFile.length;
62+
if (this.uploadProgress > 99.9999) {
63+
this.finishAllUploads();
64+
}
65+
}
66+
}
67+
},
5768
methods: {
5869
listFiles() {
5970
return this.connection.listFiles();
6071
},
6172
updateData() {
6273
this.updateTable(this.$refs.table, 'listFiles', 'uploadFile');
6374
},
64-
uploadFile() {
65-
var field = document.getElementById('uploadUserFile');
66-
var file = field.files[0];
67-
75+
uploadFiles(e) {
76+
var files = e.target.files || e.dataTransfer.files;
77+
if (!files || !files.length) {
78+
Utils.info(this, 'Please select files to upload.');
79+
return;
80+
}
81+
this.uploadProgressPerFile = [];
82+
this.uploadProgress = 0;
83+
this.uploadErrored = false;
84+
for (let i = 0; i < files.length; i++) {
85+
this.uploadFile(files[i], i);
86+
}
87+
},
88+
uploadFile(file, i) {
89+
this.uploadProgressPerFile.push(0);
90+
if (typeof file.name !== 'string') {
91+
return;
92+
}
6893
var virtualFile = this.connection.openFile(file.name);
69-
virtualFile.uploadFile(file, percent => this.uploadProgress = percent)
94+
virtualFile.uploadFile(file, percent => this.$set(this.uploadProgressPerFile, i, percent))
7095
.then(uploadedFile => {
7196
this.$refs.table.replaceData(uploadedFile);
72-
this.uploadProgress = 100;
73-
this.fadeOutUploadProgress();
74-
field.value = '';
75-
Utils.ok(this, 'File upload completed.');
97+
this.$set(this.uploadProgressPerFile, i, 100);
98+
Utils.ok(this, 'File upload completed.', file.name);
7699
}).catch(error => {
77100
console.log(error);
78-
this.fadeOutUploadProgress();
79-
Utils.exception(this, error, 'Sorry, file upload failed.');
101+
Utils.exception(this, error, file.name);
80102
});
81103
},
82-
fadeOutUploadProgress() {
104+
finishAllUploads() {
105+
document.getElementById('uploadUserFile').value = '';
83106
var t = setInterval(() => {
84107
this.uploadFadeOut -= 0.05;
85108
if (this.uploadFadeOut < 0) {

‎src/components/IDE.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ export default {
8888
},
8989
methods: {
9090
91-
getProcessGraph(callback, silent = false, passNull = false) {
92-
this.$refs.editor.getProcessGraph(callback, silent, passNull);
91+
getProcessGraph(success, failure = null, passNull = false) {
92+
this.$refs.editor.getProcessGraph(success, failure, passNull);
9393
},
9494
9595
insertProcessGraph(pg) {
@@ -118,6 +118,7 @@ export default {
118118
moveSeparator(evt) {
119119
if (this.moving) {
120120
this.$refs.workspace.style.width = evt.x - this.movingOffset + "px";
121+
EventBus.$emit('resizedIDE');
121122
evt.preventDefault();
122123
evt.stopPropagation();
123124
}
@@ -126,6 +127,7 @@ export default {
126127
centerSeparator() {
127128
this.moving = false;
128129
this.$refs.workspace.style.width = '60%';
130+
EventBus.$emit('resizedIDE');
129131
},
130132
131133
showCollectionInfo(id) {

0 commit comments

Comments
 (0)