146 lines
6.4 KiB
HTML
146 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Raster download</title>
|
|
|
|
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
|
|
<link rel="stylesheet" href="./libs/bootstrap-icons/bootstrap-icons.css">
|
|
|
|
<style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="m-5">
|
|
<div class="container">
|
|
|
|
<h2 class="mb-5">
|
|
<i class="bi-grid-3x3-gap-fill"></i>
|
|
Get tiles from administrative extent
|
|
</h2>
|
|
|
|
<form id="form">
|
|
<div class="row gx-1">
|
|
<div class="col-8">
|
|
<label class="form-label me-3">Choose a level:</label>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="level" id="commune" value="communes"
|
|
checked="checked">
|
|
<label class="form-check-label" for="commune">
|
|
Commune
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="level" id="epci" value="epci">
|
|
<label class="form-check-label" for="epci">
|
|
EPCI
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="level" id="pnr" value="pnr">
|
|
<label class="form-check-label" for="pnr">
|
|
PNR
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="level" id="scot" value="scot">
|
|
<label class="form-check-label" for="scot">
|
|
SCOT
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-1 mt-3">
|
|
<div class="col">
|
|
<label for="extent-input" class="form-label">Choose an extent:</label>
|
|
<div class="d-flex">
|
|
<input type="text" id="extent-input" name="extent" list="extents-list" size="30" placeholder=""
|
|
class="form-control flex-grow-1">
|
|
<datalist id="extents-list">
|
|
</datalist>
|
|
<div id="loading-extents" class="spinner-border spinner-border-sm mt-2 ms-3 hidden"
|
|
role="status"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-6">
|
|
<label for="extent-buffer" class="form-label">Buffer (m):</label>
|
|
<input type="number" id="extent-buffer" name="buffer" size="10" placeholder="0"
|
|
class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="bbox" class="form-label">BBox extent:</label>
|
|
<div class="form-check form-switch mt-2">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="bbox">
|
|
<label class="form-check-label" for="bbox">Use BBOX to select tiles</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col">
|
|
<label class="form-label">
|
|
Productuct list:
|
|
<span id="loading-products" class="spinner-border spinner-border-sm ms-1 hidden"
|
|
role="status"></span>
|
|
</label>
|
|
<div id="products-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error" class="alert alert-danger my-3 collapse" role="alert"></div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<input type="button" id="clear" name="clear" value="Effacer"
|
|
class="btn btn-outline-dark mt-3 ms-3 float-end">
|
|
<input type="submit" id="submit" name="submit" value="Valider"
|
|
class="btn btn-outline-dark mt-3 float-end">
|
|
<button id="loading_bnt" class="btn btn-outline-dark mt-3 float-end hidden" type="button" disabled>
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
Loading...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="row gx-3 mt-3">
|
|
<div class="col-6">
|
|
<div class="border rounded p-3 pb-5 mb-5">
|
|
<div class="d-flex">
|
|
<span class="flex-grow-1">List of tiles (<span id="nb_tiles">0</span>)</span>
|
|
<input type="button" id="download-files" name="download-files"
|
|
value="Download all files" class="btn btn-sm btn-outline-dark me-2">
|
|
<input type="button" id="download-files-list" name="download-files-list"
|
|
value="Download files list" class="btn btn-sm btn-outline-dark">
|
|
</div>
|
|
<ul class="list-group pb-5 mb-5" id="tiles-list">
|
|
<li class="list-group-item">Empty list</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="border rounded py-3">
|
|
<p class="ms-3">Aperçu <span id="map-link" class="hidden">(<a href="./map.html" target="_blank"
|
|
class="link-primary">carte interactive</a>)</span></p>
|
|
<img src="./map.png" id="map-picture" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
|
|
<script type="text/javascript" src="/eel.js"></script>
|
|
<script type="text/javascript" src="./libs/jquery/jquery-3.6.3.min.js"></script>
|
|
<script type="text/javascript" src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script type="text/javascript" src="./index.js"></script>
|
|
<script type="text/javascript">
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |