himbeere/open-organism-observer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

simple sample intake form

Browse source
This commit is contained in:
lukas fricke 2025-01-16 03:26:23 +01:00
parent 5dbb69f52a
commit 68ce4294ba
1 changed files with 138 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
sample_intake.html Normal file
View file

@ -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>