From 9c069023f7ffbb629ba0add77e9232ecfa0fe669 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Sun, 8 Oct 2023 20:47:17 +0200
Subject: [PATCH] =?UTF-8?q?Fikse=20+=20en=20del=20annet=20sm=C3=A5tteri?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/style.css | 11 ++++++++++-
index.html | 22 +++++++++++++++------
javascript/buffer.js | 2 ++
javascript/difference.js | 4 ++++
javascript/dissolve.js | 2 ++
javascript/extract.js | 2 ++
javascript/intersect.js | 4 ++++
javascript/leafletLayerControl.js | 11 +++++++++++
javascript/tutorial.js | 33 +++++++++++++++++++++++++++++++
javascript/union.js | 4 ++++
10 files changed, 88 insertions(+), 7 deletions(-)
create mode 100644 javascript/tutorial.js
diff --git a/css/style.css b/css/style.css
index 915f0c2..a6d7322 100644
--- a/css/style.css
+++ b/css/style.css
@@ -106,4 +106,13 @@ p {
margin-left: 2vw;
margin-right: 2vw;
cursor: pointer;
-}
\ No newline at end of file
+}
+
+.tutorial {
+ margin: 5px;
+ padding: 5px;
+ color: white;
+ height: 26vh;
+ width: 39vw;
+ text-align: center;
+}
diff --git a/index.html b/index.html
index 4c8967e..ce10b6c 100644
--- a/index.html
+++ b/index.html
@@ -217,18 +217,27 @@
<div id="tutorialBox" class="box">
<div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
+ <div class="box2">
+ <svg style="cursor: pointer; margin-top: 15px; margin-left: 9vw;" onclick="previousPage()"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+ <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
+ </svg>
+
+ <h1 style="font-size: 4vh; text-align: center; width: 15vw;">Tutorial</h1>
+
+ <svg style="cursor: pointer; margin-top: 15px;" onclick="nextPage()"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+ <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+ </svg>
+ </div>
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
+ <svg style="cursor: pointer; margin-top: 15px; margin-right: 20px;" onclick="closeBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
- <p style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
- border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
- Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
- </p>
+ <p id="tutorial" class="tutorial"></p>
</div>
</div>
@@ -278,6 +287,7 @@
<script src="javascript/mapChange.js"></script>
<script src="javascript/voronoi.js"></script>
<script src="javascript/tin.js"></script>
+ <script src="javascript/tutorial.js"></script>
<!-- Imported js -->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
diff --git a/javascript/buffer.js b/javascript/buffer.js
index fe26755..48cae5b 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -20,6 +20,8 @@ function makeBuffer() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("bufferName").value.match(regex_2)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("bufferName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("bufferSelect").value;
diff --git a/javascript/difference.js b/javascript/difference.js
index d0abe02..7b817c4 100644
--- a/javascript/difference.js
+++ b/javascript/difference.js
@@ -8,10 +8,14 @@ function difference() {
return alert("You need to choose the first layer!");
} else if (document.getElementById("differenceSelect_2").value == "- - -") {
return alert("You need to choose the second layer!");
+ } else if (document.getElementById("differenceSelect_1").value == document.getElementById("differenceSelect_2").value) {
+ return alert("You can not choose the same layer twice!");
} else if (!document.getElementById("differenceName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("differenceName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("differenceName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("differenceSelect_1").value;
diff --git a/javascript/dissolve.js b/javascript/dissolve.js
index 653845c..3cdb797 100644
--- a/javascript/dissolve.js
+++ b/javascript/dissolve.js
@@ -10,6 +10,8 @@ function dissolve() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("dissolveName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("dissolveName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("dissolveSelect").value;
diff --git a/javascript/extract.js b/javascript/extract.js
index 9ff6b31..4033538 100644
--- a/javascript/extract.js
+++ b/javascript/extract.js
@@ -73,6 +73,8 @@ function extract() {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("extractName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("extractName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input = document.getElementById("extractSelect").value;
diff --git a/javascript/intersect.js b/javascript/intersect.js
index 100fb2a..475c5f4 100644
--- a/javascript/intersect.js
+++ b/javascript/intersect.js
@@ -8,10 +8,14 @@ function intersection() {
return alert("You need to choose the first layer!");
} else if (document.getElementById("intersectionSelect_2").value == "- - -") {
return alert("You need to choose the secondt layer!");
+ } else if (document.getElementById("intersectionSelect_1").value == document.getElementById("intersectionSelect_2").value) {
+ return alert("You can not choose the same layer twice!");
} else if (!document.getElementById("intersectionName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("intersectionName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("intersectionName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("intersectionSelect_1").value;
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index 9585943..7fa775d 100644
--- a/javascript/leafletLayerControl.js
+++ b/javascript/leafletLayerControl.js
@@ -63,3 +63,14 @@ function handleLayer(name) {
document.getElementById(name).style.backgroundColor = "green";
}
}
+
+// Sjekk at laget ikke eksisterer enda:
+
+function doLayerExist(name) {
+ for (key in overlayMaps) {
+ if (key == name) {
+ return true;
+ }
+ }
+ return false;
+}
diff --git a/javascript/tutorial.js b/javascript/tutorial.js
new file mode 100644
index 0000000..e8b3c81
--- /dev/null
+++ b/javascript/tutorial.js
@@ -0,0 +1,33 @@
+// Legger inn de ulike tekstene her:
+
+var general = "<b>General information</b><br>Welcome to ProgGIS!<br>Here you can play around with GIS functions and get to know how they works on geographic data.<br>Just remember the fact that if you <b>refresh</b> the website you also <b>reset</b> all the data layers!";
+var pin = "<b>Pins and diagram functions</b><br>If you press the pin-map button down to the left you restyle the webpage to a new map with some default pins. This is just an example page where you can see how voronoi and TIN diagrams look like.<br>You can go back and forth to this map without loosing information on the other map.";
+var layer = "<b>Map layers</b><br>Press the plus button down to the left to open the sidebar where you can see all the data layers on the map.<br>Here you have two choices: You can add your own data (not yet), or you can add some pre-defined data to the map.<br>Once the layers are added you can not delete the layer without reset the whole website.<br>You can turn on and off each layer with their buttons and the visibility will be shown with color.";
+var buffer = "<b>Buffer</b><br>Here you mark an area around a layer with a given distance.<br>You need to choose a layer you want to make the buffer around, set the buffer distance and choose a name for the new buffer.<br>All values must pass the validation before the buffer is made.<br>If you want to merge overlapping features, press the checkbox for dissolve.<br>The buffer is made when you press 'Make buffer'.";
+var difference = "<b>Difference</b><br>Here you erase the area of one layer from another layer.<br>First do you choose the layer you want to remove areas from. Then you choose the layer with the areas that are going to be deleted from the first one.<br>When you have chosen the two layers and given a valid layer name, you can press 'Make difference'.";
+var dissolve = "<b>Dissolve</b><br>Here you merge overlapping features in a layer to a bigger, common feature.<br>The two things you have to do here is to chose the layer you will dissolve and give a valid layer name. When that is done, you can press 'Dissolve'.";
+var extract = "<b>Extract</b><br>Here you extract one type of features from a layer into a new, separate layer.<br>First you choose the layer you want to extract features from. Then you choose which attribute you want to filter on, and last but not least the value the features must have on the given attribute.<br>Then you can set a valid layer name and press 'Extract'.";
+var intersection = "<b>Intersection</b><br>Here you make a new layer that contains the overlapping areas of the input layers - the intersection.<br>Choose the two layers you want to intersect, and give a valid layer name. Then you can press 'Intersect'.";
+var union = "<b>Union</b><br>Here you make a new layer that contains all the areas that the two input layers cover - the union.<br>Choose the two layers you want to make an union of, and give a valid layer name. Then you can press 'Make union'.";
+
+var tutorial = [general, pin, layer, buffer, difference, dissolve, extract, intersection, union];
+
+var page = 0;
+
+document.getElementById("tutorial").innerHTML = tutorial[page];
+
+function nextPage() {
+ page++;
+ if (page == tutorial.length) {
+ page = 0;
+ }
+ document.getElementById("tutorial").innerHTML = tutorial[page];
+}
+
+function previousPage() {
+ page--;
+ if (page == -1) {
+ page = tutorial.length - 1;
+ }
+ document.getElementById("tutorial").innerHTML = tutorial[page];
+}
\ No newline at end of file
diff --git a/javascript/union.js b/javascript/union.js
index 3369f8a..8b34259 100644
--- a/javascript/union.js
+++ b/javascript/union.js
@@ -8,10 +8,14 @@ function union() {
return alert("You need to choose the first layer!");
} else if (document.getElementById("unionSelect_2").value == "- - -") {
return alert("You need to choose the secondt layer!");
+ } else if (document.getElementById("unionSelect_1").value == document.getElementById("unionSelect_2").value) {
+ return alert("You can not choose the same layer twice!")
} else if (!document.getElementById("unionName").value) {
return alert("You need to choose a name for the new layer!");
} else if (!document.getElementById("unionName").value.match(regex)) {
return alert("The new name must consist of normal letters!");
+ } else if (doLayerExist(document.getElementById("unionName").value)) {
+ return alert("Choose another name! There exists already a layer with that name.")
}
var input1 = document.getElementById("unionSelect_1").value;
--
GitLab