jaume
/
infravis-trahust
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TimberVis Flexiboard: Visualization and Exploration Flexiboard for Timber Buildings IoT data sensors. The pulse of the wood Monitoring of Wooden houses: Time series of sensors data measuring humidity, temperatures, vibrations and weather conditions. https://lnu.se/forskning/forskningsprojekt/projekt-flexiboard-for-visualisering-och-utforskning-av-trabyggnader/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 Commits
2 Branches
0 Tags
688 MiB
 
 
 
 
Tag: Branch: Tree: 569fb7d87a
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '569fb7d87a'
${ noResults }
infravis-trahust/web-html/dash.html

874 lines
40 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>TräHus dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="imgs/infravis.ico" type="image/x-icon">
<!-- required placeholder="Required" meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="./css/c3.css" rel="stylesheet">
<link href="./css/bootstrap-datepicker3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="./css/dash.css" rel="stylesheet">
<style>
</style>
<!-- JS libs-->
<script src="./js/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/d3.v4.js"></script>
<script src="./js/c3.js"></script>
<script src="./js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/bootstrap-datetimepicker.min.js"></script>
<!-- JS local & config-->
<script src="./js/d3-horizon-chart0.0.5.js"></script>
<script src="./config/config.js"></script>
<script src="./config/datamap.js"></script>
</head>
<body>
<div class="container" style="max-width:90%">
<!-- Navbar-->
<nav id ="navbar" class="navbar navbar-dark bg-primary navbar-expand-lg navbar-light bg-light">
</nav>
<h1 id="h1_title"></h1>
<p id="subtitle"></p>
<!-- House info card:-->
<div id="myhouse">
</div>
<div id="templates">Manage board:&nbsp;&nbsp;
<button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#saveBoardModal"><i class="fa fa-upload"></i>Save Board</button>
&nbsp;&nbsp;
<button id="loadListBoardsButton" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#loadBoardModal"><i class="fa fa-folder-open-o"></i>Load Board</button>
<span class="float-end">Templates:&nbsp;&nbsp;
<button id="button2" class="btn btn-outline-success"><i class="fa fa-map"></i> 33 %</button>
&nbsp;&nbsp;
<button id="button1" class="btn btn-outline-success"><i class="fa fa-bars"></i> 100 %</button>
</span>
</div>
<div class="frame">
<div id="col-left" class="col resizable-column">
<button type="button" class="btn btn-danger rounded-pill" data-bs-toggle="modal" data-bs-target="#parallelModal">new Parallel</button>
</div>
<div id="col-center" class="col resizable-column">
<button type="button" class="btn btn-info rounded-pill" data-bs-toggle="modal" data-bs-target="#gridModal">new Grid</button>
</div>
<div id="col-right" class="col resizable-column">
<button type="button" class="btn btn-warning rounded-pill" data-bs-toggle="modal" data-bs-target="#horizonModal">new Horizon</button>
</div>
</div>
<!-- ##################### -->
<!-- Save Board Modal -->
<div class="modal fade" id="saveBoardModal" tabindex="-1" aria-labelledby="saveBoardModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="tab-pane fade show" id="saveBoard-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>You can save this board. Just fill it up the below form:</p>
<form id="saveBoardForm" class="addtext">
<div class="mb-3">
<label for="boardNameLabel" class="form-label">Board name</label>
<input required placeholder="required" type="email" class="form-control" id="boardName" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="boardDescLabel" class="form-label">Description</label>
<textarea class="form-control" id="boardDesc" rows="3"></textarea>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button ID="submitBoard" type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Load Board Modal -->
<div class="modal fade" id="loadBoardModal" tabindex="-1" aria-labelledby="loadBoardModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="tab-pane fade show" id="loadBoard-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
</div>
</div>
</div>
</div>
</div>
<!-- ##################### -->
<!-- parallelModal -->
<div class="modal fade" id="parallelModal" tabindex="-1" aria-labelledby="parallelModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div id="parallel-v-pills-tab">
<ul class="nav flex-column nav-pills me-3" id="parallel-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-bold active" id="parallel-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-intro" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Parallel diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-default-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-default" type="button" role="tab" aria-controls="pills-empty" aria-selected="true">Add text</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-home-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Yearly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Monthly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-weekly-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-weekly" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Weekly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-contact-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Daily view</button>
</li>
</ul>
</div>
<!-- TABS CONTENT --------------------------------------------------- -->
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="parallel-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- ADD TEXT TAB------------------------ -->
<div class="tab-pane fade show" id="parallel-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="PText" class="addtext">
<div class="mytextarea" id="Peditor"></div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- YEARLY VIEW TAB------------------ -->
<div class="tab-pane fade show" id="parallel-pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Yearly view</p>
<form id="PY">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="PYTitle" name="PYTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYFamSensor" name="PYFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYParameter" name="PYParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select Year:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYYear" name="PYYear" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="grid-timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PYTime" disabled name="PYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- MONTHLY VIEW TAB------------------ -->
<div class="tab-pane fade" id="parallel-pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Monthly view</p>
<form id="PM">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="PMTitle" name="PMTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PMFamSensor" name="PMFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PMParameter" name="PMParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select Month and Year:</p>
<div id="SelectYearMonth1" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="PMYearMonth" name="PMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-8">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- WEEKLY VIEW TAB------------------ -->
<div class="tab-pane fade" id="parallel-pills-weekly" role="tabpanel" aria-labelledby="pills-weekly-tab">
<p>Weekly view</p>
<form id="PW">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="PWTitle" name="PWTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PWFamSensor" name="PWFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PWParameter" name="PWParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<!-- DD/MM/YYYY SELECT -->
<div id="parallelSelectYearMonthWeek" class="input-group date">
<label for="time">Select a week,<br />(clicking in a Monday)</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="PWWeekMonday" name="PWWeekMonday" type="text" class="span2">
</div>
<p>&nbsp;</p>
<!-- TIME SELECT -->
<div class="form-group col-md-8">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- DAILY VIEW TAB------------------ -->
<div class="tab-pane fade" id="parallel-pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>Daily view</p>
<form id="PD">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="PDTitle" name="PDTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PDFamSensor" name="PDFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PDParameter" name="PDParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<!-- DD/MM/YYYY SELECT -->
<div id="SelectYearMonthDay" class="input-group date">
<label style="width:100%;" for="day">Select Day, Month, Year</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="PDYearMonthDay" name="PDYearMonthDay" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Closing MODAL dialog -->
<!-- ##################### -->
<!-- gridModal -->
<div class="modal fade" id="gridModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div id="grid-v-pills-tab">
<ul class="nav flex-column nav-pills me-3" id="grid-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-bold active" id="grid-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-intro" type="button" role="tab" aria-controls="pills-empty" aria-selected="true">Grid diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="grid-pills-default-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Add text</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="grid-pills-home-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Yearly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="grid-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Monthly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="grid-pills-contact-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Weekly view</button>
</li>
</ul>
</div>
<!-- TABS CONTENT --------------------------------------------------- -->
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="grid-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- ADD TEXT TAB------------------------ -->
<div class="tab-pane fade show" id="grid-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="GText" class="addtext">
<div class="mytextarea" id="Geditor"></div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- YEARLY VIEW TAB------------------ -->
<div class="tab-pane fade show" id="grid-pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Yearly view</p>
<form id="GY">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="GYTitle" name="GYTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GYSensor" name="GYSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GYParameter" name="GYParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="gridSelectYear" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="GYYear" name="GYYear" class="form-select" aria-label="grid-yearly-select">
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GYTime" disabled name="GYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- MONTHLY VIEW TAB------------------ -->
<div class="tab-pane fade" id="grid-pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Monthly view</p>
<form id="GM">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="GMTitle" name="GMTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GMSensor" name="GMSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GMParameter" name="GMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="grid-SelectYearMonth" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="GMYearMonth" name="GMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
<!-- TIME SELECT -->
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GMTime" disabled name="GMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- WEEKLY (day) VIEW TAB------------------ -->
<div class="tab-pane fade" id="grid-pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>Weekly view: <i>select a week by clicking on a Monday.</i></p>
<form id="GW">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="GWTitle" name="GWTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GWSensor" name="GWSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GWParameter" name="GWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<!-- Monday/MM/YYYY -> week selecting a Monday -->
<div id="SelectYearMonthWeek" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="GWYearMonthMonday" name="GWYearMonthMonday" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GWTime" disabled name="GWTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Closing MODAL dialog -->
<!-- ##################### -->
<!-- horizonModal -->
<div class="modal fade" id="horizonModal" tabindex="-1" aria-labelledby="horizonModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div id="horizon-v-pills-tab">
<ul class="nav flex-column nav-pills me-3" id="horizon-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link fw-bold active" id="horizon-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-intro" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Horozon diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-default-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Add text</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-home-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Yearly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Monthly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-contact-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Weekly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-hday-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-hday" type="button" role="tab" aria-controls="pills-hday" aria-selected="false">Daily view</button>
</li>
</ul>
</div>
<!-- TABS CONTENT --------------------------------------------------- -->
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="horizon-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- DEFAULT TAB------------------------ -->
<div class="tab-pane fade show" id="horizon-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="HText" class="addtext">
<div class="mytextarea" id="Heditor"></div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- YEARLY VIEW TAB------------------ -->
<div class="tab-pane fade show" id="horizon-pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Yearly view</p>
<form id="HY">
<div>
<span class="col-md-3">Diagram title: </span>
<input required placeholder="Required" id="HYTitle" name="HYTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HYFamSensor" name="HYFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HYParameter" name="HYParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="horizon-optionMonthly" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="HYYear" name="HYYear" class="form-select" aria-label="horizon-yearly-select">
</select>
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input required placeholder="Required" id="HYTime" disabled name="HYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">SubmitXX</button>
</div>
</form>
</div>
<!-- MONTHLY VIEW TAB------------------ -->
<div class="tab-pane fade" id="horizon-pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Monthly view</p>
<form id="HM">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="HMTitle" name="HMTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HMFamSensor" name="HMFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HMParameter" name="HMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<div id="horizon-SelectYearMonth" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="HMYearMonth" name="GMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
<!-- TIME SELECT -->
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="HMTime" disabled name="HMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- WEEKLY (day) VIEW TAB------------------ -->
<div class="tab-pane fade" id="horizon-pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>Weekly view: <i>select a week by clicking on a Monday.</i></p>
<form id="HW">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="HWTitle" name="HWTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HWFamSensor" name="HWFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HWParameter" name="HWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
</select>
</div>
<p>&nbsp;</p>
<!-- DD/MM/YYYY SELECT -->
<div id="horizonSelectYearMonthWeek" class="input-group date">
<label for="time">Select a week,<br />(clicking in a Monday)</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="HWWeek" name="HWWeek" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="HWTime" disabled name="HWTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- DAILY VIEW TAB------------------ -->
<div class="tab-pane fade" id="horizon-pills-hday" role="tabpanel" aria-labelledby="pills-hday-tab">
<p>Daily view</p>
<form id="HD">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="HDTitle" name="HDTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HDFamSensor" name="HDFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<p>Select parameter:</p>
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HDParameter" name="HDParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
</select>
</div>
<p>&nbsp;</p>
<!-- DD/MM/YYYY SELECT -->
<div id="SelectYearMonthDay1" class="input-group date">
<label style="width:100%;" for="day">Select Day, Month, Year</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input required placeholder="Required" id="HDYearMonthDay" name="HDYearMonthDay" type="text" class="span2">
</div>
<!-- TIME SELECT -->
<p>&nbsp;</p>
<div class="form-group col-md-12">
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom bg-dark text-light text-center py-2">
<!-- Footer content -->
This is the fixed footer.
</footer>
</div> <!-- Closing MODAL dialog -->
<!-- <div id="results" class="container">XXXXXXXX: </div> -->
<!-- Tooltip container -->
<div id="tooltip" style="display: nblockone; position: absolute; font-size: 30px; background-color: white; padding: 7px; border: 1px solid #ccc;"></div>
<!-- Add the tooltip element here -->
<div id="tooltip_gm"></div>
</div> <!-- main body container closing-->
<!-- //////////////////////////////////////// -->
<!-- rich text editor -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- // Main dash JS code -->
<script src="./js/dash.js"></script>
<!-- // Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>