320 lines
No EOL
9.8 KiB
HTML
320 lines
No EOL
9.8 KiB
HTML
<title>New Item</title>
|
|
<link rel="stylesheet" href="/resources/css/new.css">
|
|
|
|
|
|
|
|
|
|
<include component="appbar" theme="light"></include>
|
|
|
|
|
|
<div class="page">
|
|
|
|
<div class="page-wrapper">
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<h2 class="page-title">
|
|
Manual Entry
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page body -->
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
Item 1
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="btn-group w-25" role="group">
|
|
<input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-2"
|
|
autocomplete="off" checked>
|
|
<label for="btn-radio-basic-2" type="button" class="btn">Text input</label>
|
|
<input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-1"
|
|
autocomplete="off">
|
|
<label for="btn-radio-basic-1" type="button" class="btn">File upload</label>
|
|
</div>
|
|
<textarea rows="5" class="form-control mt-3" placeholder="Content"></textarea>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row g-5 mb-4">
|
|
<div class="col-4">
|
|
<label class="form-label">Owner</label>
|
|
|
|
<div class="input-group mb-2">
|
|
<select class="entity-input form-select form-control" placeholder="Name or contact info"></select>
|
|
<button class="btn" type="button">New...</button>
|
|
</div>
|
|
|
|
<!-- <select class="entity-input form-select form-control" placeholder="Name or contact info"></select> -->
|
|
<small class="form-hint">Who owns or created this item?</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-5 mb-4">
|
|
<div class="col-md-5">
|
|
<div>
|
|
<label class="form-label">ID</label>
|
|
<input type="text" class="form-control">
|
|
<small class="form-hint">A unique name or number with which this item has been
|
|
referred to.</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="mb-3">
|
|
<label class="form-label">Type of item</label>
|
|
<select name="classification" class="form-control form-select">
|
|
<option></option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-4">
|
|
<div class="mb-3">
|
|
<label class="form-label mb-3">Flag</label>
|
|
<button class="switch-icon switch-icon-scale"
|
|
data-bs-toggle="switch-icon">
|
|
<span class="switch-icon-a text-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-star" width="24"
|
|
height="24" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" fill="none" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none">
|
|
</path>
|
|
<path
|
|
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
<span class="switch-icon-b text-yellow">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-star-filled"
|
|
width="24" height="24" viewBox="0 0 24 24"
|
|
stroke-width="2" stroke="currentColor" fill="none"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none">
|
|
</path>
|
|
<path
|
|
d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"
|
|
stroke-width="0" fill="currentColor"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
(TODO: more...)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row g-5 mb-4">
|
|
<div class="col-sm-4 col-md-4">
|
|
<label class="form-label required">Timestamp</label>
|
|
<div id="timestamp"></div>
|
|
<small class="form-hint mt-2">Be as specific as possible, or use a range if a precise date is not known.</small>
|
|
|
|
</div>
|
|
<div class="col-sm-4 col-md-4">
|
|
<label class="form-label">Ending timestamp</label>
|
|
<div id="timespan"></div>
|
|
<small class="form-hint mt-2">If the data spans a time period (such as a vocation), fill out its end date here.</small>
|
|
</div>
|
|
<div class="col-sm-4 col-md-4">
|
|
<label class="form-label">Time uncertainty</label>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<input type="number" class="form-control" min="0">
|
|
</div>
|
|
<div class="col-5">
|
|
<select class="form-control form-select">
|
|
<option></option>
|
|
<option>minutes</option>
|
|
<option>hours</option>
|
|
<option>days</option>
|
|
<option>months</option>
|
|
<option>years</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<small class="form-hint mt-2">Indicate if the time may be off by some amount.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-5 mb-4">
|
|
<div class="col-8">
|
|
<div class="ratio ratio-21x9">
|
|
<div id="coordinate-map" class="h-100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-3 col-md-3">
|
|
<div class="mb-3">
|
|
<label class="form-label">Latitude</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Longitude</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Location uncertainty</label>
|
|
<div class="row">
|
|
<div class="col-5">
|
|
<input type="number" class="form-control" min="0">
|
|
</div>
|
|
<div class="col-7">
|
|
<select class="form-control form-select">
|
|
<option></option>
|
|
<option>feet</option>
|
|
<option>meters</option>
|
|
<option>miles</option>
|
|
<option>kilometers</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<small class="form-hint mt-2">Approximate coordinate precision, if known.</small>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Altitude</label>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<input type="number" class="form-control">
|
|
</div>
|
|
<div class="col-6">
|
|
<select class="form-control form-select">
|
|
<option></option>
|
|
<option>feet</option>
|
|
<option>meters</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<include component="footer"></include>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const leafletMap = L.map('coordinate-map').setView([20, -10], 2);
|
|
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
// attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
// }).addTo(leafletMap);
|
|
|
|
var layer = protomapsL.leafletLayer({url: 'http://localhost:38233/protomaps-basemap-opensource-20230408.pmtiles'})
|
|
layer.addTo(leafletMap)
|
|
|
|
</script>
|
|
|
|
<script>
|
|
const classes = load('item_classes');
|
|
for (const key in classes) {
|
|
$$('[name=classification]').forEach(el => {
|
|
const opt = document.createElement('option');
|
|
opt.value = key;
|
|
opt.innerText = classes[key].labels[0];
|
|
el.append(opt);
|
|
});
|
|
}
|
|
|
|
function hideTimeToggle(dp) {
|
|
$$('.air-datepicker-button', dp.$buttons).forEach(el => {
|
|
if (el.classList.contains('datepicker-time-toggle')) {
|
|
el.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
|
|
$('#timestamp').append(newDatePicker({
|
|
passthru: {
|
|
selectedDates: [new Date()],
|
|
onSelect: function(event) {
|
|
$('#timespan .date-input').datepicker.update({
|
|
minDate: Array.isArray(event.date) ? event.date[0] : event.date
|
|
});
|
|
},
|
|
buttons: [
|
|
{
|
|
content(dp) {
|
|
return 'Year-Month'
|
|
},
|
|
onClick(dp) {
|
|
dp.update({
|
|
timepicker: false,
|
|
minView: 'months',
|
|
view: 'months',
|
|
dateFormat: 'MMMM yyyy'
|
|
});
|
|
$$('.air-datepicker-button', dp.$buttons).forEach(el => {
|
|
if (el.classList.contains('datepicker-time-toggle')) {
|
|
el.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
content(dp) {
|
|
return 'Year'
|
|
},
|
|
onClick(dp) {
|
|
dp.update({
|
|
timepicker: false,
|
|
minView: 'years',
|
|
view: 'years',
|
|
dateFormat: 'yyyy'
|
|
});
|
|
$$('.air-datepicker-button', dp.$buttons).forEach(el => {
|
|
if (el.classList.contains('datepicker-time-toggle')) {
|
|
el.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
{
|
|
content(dp) {
|
|
return 'Full date'
|
|
},
|
|
onClick(dp) {
|
|
dp.update({
|
|
minView: 'days',
|
|
view: 'days',
|
|
dateFormat: ''
|
|
});
|
|
}
|
|
}
|
|
]
|
|
},
|
|
sort: false,
|
|
time: true,
|
|
timeToggle: true,
|
|
rangeToggle: true
|
|
}));
|
|
|
|
$('#timespan').append(newDatePicker({
|
|
passthru: {
|
|
minDate: new Date()
|
|
},
|
|
sort: false,
|
|
time: true,
|
|
timeToggle: true
|
|
}));
|
|
|
|
newEntitySelect('.entity-input', 1);
|
|
</script> |