0758f9a588
- Hopefully (!?) fixed map element sizing bug on page load - Hopefully (!?) fixed bug where polyline layers wouldn't render sometimes - Added time labels between points - Made marker tooltips/popups more informative, though they still require lots of work - Made lines slightly more legible I suspect there are still some weird/sporadic bugs in the map page... but it's harder to find them now. Not sure if good or bad, haha.
420 lines
14 KiB
HTML
420 lines
14 KiB
HTML
<template id="tpl-alert">
|
|
<div class="alert alert-minor alert-dismissible bg-white alert-show" role="alert">
|
|
<div class="alert-icon"></div>
|
|
<div>
|
|
<h4 class="alert-heading"></h4>
|
|
<div class="alert-description"></div>
|
|
</div>
|
|
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
|
<div class="alert-timer-progress-bar-container">
|
|
<div class="alert-timer-progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-dropdown-toggles">
|
|
<div class="d-flex dropdown-options">
|
|
<label class="dropdown-item select-all">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-checks" 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="M7 12l5 5l10 -10"></path>
|
|
<path d="M2 12l5 5m5 -5l5 -5"></path>
|
|
</svg>
|
|
All
|
|
</label>
|
|
<label class="dropdown-item select-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-square" 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>
|
|
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
|
</svg>
|
|
None
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-dropdown-checkbox">
|
|
<label class="dropdown-item">
|
|
<input type="checkbox" class="form-check-input m-0 me-2">
|
|
</label>
|
|
</template>
|
|
|
|
|
|
<template id="tpl-datepicker">
|
|
<div class="date-input-container mb-3">
|
|
<label class="form-label">Date</label>
|
|
<div class="input-group flex-nowrap mb-3">
|
|
<div class="input-icon">
|
|
<span class="input-icon-addon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>
|
|
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
|
|
<line x1="16" y1="3" x2="16" y2="7"></line>
|
|
<line x1="8" y1="3" x2="8" y2="7"></line>
|
|
<line x1="4" y1="11" x2="20" y2="11"></line>
|
|
<line x1="11" y1="15" x2="12" y2="15"></line>
|
|
<line x1="12" y1="15" x2="12" y2="18"></line>
|
|
</svg>
|
|
</span>
|
|
<input class="form-control date-input" placeholder="Date" readonly>
|
|
</div>
|
|
<div class="sort-container">
|
|
<select size="1" class="form-select date-sort">
|
|
<option value="DESC" title="Newest first">
|
|
Desc
|
|
</option>
|
|
<option value="ASC" title="Oldest first">
|
|
Asc
|
|
</option>
|
|
<option value="NEAR" title="Closest first">
|
|
Near
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template id="tpl-filter-dropdown">
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle" type="button"
|
|
data-bs-toggle="dropdown" data-bs-auto-close="outside"></button>
|
|
<div class="dropdown-menu">
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-filter-dropdown-static">
|
|
<div class="dropdown-menu">
|
|
<h6 class="dropdown-header sticky-top"></h6>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template id="tpl-pagination">
|
|
<div class="pagination align-items-center justify-content-end gap-3">
|
|
<div class="page-number text-secondary">
|
|
Page
|
|
</div>
|
|
|
|
<div class="btn-list">
|
|
<a class="btn page-prev disabled">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>
|
|
<polyline points="15 6 9 12 15 18"></polyline>
|
|
</svg>
|
|
Previous
|
|
</a>
|
|
<a class="btn page-next disabled">
|
|
Next
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon ms-2 me-0" 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>
|
|
<polyline points="9 6 15 12 9 18"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-timeline">
|
|
<ul class="list list-timeline">
|
|
|
|
</ul>
|
|
</template>
|
|
|
|
<template id="tpl-tl-item-card">
|
|
<li class="list-timeline-card-item">
|
|
<div class="list-timeline-icon">
|
|
|
|
</div>
|
|
<div class="list-timeline-content">
|
|
<div class="list-timeline-time-container">
|
|
<div class="list-timeline-time">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="list-timeline-content-container">
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<template id="tpl-tl-item-date-card">
|
|
<div class="list-timeline-date-anchor">
|
|
<li class="list-timeline-card-item list-timeline-date-card">
|
|
<div class="list-timeline-content">
|
|
<div class="list-timeline-time-container">
|
|
<div class="list-timeline-date">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="map-container">
|
|
<div class="map-container content rounded overflow-hidden ratio">
|
|
<div class="map-placeholder d-flex align-items-center justify-content-center bg-muted-lt">
|
|
Hover to activate map
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="loader-container">
|
|
<!-- The "supercontainer" can contain the image/video that is being loaded, then we fade out the loader for a nice effect. -->
|
|
<div class="loader-supercontainer">
|
|
<div class="loader-container bg-muted-lt">
|
|
<div class="loader-container-content">
|
|
<svg class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
|
<g>
|
|
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
|
|
values="0 50 50;360 50 50" keyTimes="0;1" dur="0.625s"></animateTransform>
|
|
<path fill-opacity="0.49" fill="#004d73" d="M50 50L50 0A50 50 0 0 1 100 50Z"></path>
|
|
</g>
|
|
<g>
|
|
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
|
|
values="0 50 50;360 50 50" keyTimes="0;1" dur="0.8s"></animateTransform>
|
|
<path fill-opacity="0.49" fill="#00334e" d="M50 50L50 0A50 50 0 0 1 100 50Z"
|
|
transform="rotate(90 50 50)"></path>
|
|
</g>
|
|
<g>
|
|
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
|
|
values="0 50 50;360 50 50" keyTimes="0;1" dur="1.25s"></animateTransform>
|
|
<path fill-opacity="0.49" fill="#007fdb" d="M50 50L50 0A50 50 0 0 1 100 50Z"
|
|
transform="rotate(180 50 50)"></path>
|
|
</g>
|
|
<g>
|
|
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
|
|
values="0 50 50;360 50 50" keyTimes="0;1" dur="2.5s"></animateTransform>
|
|
<path fill-opacity="0.49" fill="#dbebfa" d="M50 50L50 0A50 50 0 0 1 100 50Z"
|
|
transform="rotate(270 50 50)"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
<div class="loading-message text-secondary">Loading</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-media-card">
|
|
<div class="minidisp-media">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template id="tpl-message">
|
|
<div class="chat-item">
|
|
<div class="row align-items-top">
|
|
<div class="col-auto message-avatar mt-3">
|
|
<!-- avatar -->
|
|
</div>
|
|
<div class="col col-lg-9">
|
|
<div class="chat-bubble">
|
|
<div class="chat-bubble-title">
|
|
<div class="row">
|
|
<a class="col chat-bubble-author message-sender view-entity-link" >
|
|
<!-- name -->
|
|
</a>
|
|
<div class="col-auto chat-bubble-date message-timestamp">
|
|
<!-- timestamp -->
|
|
</div>
|
|
<div class="col-auto message-data-source small">
|
|
<span class="data-source-icon avatar avatar-xxs align-middle"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-bubble-body">
|
|
<div class="message-content">
|
|
<!-- content -->
|
|
</div>
|
|
<div class="attachments mt-2 d-none">
|
|
<!-- attachments -->
|
|
</div>
|
|
<div class="message-reactions mt-2 d-flex d-none">
|
|
<!-- reactions -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto lh-1 align-self-center">
|
|
<div class="dropdown">
|
|
<a href="#" class="link-secondary" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>
|
|
<circle cx="5" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="19" cy="12" r="1"></circle>
|
|
</svg>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a class="dropdown-item view-item-link">
|
|
View item
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-compact-preview">
|
|
<div class="compact">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-map-popup">
|
|
<div class="map-preview-popup">
|
|
<div class="map-preview-coordinates"></div>
|
|
<div class="map-preview-timestamp"></div>
|
|
<div class="map-preview-meta"></div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<template id="tpl-map-marker">
|
|
<div class="map-marker">
|
|
<svg width="32" height="50" viewBox="0 0 32 50" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
|
|
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
|
|
<ellipse cx="16.55" cy="44.107" rx="14.458" ry="5.239" style="fill:url(#shadow);" />
|
|
<path
|
|
class="pin"
|
|
d="M16.113,44.499C16.113,44.499 0.488,25.718 0.488,17.069C0.488,7.82 6.817,0.311 16.067,0.311C25.316,0.311 31.645,7.82 31.645,17.069C31.645,26.319 16.113,44.499 16.113,44.499Z" />
|
|
<path
|
|
class="pin-inside-stroke"
|
|
d="M16.113,44.499C16.113,44.499 0.488,25.718 0.488,17.069C0.488,7.82 6.817,0.311 16.067,0.311C25.316,0.311 31.645,7.82 31.645,17.069C31.645,26.319 16.113,44.499 16.113,44.499ZM16.125,42.473C13.934,39.73 8.54,32.748 4.994,26.196C3.145,22.781 1.774,19.506 1.774,17.069C1.774,8.555 7.552,1.597 16.067,1.597C24.581,1.597 30.359,8.555 30.359,17.069C30.359,19.68 28.998,23.031 27.157,26.466C23.647,33.013 18.313,39.794 16.125,42.473Z"
|
|
style="fill-opacity:0.2;" />
|
|
<g class="marker-icon" stroke="#fff" fill="none" stroke-width="2" transform="translate(4,4)">
|
|
|
|
</g>
|
|
<circle class="more-dot d-none" r="6" cx="25" cy="7"></circle>
|
|
<defs>
|
|
<radialGradient id="shadow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
|
gradientTransform="matrix(14.4584,0,0,5.23888,16.5501,44.1075)">
|
|
<stop offset="0" style="stop-color:#000;stop-opacity:0.4" />
|
|
<stop offset="1" style="stop-color:#000;stop-opacity:0" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-file-picker">
|
|
<div class="file-picker">
|
|
<div class="input-group">
|
|
<!-- <button type="button" class="btn" title="Up one folder">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back-up me-0" 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="M9 14l-4 -4l4 -4"></path>
|
|
<path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
|
|
</svg>
|
|
</button> -->
|
|
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false" title="Disk drives and mount points">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server-2 me-1" 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="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
|
|
<path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path>
|
|
<path d="M7 8l0 .01"></path>
|
|
<path d="M7 16l0 .01"></path>
|
|
<path d="M11 8h6"></path>
|
|
<path d="M11 16h6"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="file-picker-mount-points dropdown-menu">
|
|
|
|
</div>
|
|
<input type="text" class="file-picker-path form-control" autocomplete="off" placeholder="File or folder path">
|
|
</div>
|
|
<div class="file-picker-table table-responsive">
|
|
<table class="table card-table">
|
|
<thead>
|
|
<tr>
|
|
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
|
|
<th class="file-picker-col-size"><button class="table-sort" data-sort="sort-size">Size</button></th>
|
|
<th><button class="table-sort" data-sort="sort-modified">Modified</button></th>
|
|
</tr>
|
|
<tr class="file-picker-up">
|
|
<td class="sort-name" colspan="3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back-up" 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="M9 14l-4 -4l4 -4"></path>
|
|
<path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
|
|
</svg>
|
|
Up
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-tbody">
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="pt-3">
|
|
<label class="form-check form-switch form-check-inline mb-0 ms-auto" title="Include hidden files and folders">
|
|
<input type="checkbox" class="form-check-input file-picker-hidden-files">
|
|
<span class="form-check-label">Hidden files and folders</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-file-picker-item">
|
|
<tr class="file-picker-item">
|
|
<td class="sort-name"></td>
|
|
<td class="sort-size file-picker-col-size"></td>
|
|
<td class="sort-modified"></td>
|
|
</tr>
|
|
</template>
|
|
|
|
<template id="tpl-job-preview">
|
|
<div class="row align-items-center job-preview">
|
|
<div class="col-auto job-icon">
|
|
|
|
</div>
|
|
<div class="col text-truncate">
|
|
<a class="text-body d-block job-link">
|
|
<b class="job-name"></b>
|
|
<span class="job-name-suffix text-truncate"></span>
|
|
</a>
|
|
<div class="progress my-2 job-progress">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<div class="d-block small text-secondary">
|
|
<b>
|
|
<span class="job-progress-text"></span>
|
|
<span class="job-progress-units"></span>
|
|
</b>
|
|
in
|
|
<b class="me-2 job-duration">n/a</b>
|
|
<a class="pause-job mx-2 d-none">Pause</a><a class="unpause-job mx-2 d-none">Resume</a><a class="cancel-job mx-2 d-none">Cancel</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<span class="status-dot job-status-dot"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|