31 changed files with 261 additions and 1114 deletions
@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
<?php |
||||
http_response_code(404); |
||||
/* include('my_404.php'); // provide your own HTML for the error page */ |
||||
die(); |
||||
@ -1,235 +0,0 @@
@@ -1,235 +0,0 @@
|
||||
<div class="is-flex" x-data="{choice: 'userslist'}"> |
||||
<aside class="menu"> |
||||
<p class="menu-label"> |
||||
General |
||||
</p> |
||||
<ul class="menu-list"> |
||||
<li><a :class="{'is-active': choice == 'userslist'}" @click="choice = 'userslist'">Users List</a></li> |
||||
<li><a :class="{'is-active': choice == 'users'}" @click="choice = 'users'">Users</a></li> |
||||
<li><a :class="{'is-active': choice == 'layers'}" @click="choice = 'layers'">Layers</a></li> |
||||
</ul> |
||||
</aside> |
||||
<main class="is-flex-grow p-6"> |
||||
<section class="tile is-ancestor" x-show="choice == 'userslist'"> |
||||
<div id="table-users"> |
||||
</div> |
||||
</section> |
||||
<section class="tile is-ancestor" x-show="choice == 'users'"> |
||||
<div class="tile is-vertical"> |
||||
<div class="field"> |
||||
<label class="label">First Name</label> |
||||
<div class="control"> |
||||
<input class="input" type="text" placeholder="e.g. John"> |
||||
</div> |
||||
</div> |
||||
<div class="field"> |
||||
<label class="label">Last Name</label> |
||||
<div class="control"> |
||||
<input class="input" type="text" placeholder="e.g. Doe"> |
||||
</div> |
||||
</div> |
||||
<div class="field"> |
||||
<label class="label">Organization</label> |
||||
<div class="control has-icons-left has-icons-right"> |
||||
<input class="input is-success" type="text" placeholder="e.g. HCMR" > |
||||
<span class="icon is-small is-left"> |
||||
<i class="fa-solid fa-building-columns"></i> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="field is-hidden"> |
||||
<label class="label">Organization</label> |
||||
<div class="control has-icons-left has-icons-right"> |
||||
<input class="input is-success" type="text" placeholder="Text input"> |
||||
<span class="icon is-small is-left"> |
||||
<i class="fas fa-user"></i> |
||||
</span> |
||||
<span class="icon is-small is-right"> |
||||
<i class="fas fa-check"></i> |
||||
</span> |
||||
</div> |
||||
<p class="help is-success">This username is available</p> |
||||
</div> |
||||
<div class="field"> |
||||
<label class="label">Email</label> |
||||
<div class="control has-icons-left has-icons-right"> |
||||
<input class="input is-danger" type="email" placeholder="e.g. johndoe@gmail.com"> |
||||
<span class="icon is-small is-left"> |
||||
<i class="fas fa-envelope"></i> |
||||
</span> |
||||
<span class="icon is-small is-right"> |
||||
<i class="fas fa-exclamation-triangle"></i> |
||||
</span> |
||||
</div> |
||||
<p class="help is-danger">This email is invalid</p> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label class="label">Role</label> |
||||
<div class="control"> |
||||
<div class="select"> |
||||
<select> |
||||
<option>ADMIN</option> |
||||
<option>HCMR</option> |
||||
<option>ΙΝΑΛΕ</option> |
||||
<option>GOV</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field is-hidden"> |
||||
<label class="label">Message</label> |
||||
<div class="control"> |
||||
<textarea class="textarea" placeholder="Textarea"></textarea> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field is-hidden"> |
||||
<div class="control"> |
||||
<label class="checkbox"> |
||||
<input type="checkbox"> |
||||
I agree to the <a href="#">terms and conditions</a> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
<div class="field is-hidden"> |
||||
<div class="control"> |
||||
<label class="radio"> |
||||
<input type="radio" name="question"> |
||||
Yes |
||||
</label> |
||||
<label class="radio"> |
||||
<input type="radio" name="question"> |
||||
No |
||||
</label> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field is-grouped"> |
||||
<div class="control"> |
||||
<button class="button is-link">Submit</button> |
||||
</div> |
||||
<div class="control"> |
||||
<button class="button is-link is-light">Cancel</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- tile is-parent end --> |
||||
<!-- user list tile --> |
||||
<div class="tile"> |
||||
</div> |
||||
|
||||
</section> |
||||
</main> |
||||
</div> |
||||
|
||||
<script> |
||||
let usersGrid = $("#table-users").jsGrid({ |
||||
width: "100%", |
||||
height: '100%', |
||||
inserting: false, |
||||
editing: false, |
||||
sorting: false, |
||||
paging: false, |
||||
data: [ |
||||
{ |
||||
username: "o.moresis@hcmr.gr", |
||||
name: "Orestis", |
||||
surname: "Moresis", |
||||
enabled: true, |
||||
origin: "HCMR", |
||||
role: "ADMIN" |
||||
}, |
||||
{ |
||||
username: "ginimaria3@gmail.com", |
||||
name: "Maria", |
||||
surname: "Gkini", |
||||
enabled: true, |
||||
origin: "GOV", |
||||
role: 'ADMIN' |
||||
}, |
||||
{ |
||||
username: "ch955ch955@gmail.com", |
||||
name: "Christina", |
||||
surname: "Andrikopoulou", |
||||
enabled: true, |
||||
origin: "GOV", |
||||
role: 'ADMIN' |
||||
}, |
||||
{ |
||||
username: "s.charisi@prv.ypeka.gr", |
||||
name: "Stella", |
||||
surname: "Charisi", |
||||
enabled: true, |
||||
origin: "GOV", |
||||
role: 'ADMIN' |
||||
}, |
||||
{ |
||||
username: "g_theof@yahoo.com", |
||||
name: "Georgios", |
||||
surname: "Theofilopoulos", |
||||
enabled: true, |
||||
origin: "GOV", |
||||
role: 'ADMIN' |
||||
},{ |
||||
username: "e.alexaki@prv.ypeka.gr", |
||||
name: "Elena", |
||||
surname: "Alexaki", |
||||
enabled: true, |
||||
origin: "YPEN", |
||||
role: 'ADMIN' |
||||
},{ |
||||
username: "vaslak@hcmr.gr", |
||||
name: "Vasilis", |
||||
surname: "Lakes", |
||||
enabled: true, |
||||
origin: "HCMR", |
||||
role: 'ADMIN' |
||||
} |
||||
], |
||||
onItemDeleting: function(row) { |
||||
const id = row.item.evid; |
||||
const searchGridData = $("#searchGrid").jsGrid("option", "data"); |
||||
searchGridData.some((k,v) => { |
||||
if (k.evid == id) { |
||||
const searchGridRow = $("#searchGrid").jsGrid("rowByItem", k); |
||||
let rowBtn = searchGridRow.children(".jsgrid-control-field")[0].childNodes[0].childNodes[0]; |
||||
rowBtn.classList.remove("jsgrid-update-button"); |
||||
rowBtn.classList.add("jsgrid-insert-button"); |
||||
} |
||||
}); |
||||
}, |
||||
fields: [{ |
||||
name: "username", |
||||
type: "text", |
||||
width: 150, |
||||
align: 'center' |
||||
},{ |
||||
name: "name", |
||||
type: "text", |
||||
width: 50, |
||||
align: 'center' |
||||
},{ |
||||
name: "surname", |
||||
type: "text", |
||||
width: 50, |
||||
align: 'center' |
||||
},{ |
||||
name: "enabled", |
||||
type: "boolean", |
||||
width: 50, |
||||
align: 'center' |
||||
},{ |
||||
name: "origin", |
||||
type: "text", |
||||
width: 50, |
||||
align: 'center' |
||||
},{ |
||||
name: "role", |
||||
type: "text", |
||||
width: 50, |
||||
align: 'center' |
||||
}] |
||||
}); |
||||
</script> |
||||
@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
<?php |
||||
|
||||
?> |
||||
<button id="btn-download-station-data" x-data='' class="button is-primary m-auto is-flex" @click="<?php if ($_GET['type'] == 'cruise') { ?>downloadCruiseData($data.ids)<?php } else { ?>downloadStationData($data.ids)<?php }?>">Download Related Data</button> |
||||
@ -1,38 +0,0 @@
@@ -1,38 +0,0 @@
|
||||
<?php |
||||
namespace MSFD\Views; |
||||
use Tabpanel; |
||||
?> |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<style> |
||||
html, body { height:100%; } |
||||
</style> |
||||
<script>const userName = '<?=$user_name?>'</script> |
||||
<script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script> |
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> |
||||
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" /> |
||||
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css" /> |
||||
<link rel="stylesheet" href="css/leaflet-geoman.css" /> |
||||
<link rel="stylesheet" href="css/pickletree.css" /> |
||||
<link rel="stylesheet" href="css/leaflet.legend.css" /> |
||||
<link rel="stylesheet" href="css/bulma.min.css" /> |
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
||||
<script type="text/javascript" src="js/loader.js"></script> |
||||
<script src="https://unpkg.com/leaflet-canvas-marker@0.2.0"></script> |
||||
<script> |
||||
var db = new Dexie("PortalDatabase"); |
||||
db.version(1).stores({ |
||||
requests: '++id, uuid, parameters, status', |
||||
layers: '++id, name, code, format, geotype, style, active, leafletid' |
||||
}); |
||||
db.layers.clear(); |
||||
db.layers.bulkAdd(layersList); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<?php include('tabpanel.php'); ?> |
||||
</body> |
||||
</html> |
||||
@ -1,49 +0,0 @@
@@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<style> |
||||
html, body { height:100%; } |
||||
</style> |
||||
<script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script> |
||||
<script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script> |
||||
<link rel="stylesheet" href="css/bulma.min.css" /> |
||||
</head> |
||||
<body class="is-flex"> |
||||
<section class="hero is-link"> |
||||
<div class="container hero-body"> |
||||
<h1 class="title is-1 is-center is-spaced">MSFD PLATFORM</h1> |
||||
<h3 class="subtitle is-3">Marine Strategy Framework Directive</h3> |
||||
</div> |
||||
</section> |
||||
<section class="is-align-self-center p-2"> |
||||
<form action="/login" method = "post"> |
||||
<h5>Enter as a registered user</h5> |
||||
<div class="field"> |
||||
<div class="control"> |
||||
<input class="input is-large" name="username" type="email" placeholder="Email" autofocus=""> |
||||
</div> |
||||
</div> |
||||
<div class="field"> |
||||
<div class="control"> |
||||
<input class="input is-large" name="password" type="password" placeholder="Password"> |
||||
</div> |
||||
</div> |
||||
<button type="submit" class="button is-link" value="Login">Enter</button> |
||||
</form> |
||||
<p class="has-text-centered m-3">OR</p> |
||||
<h5>Enter as guest</h5> |
||||
<form action="/login" method = "post" class="is-justify-content-center"> |
||||
<div class="field"> |
||||
<div class="control"> |
||||
<input class="input is-large" name="username" type="email" placeholder="Email" autofocus=""> |
||||
</div> |
||||
</div> |
||||
<button type="submit" class="button is-link" value="Login">Enter</button> |
||||
</form> |
||||
<div class="mt-6"> |
||||
<img src="img/logos/logo.png" class="is-flex mx-auto"/> |
||||
</div> |
||||
</section> |
||||
</body> |
||||
</html> |
||||
@ -1,5 +0,0 @@
@@ -1,5 +0,0 @@
|
||||
<section id="about-view" :class="isActiveTab(3) ? '' : 'is-hidden'" x-init=""> |
||||
<div class="middle" ><h1>COMING SOON</h1><hr><p><img src="img/logos/hcmr-logo.jpg"/></p></div> |
||||
</section> |
||||
<style>.middle {padding: 30px; position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%); text-align: center;}</style> |
||||
|
||||
@ -1 +0,0 @@
@@ -1 +0,0 @@
|
||||
<?php include('./spinner.php'); ?> |
||||
@ -1,8 +0,0 @@
@@ -1,8 +0,0 @@
|
||||
<section id="map-view" :class="isActiveTab(1) ? '' : 'is-hidden'" x-init="init_leaflet_map()"> |
||||
<div id='maptab_map'></div> |
||||
</section> |
||||
<style> |
||||
#map-view { |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
<section id="metadata-view" :class="isActiveTab(2) ? '' : 'is-hidden'" x-init=""> |
||||
<div id='metadata-panel' x-init="renderExtElements()"></div> |
||||
</section> |
||||
|
||||
@ -1,38 +0,0 @@
@@ -1,38 +0,0 @@
|
||||
<div x-ref="modal" id="modal-download-layer" class="modal" x-data="modal()"> |
||||
<div class=""></div> |
||||
<div class="modal-card"> |
||||
<header class="modal-card-head"> |
||||
<p class="modal-card-title">Download Layer</p> |
||||
<button class="delete" aria-label="close" @click="$refs.modal.classList.remove('is-active')"></button> |
||||
</header> |
||||
<section class="modal-card-body"> |
||||
<p id="modal-download-layer-name"></p> |
||||
<div class="select"> |
||||
<select x-ref="srs" x-model="srs"> |
||||
<option value="EPSG:4326">WGS84</option> |
||||
<option value="EPSG:4258">ETRS89</option> |
||||
<option value="EPSG:2100">ΕΓΣΑ 87</option> |
||||
<option value="EPSG:3034">ETRS89/ETRS-LCC</option> |
||||
<option value="EPSG:3035">ETRS89/ETRS-LAEA</option> |
||||
<option value="EPSG:3038">ETRS89/ETRS-TM26</option> |
||||
<option value="EPSG:3039">ETRS89/ETRS-TM27</option> |
||||
<option value="EPSG:3040">ETRS89/ETRS-TM28</option> |
||||
<option value="EPSG:3041">ETRS89/ETRS-TM29</option> |
||||
<option value="EPSG:3042">ETRS89/ETRS-TM30</option> |
||||
<option value="EPSG:3043">ETRS89/ETRS-TM31</option> |
||||
<option value="EPSG:3044">ETRS89/ETRS-TM32</option> |
||||
<option value="EPSG:3045">ETRS89/ETRS-TM33</option> |
||||
<option value="EPSG:3046">ETRS89/ETRS-TM34</option> |
||||
<option value="EPSG:3047">ETRS89/ETRS-TM35</option> |
||||
<option value="EPSG:3857">Pseudo Mercator</option> |
||||
<option value="EPSG:900913">Google Mercator</option> |
||||
</select> |
||||
</div> |
||||
</section> |
||||
<footer class="modal-card-foot"> |
||||
<button class="button is-success" @click="downloadShapefile($store.downloadName,srs);">Download</button> |
||||
<button class="button" @click="$refs.modal.classList.remove('is-active')">Cancel</button> |
||||
</footer> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,63 +0,0 @@
@@ -1,63 +0,0 @@
|
||||
<?php |
||||
|
||||
?> |
||||
<p class="px-4">You may request the whole entity (cruise/station etc.) without selecting search criteria or be more specific by doing so.</p> |
||||
<fieldset class="is-panel-block" |
||||
x-data="moreInfo()" |
||||
> |
||||
|
||||
<div x-ref="grid" x-init="populateFeatureGrid($el)"></div> |
||||
<div class="dropdown" :class="dopen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')"> |
||||
<span>Descriptors</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="did" x-ref="dinput" > |
||||
<template x-for="descriptor in d" :key="descriptor.code"> |
||||
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="dropdown" :class="copen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')"> |
||||
<span>Criterias</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-criteria" role="menu"> |
||||
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<template x-for="criteria in c" :key="criteria.code"> |
||||
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="tags-selection-d" class="tags"> |
||||
<span class="tag" x-text="tagName('d', did)"></span> |
||||
</div> |
||||
<div id="tags-selection" class="tags"> |
||||
<template x-for="id in cid"> |
||||
<span class="tag" x-text="tagName('c', id)"></span> |
||||
</template> |
||||
</div> |
||||
|
||||
<div x-init="loadCal"> |
||||
<input type="date" id="start" name="trip-start" |
||||
value="" |
||||
min="2017-01-01"> |
||||
</div> |
||||
<div> |
||||
<button @click="search()">Request Data...</button> |
||||
</div> |
||||
</fieldset> |
||||
@ -1,62 +0,0 @@
@@ -1,62 +0,0 @@
|
||||
<?php |
||||
|
||||
?> |
||||
<p class="px-4">You may request the whole water body without selecting search criteria or be more specific by doing so.</p> |
||||
<fieldset class="is-panel-block" |
||||
x-data="mruInfo()" |
||||
> |
||||
<div x-ref="grid" x-init="populateFeatureGrid($el)"></div> |
||||
<div class="dropdown" :class="dopen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')"> |
||||
<span>Descriptors</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="did" x-ref="dinput" > |
||||
<template x-for="descriptor in d" :key="descriptor.code"> |
||||
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="dropdown" :class="copen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')"> |
||||
<span>Criterias</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-criteria" role="menu"> |
||||
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<template x-for="criteria in c" :key="criteria.code"> |
||||
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="tags-selection-d" class="tags"> |
||||
<span class="tag" x-text="tagName('d', did)"></span> |
||||
</div> |
||||
<div id="tags-selection" class="tags"> |
||||
<template x-for="id in cid"> |
||||
<span class="tag" x-text="tagName('c', id)"></span> |
||||
</template> |
||||
</div> |
||||
|
||||
<div x-init="loadCal"> |
||||
<input type="date" id="start" name="trip-start" |
||||
value="" |
||||
min="2017-01-01"> |
||||
</div> |
||||
<div> |
||||
<button @click="search()">Request Data...</button> |
||||
</div> |
||||
</fieldset> |
||||
@ -1,87 +0,0 @@
@@ -1,87 +0,0 @@
|
||||
<section class="section"> |
||||
<div class="field"> |
||||
<label class="label">Name</label> |
||||
<div class="control"> |
||||
<input class="input" type="text" placeholder="Text input"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label class="label">Username</label> |
||||
<div class="control has-icons-left has-icons-right"> |
||||
<input class="input is-success" type="text" placeholder="Text input" value=""> |
||||
<span class="icon is-small is-left"> |
||||
<i class="fas fa-user"></i> |
||||
</span> |
||||
<span class="icon is-small is-right"> |
||||
<i class="fas fa-check"></i> |
||||
</span> |
||||
</div> |
||||
<p class="help is-success">This username is available</p> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label class="label">Email</label> |
||||
<div class="control has-icons-left has-icons-right"> |
||||
<input class="input is-danger" type="email" placeholder="Email input" value="hello@"> |
||||
<span class="icon is-small is-left"> |
||||
<i class="fas fa-envelope"></i> |
||||
</span> |
||||
<span class="icon is-small is-right"> |
||||
<i class="fas fa-exclamation-triangle"></i> |
||||
</span> |
||||
</div> |
||||
<p class="help is-danger">This email is invalid</p> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label class="label">Subject</label> |
||||
<div class="control"> |
||||
<div class="select"> |
||||
<select> |
||||
<option>Select dropdown</option> |
||||
<option>With options</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label class="label">Message</label> |
||||
<div class="control"> |
||||
<textarea class="textarea" placeholder="Textarea"></textarea> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<div class="control"> |
||||
<label class="checkbox"> |
||||
<input type="checkbox"> |
||||
I agree to the <a href="#">terms and conditions</a> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<div class="control"> |
||||
<label class="radio"> |
||||
<input type="radio" name="question"> |
||||
Yes |
||||
</label> |
||||
<label class="radio"> |
||||
<input type="radio" name="question"> |
||||
No |
||||
</label> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="field is-grouped"> |
||||
<div class="control"> |
||||
<button class="button is-link">Submit</button> |
||||
</div> |
||||
<div class="control"> |
||||
<button class="button is-link is-light">Cancel</button> |
||||
</div> |
||||
</div> |
||||
|
||||
</section> |
||||
@ -1,111 +0,0 @@
@@ -1,111 +0,0 @@
|
||||
<section x-show="isActiveTab(2)" id="sidebar-advanced-search" class="p-4"> |
||||
<fieldset class="is-panel-block" |
||||
x-data="advancedSearch()" |
||||
> |
||||
<!-- water body selectors --> |
||||
<div class="columns"> |
||||
<div class="dropdown column " :class="gopen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="gopen = ! gopen; getDropdownData('g')"> |
||||
<span>Waterbody Groups</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-group" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="gid"> |
||||
<template x-for="wbgroup in g" :key="wbgroup.id"> |
||||
<a href="#" class="dropdown-item" x-text="wbgroup.label" :id="'sel-group-' + wbgroup.id" @click="$dispatch('select', { el: $el, id: wbgroup.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="dropdown column" :class="bopen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="bopen = ! bopen; getDropdownData('b')"> |
||||
<span>Waterbody</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-wbody" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="bid"> |
||||
<template x-for="wbody in b" :key="wbody.id"> |
||||
<a href="#" class="dropdown-item" x-text="wbody.label" :id="'sel-body-' + wbody.id" @click="$dispatch('select', { el: $el, id: wbody.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="tags-selection-g" class="tags"> |
||||
<span class="tag" x-text="tagName('g', gid)"></span> |
||||
</div> |
||||
<div id="tags-selection-b" class="tags"> |
||||
<template x-for="id in bid"> |
||||
<span class="tag" x-text="tagName('b', id)"></span> |
||||
</template> |
||||
</div> |
||||
<!-- criterias selectors --> |
||||
<div class="columns"> |
||||
<div class="dropdown column" :class="dopen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dopen = ! dopen; getDropdownData('d')"> |
||||
<span>Descriptors</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-descriptor" role="menu" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<div class="dropdown-content" x-model="did" > |
||||
<template x-for="descriptor in d" :key="descriptor.code"> |
||||
<a href="#" class="dropdown-item" x-text="descriptor.label" :id="'sel-desc-' + descriptor.id" @click="$dispatch('select', { el: $el, id: descriptor.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="dropdown column" :class="copen ? 'is-active' : ''"> |
||||
<div class="dropdown-trigger"> |
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="copen = ! copen; getDropdownData('c')"> |
||||
<span>Criterias</span> |
||||
<span class="icon is-small"> |
||||
<i class="fas fa-angle-down" aria-hidden="true"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
<div class="dropdown-menu" id="dropdown-criteria" role="menu"> |
||||
<div class="dropdown-content" x-model="cid" x-ref="cinput" @select="selectEntry($event.detail.el, $event.detail.id)"> |
||||
<template x-for="criteria in c" :key="criteria.code"> |
||||
<a href="#" class="dropdown-item" x-text="criteria.label" :id="'sel-crit-' + criteria.id" @click="$dispatch('select', { el: $el, id: criteria.id })"> |
||||
</a> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div id="tags-selection-d" class="tags"> |
||||
<span class="tag" x-text="tagName('d', did)"></span> |
||||
</div> |
||||
<div id="tags-selection-c" class="tags"> |
||||
<template x-for="id in cid"> |
||||
<span class="tag" x-text="tagName('c', id)"></span> |
||||
</template> |
||||
</div> |
||||
<div x-init="loadCal"> |
||||
<input type="date" id="start" name="trip-start" |
||||
value="" |
||||
min="2017-01-01"> |
||||
</div> |
||||
<div class="p-4"> |
||||
<button class="button is-primary" @click="search()" x-bind:disabled="submitDisabled">Make Request...</button> |
||||
<button class="button" @click="clearSearch()">Clear Filters</button> |
||||
</div> |
||||
</fieldset> |
||||
</section> |
||||
|
||||
|
||||
@ -1,21 +0,0 @@
@@ -1,21 +0,0 @@
|
||||
<section x-show="isActiveTab(1)" id="sidebar-layerview"> |
||||
<div id="layertree" x-init="initializeLayerTree()"> |
||||
</div> |
||||
<div class="is-container has-text-centered" x-init="function() { |
||||
document.getElementById('tree-btn-collapse') |
||||
.addEventListener('click', ev=> { |
||||
pTree.collapseAll(); |
||||
}); |
||||
|
||||
document.getElementById('tree-btn-uncheck') |
||||
.addEventListener('click', ev=> { |
||||
pTree.uncheckAll(); |
||||
}); |
||||
}"> |
||||
<button id="tree-btn-collapse" class="button is-small">Collapse All</button> |
||||
<button id="tree-btn-expand" class="button is-small is-hidden">Expand All</button> |
||||
<button id="tree-btn-uncheck" class="button is-small">Clear All</button> |
||||
</div> |
||||
</section> |
||||
<?php include('modal-downloadlayer.php');?> |
||||
|
||||
@ -1,34 +0,0 @@
@@ -1,34 +0,0 @@
|
||||
<section id="sidebar" x-data="{ |
||||
activeTab: 1, |
||||
requestsGrid: {}, |
||||
setActiveTab(value) { |
||||
this.activeTab = value; |
||||
}, |
||||
isActiveTab(tab) { |
||||
return tab == this.activeTab; |
||||
}, |
||||
downloadData() { |
||||
downloadRequested(); |
||||
} |
||||
}"> |
||||
<div class="tabs" > |
||||
<ul> |
||||
<li @click="setActiveTab(1)" :class="isActiveTab(1) ? 'is-active' : ''"><a>Layers</a></li> |
||||
<li @click="setActiveTab(2)" :class="isActiveTab(2) ? 'is-active' : ''"><a>Advanced Search</a></li> |
||||
<li @click="setActiveTab(3)" :class="isActiveTab(3) ? 'is-active' : ''"><a>Requests</a></li> |
||||
</ul> |
||||
</div> |
||||
<?php include('sidebar-layerview.php'); ?> |
||||
<?php include('sidebar-advancedsearch.php'); ?> |
||||
<?php include('sidebar-requests.php'); ?> |
||||
</section> |
||||
<style> |
||||
#sidebar { |
||||
height: 100%; |
||||
} |
||||
|
||||
#sidebar > section { |
||||
height: 90%; |
||||
} |
||||
|
||||
</style> |
||||
@ -1,7 +0,0 @@
@@ -1,7 +0,0 @@
|
||||
<section x-show="isActiveTab(3)" id="sidebar-requests" x-init="makeRequestsGrid()"> |
||||
<div id="grid-requests" class="flex-grow" x-ref="requests"></div> |
||||
<p class="ml-6">*Your request contains restricted data. Please contact the Institute's primary investigator at <a href="mailto:sissy@hcmr.gr">helpdesk@hcmr.gr</a> using the UUID of the request you wish to receive</p> |
||||
<button class="button m-5" @click="downloadData()">Download All</button> |
||||
<button class="button m-5" @click="clearRequests()">Clear All</button> |
||||
</section> |
||||
|
||||
@ -1,32 +0,0 @@
@@ -1,32 +0,0 @@
|
||||
<div id="spinner" class="is-overlay is-centered icon mx-auto my-auto is-fullheight is-fullwidth is-transparent has-background-black" style="z-index: 6000;width: 100%;height: 100%;opacity: 0.6;"> |
||||
<span class="loader icon mx-auto my-auto is-large" ></span> |
||||
</div> |
||||
|
||||
<style> |
||||
|
||||
.loader-wrapper { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
height: 100%; |
||||
width: 100%; |
||||
background: #fff; |
||||
opacity: 0; |
||||
z-index: -1; |
||||
transition: opacity .3s; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 6px; |
||||
|
||||
.loader { |
||||
height: 80px; |
||||
width: 80px; |
||||
} |
||||
|
||||
&.is-active { |
||||
opacity: 1; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,64 +0,0 @@
@@ -1,64 +0,0 @@
|
||||
<div id="main-view" x-data="{activeTab: 1, |
||||
setActiveTab(value) { |
||||
this.activeTab = value; |
||||
}, |
||||
isActiveTab(tab) { |
||||
return tab == this.activeTab; |
||||
}, |
||||
downloadData() { |
||||
downloadRequested(); |
||||
} |
||||
}"> |
||||
<nav class="tabs is-centered is-boxed" > |
||||
<ul> |
||||
<li :class="isActiveTab(1) ? 'is-active' : ''"> |
||||
<a @click="setActiveTab(1)"> |
||||
<span class="icon is-small"><i class="fas fa-earth-europe" aria-hidden="true"></i></span> |
||||
<span>Map</span> |
||||
</a> |
||||
</li> |
||||
<li :class="isActiveTab(2) ? 'is-active' : ''"> |
||||
<a @click="setActiveTab(2); metadata_search()"> |
||||
<span class="icon is-small"><i class="fas fa-server" aria-hidden="true"></i></span> |
||||
<span>Metadata</span> |
||||
</a> |
||||
</li> |
||||
<li :class="isActiveTab(3) ? 'is-active' : ''"> |
||||
<a @click="setActiveTab(3)"> |
||||
<span class="icon is-small"><i class="fas fa-book" aria-hidden="true"></i></span> |
||||
<span>User Manual</span> |
||||
</a> |
||||
</li> |
||||
<li :class="isActiveTab(4) ? 'is-active' : ''"> |
||||
<a @click="setActiveTab(4)"> |
||||
<span class="icon is-small"><i class="fas fa-screwdriver-wrench" aria-hidden="true"></i></span> |
||||
<span>Admin Panel</span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div id="login-status" class="mr-10 is-inline-flex is-align-items-center"><span x-text="'Welcome ' + userName"></span> <a id="btn-logout" href="logout">Log Out</a></div> |
||||
</nav> |
||||
<div class="columns"> |
||||
<aside class="column is-one-third pb-10"> |
||||
<?php include('sidebar-panel.php');?> |
||||
</aside> |
||||
<main class="column"> |
||||
<?php include('spinner.php'); ?> |
||||
<?php include('map.php'); ?> |
||||
<?php include('metadata.php'); ?> |
||||
<?php include('main-about.php'); ?> |
||||
</main> |
||||
</div> |
||||
</div> |
||||
<style> |
||||
#login-status { |
||||
position: absolute; |
||||
right: 25px; |
||||
} |
||||
|
||||
#main-view { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue