From f52845b300dbb0f8d2f07dcbbf32b62943b4e3dd Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Thu, 14 Dec 2023 15:06:05 +0100
Subject: [PATCH] =?UTF-8?q?F=C3=A5=20p=C3=A5=20plass=20ny=20knapp=20med=20?=
=?UTF-8?q?boks=20og=20valg=20av=20lag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/style.css | 2 +-
index.html | 30 +++++++++++++++++++++++++++++-
javascript/sidebar&boxes.js | 5 +++++
javascript/suitability.js | 28 ++++++++++++++++++++++++++++
4 files changed, 63 insertions(+), 2 deletions(-)
create mode 100644 javascript/suitability.js
diff --git a/css/style.css b/css/style.css
index ec729db..95ae4c6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -31,7 +31,7 @@ p {
.box1 {
display: flex;
- flex-grow: 7;
+ flex-grow: 8;
flex-direction: row;
}
diff --git a/index.html b/index.html
index 9a5e5be..465c80b 100644
--- a/index.html
+++ b/index.html
@@ -28,12 +28,13 @@
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
<div id="buttons1" class="box1">
- <p style="width: 7vw;"></p>
+ <p style="width: 1vw;"></p>
<button class="button" onclick="openBox('bufferBox')">Buffer</button>
<button class="button" onclick="openBox('differenceBox')">Difference</button>
<button class="button" onclick="openBox('dissolveBox')">Dissolve</button>
<button class="button" onclick="openBox('extractBox')">Extract</button>
<button class="button" onclick="openBox('intersectionBox')">Intersection</button>
+ <button class="button" onclick="openBox('suitabilityBox')">Suitability</button>
<button class="button" onclick="openBox('unionBox')">Union</button>
</div>
<div id="buttons2" class="box2" style="display: none;">
@@ -193,6 +194,32 @@
<button class="button" style="font-size: 25px;" onclick="makeIntersection()">Intersect</button>
</div>
+ <div id="suitabilityBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Suitability</h1>
+
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('suitabilityBox')"
+ 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>Choose map layers in prioritised order:</p>
+
+ <div id="priorityDiv">
+ <div style="display: flex; justify-content: center;">
+ <select id="priority1"></select>
+
+ <svg onclick="addPrioritizedLayer()" style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg"
+ width="3vh" height="3vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
+ </svg>
+ </div>
+ </div>
+
+ <p>Hei 8)</p>
+ </div>
+
<div id="unionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
@@ -291,6 +318,7 @@
<script src="javascript/intersect.js"></script>
<script src="javascript/union.js"></script>
<script src="javascript/extract.js"></script>
+ <script src="javascript/suitability.js"></script>
<!-- Map change -->
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index 5926cdb..0f8fb9a 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -36,6 +36,11 @@ function openBox(id) { // Ã…pner aktuell boks (id)
fillSelect("extractSelect");
} else if (id == "intersectionBox") {
fillDoubleSelect("intersectionSelect");
+ } else if (id == "suitabilityBox") {
+ var numb = document.getElementById("priorityDiv").childElementCount;
+ for (var i=1; i<=numb; i++) {
+ fillSelect("priority" + i.toString());
+ }
} else if (id == "unionBox") {
fillDoubleSelect("unionSelect");
}
diff --git a/javascript/suitability.js b/javascript/suitability.js
new file mode 100644
index 0000000..74f7ca7
--- /dev/null
+++ b/javascript/suitability.js
@@ -0,0 +1,28 @@
+function addPrioritizedLayer() {
+ var newPriority = document.createElement("div");
+ var numb = document.getElementById("priorityDiv").childElementCount + 1;
+ var start =`<div id="div${numb}" style="display: flex; flex-grow: 2; flex-direction: row; justify-content: center; margin-top: 1vh;">`;
+ var newSelect = `<select id="priority${numb.toString()}"></select>`;
+ var newButton = `<svg onclick="removePrioritizedLayer(${numb})" style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16"> <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/> </svg>`;
+ var end = '</div>'
+ newPriority.innerHTML = start + newSelect + newButton + end;
+
+ document.getElementById("priorityDiv").appendChild(newPriority);
+ fillSelect("priority" + numb.toString());
+}
+
+function removePrioritizedLayer(numb) {
+ var count = document.getElementById("priorityDiv").childElementCount;
+ if (numb == count) {
+ document.getElementById("priorityDiv").removeChild(document.getElementById("div" + numb.toString()).parentElement);
+ } else {
+ for (var i=numb; i<count; i++) {
+ document.getElementById("priority" + i.toString()).value = document.getElementById("priority" + (i+1).toString()).value;
+ }
+ document.getElementById("priorityDiv").removeChild(document.getElementById("div" + count.toString()).parentElement);
+ }
+}
+
+function suitability() {
+
+}
\ No newline at end of file
--
GitLab