Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add form for new spreadsheet layer #549

Merged
merged 6 commits into from
Aug 10, 2021
Merged

Add form for new spreadsheet layer #549

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e57f58f
Add form for new spreadsheet layer
daemon1024 Jul 10, 2021
c35213d
Merge branch 'publiclab:main' into gh-page-form
daemon1024 Aug 9, 2021
73c0736
Add reference to template spreadsheet
daemon1024 Aug 9, 2021
4d28ffb
make textarea readonly
daemon1024 Aug 9, 2021
ecf484c
Add copy button to copy the required data
daemon1024 Aug 9, 2021
b39a9d6
Update issue template link to publiclab repo
daemon1024 Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions example/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Spreadsheet Layer</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body class="container">
<h3>New Spreadsheet Layer</h3>
<p>
Automatically Generate Spreadsheet Layer for Leaflet-Environmental-Layers.
</p>
<form id="form" class="form">
<label for="layerName">Layer Name: </label>
<input
type="text"
id="layerName"
name="name"
placeholder="Enter name of the new Layer"
class="form-control mb-2"
required
/>
<label for="layerURL">Spreadsheet URL: </label>
<br>
<small class="form-text text-muted">Here's a <a href="https://docs.google.com/spreadsheets/d/1J9rqD-JfbGt5AdBYIpkeBZxetURSnIjlajkEX-aYvSk/edit#gid=0">template spreadsheet</a> which you can copy and then modify according to your needs. </small>
<input
type="text"
id="layerURL"
name="url"
placeholder="Enter Spreadsheet URL of the new Layer"
class="form-control mb-2"
required
/>
<button class="btn btn-primary" type="submit" id="go">Go</button>
</form>
<br />
<div style="display: none" id="steps">
<p>
<textarea class="form-control" id="json-textarea" readonly>
Loading JSON Data . . .</textarea
>
</p>
<p>
Kindly <button class="copy btn btn-success">Copy</button> the contents on the above block and
<a
href="https://github.com/publiclab/leaflet-environmental-layers/issues/new?assignees=&labels=new+layer&template=new-spreadsheet-layer.md&title=%5BNew+Spreadsheet+Layer%5D%3A+"
><button class="btn btn-primary">Open a Github Issue Here</button></a
>
</p>
</div>
<script>
window.addEventListener("load", function () {
function sendData() {
const FD = new FormData(form);
let result = JSON.stringify(Object.fromEntries(FD));
steps.style.display = "block";
textarea.value = result;
}

// Access the form element...
const form = document.getElementById("form");
let textarea = document.getElementById("json-textarea");
let steps = document.getElementById("steps");

// ...and take over its submit event.
form.addEventListener("submit", function (event) {
event.preventDefault();

sendData();
});

const copyText=document.querySelector('.copy');
copyText.addEventListener('click', ()=>{
textarea.select();
document.execCommand('copy');
});

});
</script>
</body>
</html>