From 68ce4294ba651d55faf9fe08b623b4a52132c0e2 Mon Sep 17 00:00:00 2001
From: lukas <lukas.fricke@transtitut.org>
Date: Thu, 16 Jan 2025 03:26:23 +0100
Subject: [PATCH] simple sample intake form

---
 sample_intake.html | 138 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 sample_intake.html
diff --git a/sample_intake.html b/sample_intake.html
new file mode 100644
index 0000000..3f18d37
--- /dev/null
+++ b/sample_intake.html
@@ -0,0 +1,138 @@
+<!--- this is the main file --->
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet" ></link>
+    <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js" ></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"</link>
+    <style>
+      #map {
+        height: 30em;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <h1>Add Sample</h1>
+  <form class="needs-validation" name = "sample" method="post">
+    <div class="row">
+      <div class="col">
+        <label class = "form-label" for="name">
+          Name of Sample
+        </label>
+      </div>
+      <div class="col">
+        <input class="form-control" type="text" name="name" id = "Name"
+                   placeholder="choose a name for your sample">
+        </input>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+        <label class = "form-label" for="type">Sample Type</label>
+      </div>
+      <div class="col">
+        <input class="form-control" type="text" name="type"
+                   placeholder="e.g. compost"
+                   id = "Type"></input>
+
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <label class = "form-label" for="time_collection">Collection Time</label>
+      </div>
+      <div class="col">
+        <input class="form-control" type="datetime-local" name="time_collection"
+                   id = "Date_Collected"></input>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <label class="form-label" for="notes">Notes</label>
+      </div>
+      <div class="col">
+        <textarea class="form-control" name="notes" id = "Notes"
+                      placeholder="Notes about the sample"
+                      rows="1"
+                      cols="60"
+                      ></textarea>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+         <label class = "form-label" for="location">Location of Sample</label>
+      </div>
+      <div class="col">
+        <input class="form-control" name="location" value=""></input>
+      </div>
+    </div>
+    <button class="btn btn-primary float-end" onclick="add();"> submit </button>
+
+    <div id="map"></div>
+  </form>
+  <script>
+  var map = L.map('map').fitWorld();
+  L.tileLayer(
+        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        maxNativeZoom:19,
+        maxZoom:25}).addTo(map);
+  var marker = {};
+  map.on('click', function(ev){
+    var latlng = map.mouseEventToLatLng(ev.originalEvent);
+    console.log(latlng.lat + ', ' + latlng.lng);
+    document.sample.location.value = latlng.lat + ', ' + latlng.lng;
+    if (marker != undefined) {
+        map.removeLayer(marker);
+  };
+    marker = L.marker([latlng.lat,latlng.lng]).addTo(map);
+  });
+  map.setView([53.518203, 9.983701], 16);
+
+  </script>
+  <script>
+  var db;
+  let openRequest = indexedDB.open("my_db");
+
+  openRequest.onupgradeneeded = function() {
+    db = openRequest.result;
+    db.createObjectStore("microscope_setup", {autoIncrement : true});
+    db.createObjectStore("prep_protocol", {autoIncrement : true});
+    db.createObjectStore("sample", {autoIncrement : true});
+
+  };
+
+  openRequest.onerror = function() {
+    console.error("Error", openRequest.error);
+  };
+
+  openRequest.onsuccess = function() {
+    db = openRequest.result;
+    // continue working with database using db object
+  };
+  function add(e){
+    e.preventDefault();
+    let sample = {
+      "Name" : document.getElementById("Name").value,
+      "Type" : document.getElementById("Type").value,
+      "Date_Collected" : document.getElementById("Date_Collected").value,
+      "Place" : document.getElementById("Place").value,
+      "Notes" : document.getElementById("Notes").value
+    }
+    let transaction =  db.transaction(["sample"], "readwrite");
+    let objectStore = transaction.objectStore("sample");
+    let add_request = objectStore.add(sample); // (3)
+
+    transaction.oncomplete = (event) => {
+      console.log("All done!");
+    };
+    transaction.onerror = (event) => {
+      console.log("something went wrong");
+      // Don't forget to handle errors!
+    };
+  }
+  </script>
+</html>
