pareto-anywhere
Version:
Open source IoT middleware suite that makes the data from just about anything usable. We believe in an open Internet of Things.
455 lines (453 loc) • 20.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Devices Observer web app for Pareto Anywhere by reelyActive.">
<link rel="stylesheet" href="../style/bootstrappyactive.min.css">
<script type="module" src="../js/color-modes.js"></script>
<title> Devices Observer </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg bg-body-tertiary shadow">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.reelyactive.com/">
<img src="../images/reelyactive-logo-square-nav.png"
width="30" height="30" alt="reelyActive">
</a>
<a class="navbar-brand" href="../">
<img src="../images/pareto-apps-logo-nav.png" width="135" height="30"
alt="Pareto Apps">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarItems" aria-controls="navbarItems"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarItems">
<!-- Left-aligned navigation items -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<!-- Right-aligned navigation items -->
<ul class="navbar-nav">
<li class="nav-item">
<a id="connectIcon" class="nav-link">
<i class="fas fa-cloud"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarSettingsDropdown"
role="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-sliders-h"></i>
</a>
<!-- Settings menu -->
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="navbarSettingsDropdown">
<li>
<form class="dropdown-item p-2">
<legend> Options </legend>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox"
role="switch" id="reviseTimestampsSwitch">
<label class="form-check-label"
for="reviseTimestampsSwitch">
reviseTimestamps
</label>
</div>
</form>
</li>
</ul>
</li>
<!-- Colour theme chooser -->
<li class="nav-item dropdown">
<button class="btn btn-link nav-link dropdown-toggle"
id="bd-theme" type="button" aria-expanded="false"
data-bs-toggle="dropdown" data-bs-display="static"
aria-label="Toggle theme (auto)">
<i class="fas fa-adjust"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item"
data-bs-theme-value="light" aria-pressed="false">
<i class="fas fa-sun"></i> Light
</button>
</li>
<li>
<button type="button" class="dropdown-item"
data-bs-theme-value="dark" aria-pressed="false">
<i class="fas fa-moon"></i> Dark
</button>
</li>
<li>
<button type="button" class="dropdown-item active"
data-bs-theme-value="auto" aria-pressed="true">
<i class="fas fa-adjust"></i> Auto
</button>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarInfoDropdown"
role="button" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-question-circle"></i>
</a>
<!-- Info about tracking and open source software/licenses -->
<ul class="dropdown-menu dropdown-menu-end shadow"
aria-labelledby="navbarInfoDropdown">
<li>
<a class="dropdown-item"
href="https://www.reelyactive.com/how-we-observe/#digital">
<i class="fas fa-mouse-pointer"></i>
Behaviour tracking free
<span class="badge bg-success animate-breathing">
<i class="fas fa-user-shield"></i>
</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" target="_blank"
href="https://getbootstrap.com" >
<i class="fab fa-bootstrap"></i>
Bootstrap 5
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://fontawesome.com" >
<i class="fab fa-font-awesome"></i>
Font Awesome (Free)
<span class="badge bg-light text-dark">
<i class="fab fa-creative-commons"></i>
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/web-style-guide/" >
<i class="fas fa-code"></i>
Web Style Guide
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/cuttlefish/">
<i class="fab fa-js"></i>
cuttlefish.js
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/cormorant/">
<i class="fab fa-js"></i>
cormorant.js
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://github.com/reelyactive/beaver/">
<i class="fab fa-js"></i>
beaver.js
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li>
<a class="dropdown-item" target="_blank"
href="https://socket.io/" >
<i class="fab fa-js"></i>
socket.io 4
<span class="badge bg-light text-dark">
<i class="fab fa-osi"></i> MIT
</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" target="_blank"
href="https://www.reelyactive.com/made-in-montreal/" >
<i class="fab fa-canadian-maple-leaf"></i>
Made in Montréal
<i class="fas fa-city"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="alert alert-ambient alert-dismissible fade show mt-5"
role="alert" id="demoalert" hidden>
<i class="fas fa-exclamation-triangle animate-breathing me-2"></i>
Could not connect to Pareto Anywhere API,
<a href="?demo=default"
class="alert-link"> enable demo </a> instead?
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show mt-5"
role="alert" id="stalealert" hidden>
<i class="fas fa-exclamation-triangle animate-breathing me-2"></i>
Incoming events are stale, consider enabling <i class="fas fa-sliders-h"></i> <strong>reviseTimestamps</strong> and/or correct the system time of the data source.
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
<!-- Title card -->
<div class="card text-bg-primary mt-5">
<div class="row">
<div class="col-lg-3 align-self-center">
<div class="card-body">
<h4 class="card-title mb-0"> Devices Observer </h4>
</div>
</div>
<div class="col-lg-6 align-self-center">
<div class="card-body">
<div class="input-group">
<span class="input-group-text" id="filterIcon"
for="filterSelect">
<i class="fas fa-filter"></i>
</span>
<select id="filterSelect" class="form-select"
aria-label="Filter select"
aria-describedby="filterIcon">
<option value="none" selected> No filter </option>
<option value="rssiDec"> Decreasing rssi </option>
<option value="rssiInc"> Increasing rssi </option>
</select>
<span class="input-group-text" id="searchIcon">
<i class="fas fa-search"></i>
</span>
<input id="searchInput" type="text" class="form-control"
placeholder="Search by id" aria-label="Search"
aria-describedby="searchIcon">
<button class="btn btn-info dropdown-toggle" id="saveButton"
type="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fas fa-save"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" id="csvItem"> Save as CSV </a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 text-end align-self-center">
<div class="card-body">
<p class="card-text mb-0">
<i class="fas fa-barcode"></i>
<span id="devicesCount" class="font-monospace me-2">0</span>
<i class="fas fa-clock"></i>
<span id="time" class="font-monospace"></span>
</p>
</div>
</div>
</div>
</div>
<!-- Devices table -->
<table id="devicesTable" class="table table-hover my-4">
<thead>
<tr>
<th scope="col">
<i class="fas fa-barcode"></i> device<br>
<small class="text-body-tertiary">(signature)</small>
</th>
<th scope="col">
<i class="fas fa-exchange-alt"></i> events<br>
<small class="text-body-tertiary">(latest)</small>
</th>
<th scope="col">
<i class="fas fa-signal"></i> rssi<br>
<small class="text-body-tertiary">(strongest)</small>
</th>
<th scope="col">
<i class="fas fa-map-pin"></i> receiver<br>
<small class="text-body-tertiary">(strongest)</small>
</th>
<th scope="col">
<i class="fas fa-info-circle"></i> rec/dec/pac<br>
<small class="text-body-tertiary">(# since event)</small>
</th>
<th scope="col">
<i class="fas fa-clock"></i> timestamp<br>
<small class="text-body-tertiary">(latest event)</small>
</th>
</tr>
</thead>
<tbody id="devicesTableBody">
</tbody>
</table>
</div>
</div>
<div class="offcanvas offcanvas-end visible" data-bs-scroll="true"
data-bs-backdrop="false" tabindex="-1" id="offcanvas"
aria-labelledby="offcanvasTitle">
<div class="offcanvas-header">
<h5 class="offcanvas-title">
<span class="badge rounded-pill bg-secondary">
<i class="fas fa-barcode"></i>
</span>
<span class="font-monospace user-select-all"
id="offcanvasTitle"></span>
</h5>
<button type="button" class="btn-close text-reset"
data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="offcanvasBody">
<div id="storyDisplay"></div>
<div id="dynambDisplay" class="my-4"></div>
<div id="statidDisplay" class="my-4"></div>
<div id="editDisplay" class="my-4">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="storytab"
data-bs-toggle="tab" data-bs-target="#storycontent"
type="button" role="tab" aria-controls="storytab"
aria-selected="true"> Story </button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="associationstab" role="tab"
data-bs-toggle="tab" aria-controls="associationstab"
data-bs-target="#associationscontent" type="button"
aria-selected="false"> Associations </button>
</li>
</ul>
<div class="tab-content tab-content-border border-light-subtle">
<!-- Story tab -->
<div class="tab-pane fade show active" id="storycontent"
role="tabpanel" aria-labelledby="storytab">
<form class="my-2" onsubmit="return false;">
<select class="form-select mb-2" id="inputSelectType"
aria-label="Story type">
<option value="Product" selected> Product </option>
<option value="Person">Person</option>
<option value="Place">Place</option>
</select>
<div class="input-group mb-2">
<span class="input-group-text"> Name </span>
<input class="form-control" id="inputName" type="text"
aria-label="Name">
</div>
<div class="form-group mb-2">
<label for="inputImage"> Image </label>
<input type="file" class="form-control-file"
id="inputImage">
</div>
<div class="text-center">
<button type="submit" class="btn btn-sm btn-primary"
id="createStory">
Store & Associate
</button>
</div>
</form>
</div>
<!-- Associations tab -->
<div class="tab-pane fade" id="associationscontent"
role="tabpanel" aria-labelledby="associationstab">
<form class="my-2" onsubmit="return false;">
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-link"></i> url
</span>
<input class="form-control" id="inputUrl" type="url">
<button class="btn btn-primary" type="button"
id="updateUrl">
<i class="fas fa-save"></i>
</button>
</input>
</div>
</form>
<form class="my-2" onsubmit="return false;">
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-tags"></i> tags
</span>
<input class="form-control" id="inputTags" type="text">
<button class="btn btn-primary" type="button"
id="updateTags">
<i class="fas fa-save"></i>
</button>
</input>
</div>
</form>
<form class="my-2" onsubmit="return false;">
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-sitemap"></i> directory
</span>
<input class="form-control" id="inputDirectory" type="text">
<button class="btn btn-primary" type="button"
id="updateDirectory">
<i class="fas fa-save"></i>
</button>
</input>
</div>
</form>
<form class="my-2" onsubmit="return false;">
<div class="input-group">
<span class="input-group-text">
<i class="fas fa-map-marked-alt"></i> position
</span>
<input class="form-control" id="inputPosition" type="text">
<button class="btn btn-primary" type="button"
id="updatePosition">
<i class="fas fa-save"></i>
</button>
</input>
</div>
</form>
<p id="associationError" hidden></p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer bg-dark bg-gradient">
<a href="https://github.com/reelyactive/pareto-anywhere-apps">
pareto-anywhere-apps
</a>
|
<a href="https://www.reelyactive.com"> © reelyActive 2018-2025 </a>
</footer>
<!-- Optional JavaScript -->
<script defer src="../js/fontawesome-reelyactive.min.js"></script>
<script src="../js/bootstrappyactive.bundle.min.js"></script>
<script src="../js/socket.io.min.js"></script>
<script src="../js/cormorant.js"></script>
<script src="../js/beaver.js"></script>
<script src="../js/cuttlefish-story.js"></script>
<script src="../js/cuttlefish-dynamb.js"></script>
<script src="../js/cuttlefish-statid.js"></script>
<script src="../js/starling.js"></script>
<script src="../js/devices-observer.js"></script>
</body>
</html>