Skip to content

Commit 0aab6d5

Browse files
Hagellach37Hagellach37
authored
Merge pull request #410 from mapswipe/tutorial-new-structure
Tutorial new structure
2 parents 8b4a62f + 4869863 commit 0aab6d5

File tree

20 files changed

+1177
-52
lines changed

20 files changed

+1177
-52
lines changed

‎firebase/database.rules.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
"complete"
4848
]
4949
},
50+
"tutorialDrafts": {
51+
// only project managers can write projectDrafts
52+
".read": false,
53+
".write": "auth.token.projectManager === true",
54+
".indexOn": [
55+
"complete"
56+
]
57+
},
5058
"groups": {
5159
".write": false,
5260
".read": "auth.token.projectManager === true",

‎manager_dashboard/manager_dashboard/create.html‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@
6565
<li class="nav-item active">
6666
<a class="nav-link" href="create.html">CREATE PROJECTS</a>
6767
</li>
68+
<li class="nav-item">
69+
<a class="nav-link" href="tutorial.html">CREATE TUTORIAL</a>
70+
</li>
6871
<li class="nav-item">
6972
<a class="nav-link" href="manage.html">MANAGE PROJECTS</a>
7073
</li>
@@ -141,7 +144,7 @@ <h3>Basic Project Information</h3>
141144
</li>
142145
<li>
143146
<label for="visibility">Visibility</label>
144-
<select name="visibility" id="visibility">
147+
<select name="visibility" id="visibility" onchange="displayTeamSettings(this.value)">
145148
<option value="public">Public</option>
146149
</select>
147150
<span>Choose either "public" or select the team for which this project should be displayed.</span>
@@ -161,6 +164,12 @@ <h3>Basic Project Information</h3>
161164
</select>
162165
<span>Select the type of your project.</span>
163166
</li>
167+
<li>
168+
<label for="tutorial">Tutorial</label>
169+
<select name="tutorial" id="tutorial">
170+
</select>
171+
<span>Choose which tutorial should be used for this project. Make sure that this aligns with what you are looking for.</span>
172+
</li>
164173
<li>
165174
<label for="projectDetails">Project Details</label>
166175
<textarea name="projectDetails" id="projectDetails" onkeyup="adjust_textarea(this)"></textarea>
@@ -233,6 +242,19 @@ <h3>Project Tasks Geometry</h3>
233242
</ul>
234243
</form>
235244
</div>
245+
<div class="container" id="form_team_settings">
246+
<h3>Team Settings</h3>
247+
<form class="form-style-7">
248+
<ul>
249+
<li>
250+
<label for="maxTasksPerUser">Max Tasks Per User</label>
251+
<input type="number" name="maxTasksPerUser" id="maxTasksPerUser" value="-1" min="-1">
252+
<span>How many tasks each user is allowed to work on for this project. "-1" indicates that no limit is set.</span>
253+
</li>
254+
<li></li>
255+
</ul>
256+
</form>
257+
</div>
236258
<div class="container" id="form_tile_server_a">
237259
<h3>Tile Server A</h3>
238260
<form class="form-style-7">

‎manager_dashboard/manager_dashboard/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@
6363
<li class="nav-item">
6464
<a class="nav-link" href="create.html">CREATE PROJECTS</a>
6565
</li>
66+
<li class="nav-item">
67+
<a class="nav-link" href="tutorial.html">CREATE TUTORIAL</a>
68+
</li>
6669
<li class="nav-item">
6770
<a class="nav-link" href="manage.html">MANAGE PROJECTS</a>
6871
</li>

‎manager_dashboard/manager_dashboard/js/forms-tutorial.js‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
//auto expand textarea
2+
function adjust_textarea(h) {
3+
h.style.height = "20px";
4+
h.style.height = (h.scrollHeight)+"px";
5+
}
6+
7+
function initForm() {
8+
displayProjectTypeForm("build_area")
9+
}
10+
11+
function openImageFile(event) {
12+
var input = event.target;
13+
console.log(event.target.id)
14+
element_id = event.target.id + 'File'
15+
16+
var reader = new FileReader();
17+
reader.onload = function(){
18+
try {
19+
var dataURL = reader.result;
20+
var output = document.getElementById(element_id);
21+
output.src = dataURL;
22+
}
23+
catch(err) {
24+
element_id = event.target.id + 'Text'
25+
var output = document.getElementById(element_id);
26+
output.innerHTML = '<b>Error reading Image file</b><br>' + err;
27+
}
28+
};
29+
reader.readAsDataURL(input.files[0]);
30+
};
31+
32+
function displayProjectTypeForm(projectType) {
33+
document.getElementById("projectType").value = projectType;
34+
switch (projectType) {
35+
case "build_area":
36+
displayTileServer("bing", "A");
37+
document.getElementById("form_zoom_level").style.display = "block";
38+
document.getElementById("form_tile_server_a").style.display = "block";
39+
document.getElementById("form_tile_server_b").style.display = "None";
40+
break;
41+
case "footprint":
42+
displayTileServer("bing", "A");
43+
document.getElementById("form_zoom_level").style.display = "None";
44+
document.getElementById("form_tile_server_a").style.display = "block";
45+
document.getElementById("form_tile_server_b").style.display = "None";
46+
break;
47+
case "change_detection":
48+
case "completeness":
49+
displayTileServer("bing", "A");
50+
displayTileServer("bing", "B");
51+
document.getElementById("form_zoom_level").style.display = "block";
52+
document.getElementById("form_tile_server_a").style.display = "block";
53+
document.getElementById("form_tile_server_b").style.display = "block";
54+
break;
55+
}
56+
}
57+
58+
function addTileServerCredits (tileServerName, which) {
59+
var credits = {
60+
"bing": "© 2019 Microsoft Corporation, Earthstar Geographics SIO",
61+
"maxar_premium": "© 2019 Maxar",
62+
"maxar_standard": "© 2019 Maxar",
63+
"esri": "© 2019 ESRI",
64+
"esri_beta": "© 2019 ESRI",
65+
"mapbox": "© 2019 MapBox",
66+
"sinergise": "© 2019 Sinergise",
67+
"custom": "Please add imagery credits here."
68+
}
69+
document.getElementById("tileServer"+which+"Credits").value = credits[tileServerName]
70+
}
71+
72+
73+
function displayTileServer (tileServerName, which) {
74+
switch (tileServerName) {
75+
case "custom":
76+
document.getElementById("tileServer"+which+"UrlField").style.display = "block";
77+
document.getElementById("tileServer"+which+"LayerNameField").style.display = "block";
78+
break;
79+
case "sinergise":
80+
document.getElementById("tileServer"+which+"UrlField").style.display = "None";
81+
document.getElementById("tileServer"+which+"LayerNameField").style.display = "block";
82+
break;
83+
default:
84+
document.getElementById("tileServer"+which+"UrlField").style.display = "None";
85+
document.getElementById("tileServer"+which+"LayerNameField").style.display = "None";
86+
}
87+
addTileServerCredits(tileServerName, which)
88+
}
89+
90+
function clear_fields() {
91+
console.log('clear fields.')
92+
displayProjectTypeForm("build_area")
93+
}
94+
95+
function displaySuccessMessage() {
96+
//document.getElementById("import-formular").style.display = "None";
97+
alert('Your project has been uploaded. It can take up to one hour for the project to appear in the dashboard.')
98+
}
99+
100+
function displayImportForm() {
101+
document.getElementById("import-formular").style.display = "block";
102+
}
103+
104+
function openJsonFile(event) {
105+
var input = event.target;
106+
107+
// clear info field
108+
var info_output = document.getElementById("screenInfo");
109+
info_output.innerHTML = '';
110+
info_output.style.display = 'block'
111+
112+
// Check file size before loading
113+
var filesize = input.files[0].size;
114+
if (filesize > 1 * 1024 * 1024) {
115+
var err='filesize is too big (max 1MB): ' + filesize/(1000*1000)
116+
info_output.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
117+
info_output.style.display = 'block'
118+
} else {
119+
info_output.innerHTML += 'File Size is valid <br>';
120+
info_output.style.display = 'block'
121+
122+
var reader = new FileReader();
123+
reader.onload = function(){
124+
125+
try {
126+
var text = reader.result;
127+
var screensJsonData = JSON.parse(text)
128+
// check number of screens
129+
numberOfScreens = Object.keys(screensJsonData).length
130+
console.log('number of screens: ' + numberOfScreens)
131+
132+
info_output.innerHTML += 'Number of Screens: ' + numberOfScreens + '<br>';
133+
info_output.style.display = 'block'
134+
screens = text
135+
136+
}
137+
catch(err) {
138+
info_output.innerHTML = '<b>Error reading JSON file</b><br>' + err;
139+
info_output.style.display = 'block'
140+
}
141+
};
142+
reader.readAsText(input.files[0]);
143+
}
144+
};
145+
146+
function openGeoJsonFile(event) {
147+
var input = event.target;
148+
149+
// clear info field
150+
var info_output = document.getElementById("tutorialTasksInfo");
151+
info_output.innerHTML = '';
152+
info_output.style.display = 'block'
153+
154+
// Check file size before loading
155+
var filesize = input.files[0].size;
156+
if (filesize > 1 * 1024 * 1024) {
157+
var err='filesize is too big (max 1MB): ' + filesize/(1000*1000)
158+
info_output.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
159+
info_output.style.display = 'block'
160+
} else {
161+
info_output.innerHTML += 'File Size is valid <br>';
162+
info_output.style.display = 'block'
163+
164+
var reader = new FileReader();
165+
reader.onload = function(){
166+
167+
try {
168+
var text = reader.result;
169+
var geoJsonData = JSON.parse(text)
170+
// check number of screens
171+
numberOfFeatures = Object.keys(geoJsonData["features"]).length
172+
console.log('number of features: ' + numberOfFeatures)
173+
174+
info_output.innerHTML += 'Number of Features: ' + numberOfFeatures + '<br>';
175+
info_output.style.display = 'block'
176+
tutorialTasks = text
177+
178+
}
179+
catch(err) {
180+
info_output.innerHTML = '<b>Error reading GeoJSON file</b><br>' + err;
181+
info_output.style.display = 'block'
182+
}
183+
};
184+
reader.readAsText(input.files[0]);
185+
}
186+
};
187+
188+
189+
function closeModal() {
190+
var modal = document.getElementById("uploadModal");
191+
modal.style.display = "none";
192+
var modalSuccess = document.getElementById("modalSuccess");
193+
modalSuccess.style.display = "none";
194+
}

‎manager_dashboard/manager_dashboard/js/forms.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
const BUILD_AREA_TYPE = 1
2+
const FOOTPRINT_TYPE = 2
3+
const CHANGE_DETECTION_TYPE = 3
4+
const COMPLETENESS_TYPE = 4
5+
16
//auto expand textarea
27
function adjust_textarea(h) {
38
h.style.height = "20px";
@@ -42,10 +47,33 @@ function initTeams() {
4247
}
4348

4449

50+
function initTutorials(projectType) {
51+
// clear all existing options
52+
document.getElementById("tutorial").innerHTML = ""
53+
console.log("init tutorials")
54+
// get teams from firebase
55+
var TutorialsRef = firebase.database().ref("v2/projects").orderByChild("status").equalTo("tutorial");
56+
TutorialsRef.once('value', function(snapshot){
57+
if(snapshot.exists()){
58+
snapshot.forEach(function(data){
59+
// add teamName to drop down option and set teamId as value
60+
if (data.val().projectType == projectType) {
61+
option = document.createElement('option')
62+
option.innerHTML = data.val().name
63+
option.value = data.key
64+
document.getElementById("tutorial").appendChild(option);
65+
}
66+
})
67+
}
68+
})
69+
}
70+
71+
4572
function displayProjectTypeForm(projectType) {
4673
document.getElementById("projectType").value = projectType;
4774
switch (projectType) {
4875
case "build_area":
76+
initTutorials(BUILD_AREA_TYPE);
4977
displayTileServer("bing", "A");
5078
document.getElementById("groupSize").value = 120;
5179
document.getElementById("form_project_aoi_geometry").style.display = "block";
@@ -54,31 +82,37 @@ function displayProjectTypeForm(projectType) {
5482
document.getElementById("form_tile_server_a").style.display = "block";
5583
document.getElementById("form_tile_server_b").style.display = "None";
5684
setTimeout(function(){ ProjectAoiMap.invalidateSize()}, 400);
85+
document.getElementById("form_team_settings").style.display = "None";
5786
break;
5887
case "footprint":
88+
initTutorials(FOOTPRINT_TYPE);
5989
displayTileServer("bing", "A");
6090
document.getElementById("groupSize").value = 25;
6191
document.getElementById("form_project_aoi_geometry").style.display = "None";
6292
document.getElementById("form_project_task_geometry").style.display = "block";
6393
document.getElementById("form_zoom_level").style.display = "None";
6494
document.getElementById("form_tile_server_a").style.display = "block";
6595
document.getElementById("form_tile_server_b").style.display = "None";
96+
document.getElementById("form_team_settings").style.display = "None";
6697
break;
6798
case "change_detection":
6899
case "completeness":
69100
displayTileServer("bing", "A");
70101
displayTileServer("bing", "B");
71102
if (projectType == "change_detection") {
72103
document.getElementById("groupSize").value = 25;
104+
initTutorials(CHANGE_DETECTION_TYPE);
73105
} else {
74106
document.getElementById("groupSize").value = 80;
107+
initTutorials(COMPLETENESS_TYPE);
75108
}
76109
document.getElementById("form_project_aoi_geometry").style.display = "block";
77110
document.getElementById("form_project_task_geometry").style.display = "None";
78111
document.getElementById("form_zoom_level").style.display = "block";
79112
document.getElementById("form_tile_server_a").style.display = "block";
80113
document.getElementById("form_tile_server_b").style.display = "block";
81114
setTimeout(function(){ ProjectAoiMap.invalidateSize()}, 400);
115+
document.getElementById("form_team_settings").style.display = "None";
82116
break;
83117
}
84118
}
@@ -97,6 +131,16 @@ function addTileServerCredits (tileServerName, which) {
97131
document.getElementById("tileServer"+which+"Credits").value = credits[tileServerName]
98132
}
99133

134+
function displayTeamSettings (teamId) {
135+
switch (teamId) {
136+
case "public":
137+
document.getElementById("form_team_settings").style.display = "None";
138+
break;
139+
default:
140+
document.getElementById("form_team_settings").style.display = "block";
141+
}
142+
}
143+
100144

101145
function displayTileServer (tileServerName, which) {
102146
switch (tileServerName) {

0 commit comments

Comments
 (0)