pat/web/dist/index.html
2023-05-21 13:00:23 +02:00

699 lines
27 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>{{.AppName}} - Mailbox</title>
<link href="dist/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target=".navbar-collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span id="gui_status_light" class="btn status-light btn-danger"></span> {{.Mycall}}
</a>
<div class="navbar-text"><a href="#" class="navbar-link" id="status_text"></a></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" id="inbox_tab">Inbox</a></li>
<li><a href="#" id="outbox_tab">Outbox</a></li>
<li><a href="#" id="sent_tab">Sent</a></li>
<li><a href="#" id="archive_tab">Archive</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"> </span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#" data-toggle="modal" data-target="#connectModal">
<span class="glyphicon glyphicon-refresh" /> Connect...
</a>
</li>
<li class="divider"></li>
<li>
<a href="#" data-toggle="modal" data-target="#composer">
<span class="glyphicon glyphicon-edit" /> Compose...
</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#posModal">
<span class="glyphicon glyphicon-map-marker" /> Position...
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Other stuff</li>
<!--<li><a href="#">Settings</a></li>-->
<li>
<a href="#" data-toggle="modal" data-target="#formsUpdateModal">
Update Form Templates
</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#aboutModal">About {{.AppName}}</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
<div id="navbar_progress" aria-hidden="true" style="display: none">
<span class="progress-text"></span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="min-width: 20px; width: 0%"></div>
</div>
</div>
<!--/.navbar_progress-->
<div id="navbar_status"></div>
</div>
</div>
<!-- Begin gui status content -->
<div id="status_popover_content" class="_content" style="display: none">
<div id="no_error" class="panel panel-sm panel-success">
<div class="panel-heading">No issues</div>
<div class="panel-body">No GUI issues detected.</div>
</div>
<div id="websocket_error" class="panel panel-sm panel-danger">
<div class="panel-heading">Websocket</div>
<div class="panel-body">
<p>A websocket connection to the backend could not be established.</p>
<p>Make sure {{.AppName}} is running and available on the network.</p>
</div>
</div>
<div id="notifications_error" class="panel panel-sm panel-info">
<div class="panel-heading panel-heading-sm">Desktop notifications</div>
<div class="panel-body">
<p>Desktop notifications are unavailable due to insufficient permissions.</p>
</div>
</div>
<div id="geolocation_error" class="panel panel-sm panel-info hidden">
<div class="panel-heading">Geolocation</div>
<div class="panel-body">
<p>Geolocation for position reporting are unavailable due to insufficient permissions.</p>
</div>
</div>
<div id="webserver_info" class="panel panel-sm panel-info ignore-status hidden">
<div class="panel-heading">Web service</div>
<div class="panel-body"></div>
</div>
</div>
<!-- End gui status content -->
<!-- Begin page content -->
<div class="container">
<!-- Begin prompt modal -->
<div
class="modal fade modal-narrow"
id="promptModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="promptMessage"></h4>
</div>
<form onsubmit="return false">
<div class="modal-body">
<input
type="password"
id="promptResponseValue"
name="response"
class="form-control"
placeholder=""
/>
<input type="hidden" id="promptID" name="id" class="form-control" placeholder="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="OK" class="btn btn-primary" id="promptOkButton" />
</div>
</form>
</div>
</div>
</div>
<!-- End prompt -->
<!-- Begin connect modal -->
<div
class="modal fade"
id="connectModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Connect to remote node...</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="connectForm">
<div class="form-group">
<div class="col-md-11">
<div class="form-group row">
<div class="col-md-4">
<select
class="selectpicker form-control"
data-width="100%"
id="aliasSelect"
>
<option value="">(select alias)</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">transport:</label>
<div class="col-md-4">
<select
class="selectpicker form-control"
data-width="100%"
id="transportSelect"
>
<option value="ardop">ARDOP</option>
<option value="ax25">AX.25</option>
<option value="pactor">PACTOR</option>
<option value="telnet">Telnet</option>
<option value="varafm">VARA FM</option>
<option value="varahf">VARA HF</option>
<optgroup label="advanced">
<option value="ax25+agwpe">AX.25+agwpe</option>
<option value="ax25+linux">AX.25+linux</option>
<option value="ax25+serial-tnc">AX.25+serial-tnc</option>
</optgroup>
</select>
</div>
<label for="targetInput" class="col-md-2 control-label">target:</label>
<div class="col-md-4">
<input
type="text"
class="form-control"
id="targetInput"
placeholder="N0CALL"
/>
</div>
</div>
<div class="form-group row">
<div id="freqInputDiv">
<label for="freqInput" class="col-md-2 control-label">freq:</label>
<div class="col-md-4">
<div class="input-group">
<input
type="text"
class="form-control"
id="freqInput"
placeholder="0000.00"
/>
<div class="input-group-addon">KHz</div>
</div>
</div>
</div>
<div id="bandwidthInputDiv">
<label for="bandwidthInput" class="col-md-2 control-label">
bandwidth:
</label>
<div class="col-md-4">
<select
class="selectpicker form-control"
data-width="100%"
id="bandwidthInput"
></select>
</div>
</div>
<div id="addrInputDiv">
<label for="addrInput" class="col-md-2 control-label">address:</label>
<div class="col-md-10">
<input
type="text"
class="form-control"
id="addrInput"
placeholder="user:pass@host:port"
/>
</div>
</div>
</div>
<div class="form-group row" id="checkboxInput">
<div class="col-md-5" id="radioOnlyInputDiv">
<div class="input-group col-md-9">
<label><input type="checkbox" id="radioOnlyInput" /> Radio Only</label>
</div>
</div>
</div>
</div>
</div>
</form>
<span
id="connectURLPreview"
class="text-muted"
style="float: left; position: relative; bottom: 5px"
>
</span>
<span
id="qsyWarning"
class="text-danger"
style="float: right; position: relative; bottom: 5px"
hidden
>
</span>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default btn-sm pull-left"
data-toggle="collapse"
data-target="#rmslist-container"
>
Show RMS list
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="connect_btn">Connect</button>
</div>
<div class="modal-footer collapse" id="rmslist-container">
<div class="form-group row">
<div class="col-md-4">
<select class="selectpicker form-control" data-width="100%" id="modeSearchSelect">
<optgroup label="mode">
<option value="">(any mode)</option>
<option value="ardop" selected>ARDOP</option>
<option value="packet">Packet</option>
<option value="pactor">Pactor</option>
<option value="varafm">VARA FM</option>
<option value="varahf">VARA HF</option>
</optgroup>
</select>
</div>
<div class="col-md-4">
<select class="selectpicker form-control" data-width="100%" id="bandSearchSelect">
<optgroup label="band">
<!-- Values from freq.go -->
<option value="">(any band)</option>
<option value="160m">160m</option>
<option value="80m">80m</option>
<option value="60m">60m</option>
<option value="40m">40m</option>
<option value="30m">30m</option>
<option value="20m">20m</option>
<option value="17m">17m</option>
<option value="15m">15m</option>
<option value="12m">12m</option>
<option value="10m">10m</option>
<option value="6m">6m</option>
<option value="4m">4m</option>
<option value="2m">2m</option>
<option value="1.25m">1.25m</option>
<option value="70cm">70cm</option>
</optgroup>
</select>
</div>
<div class="col-md-4">
<button id="updateRmslistButton" class="btn btn-default btn-link">
Update cache
</button>
</div>
</div>
<div class="table-responsive table-fixed">
<table id="rmslist" class="table table-hover table-condensed">
<thead>
<tr>
<th>target</th>
<th>distance</th>
<th>mode</th>
<th class="text-right">dial freq</th>
</tr>
</thead>
<tbody></tbody>
<!-- This is populated by javascript -->
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Begin posreport modal -->
<div
class="modal fade"
id="posModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Position report</h4>
</div>
<div class="modal-body" id="posView">
<div class="row">
<div class="form-group col-xs-6">
<label for="lat">latitude</label>
<input
type="text"
id="pos_lat"
name="lat"
class="form-control"
placeholder="60.1234"
/>
</div>
<div class="form-group col-xs-6">
<label for="long">longitude</label>
<input
type="text"
id="pos_long"
name="long"
class="form-control"
placeholder="5.0123"
/>
</div>
<div class="form-group col-xs-12">
<label for="comment">Comment</label>
<input
type="text"
id="pos_comment"
name="comment"
class="form-control"
placeholder=""
/>
</div>
</div>
<input type="hidden" id="pos_ts" />
<p id="pos_status"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" autocomplete="off" id="pos_btn">
Post
</button>
</div>
</div>
</div>
</div>
<!-- Begin forms update modal -->
<div
class="modal fade"
id="formsUpdateModal"
tabindex="-1"
role="dialog"
aria-labelledby="formsUpdateModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Form Templates</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>Current forms version: <span id="updateFormsVersion">unknown</span></div>
<button type="button" class="btn btn-primary" id="updateFormsButton">
Update now
</button>
<div>
<span id="updateFormsResponse"></span>
<span id="updateFormsError" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Begin about modal -->
<div
class="modal fade"
id="aboutModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">About</h4>
</div>
<div class="modal-body" id="posView">
<p id="version">{{.AppName}} {{.Version}}</p>
<img src="dist/static/pat_logo.png" width="35%" class="center-block" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<!-- Begin composer -->
<div
class="modal"
id="composer"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<form id="composer_form" enctype="multipart/form-data">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="composer_subject">New message...</h4>
<div class="input-group input-group-sm">
<span class="input-group-addon">To</span>
<input type="text" id="msg_to" name="to" class="form-control" placeholder="" />
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Cc</span>
<input type="text" id="msg_cc" name="cc" class="form-control" placeholder="" />
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">Subject</span>
<input
type="text"
id="msg_subject"
name="subject"
class="form-control"
placeholder="Look ma!"
/>
</div>
<span id="composer_error" class="label label-danger pull-right">
This is an error</span
>
<div class="input-group input-group-sm compose-options">
<label><input type="checkbox" id="msg_p2p_only" name="p2ponly" /> P2P Only</label>
</div>
</div>
<div class="modal-body primary">
<textarea name="body" class="form-control" id="msg_body"></textarea>
</div>
<div class="modal-footer primary">
<div id="composer_actions">
<div class="input-group pull-right">
<button id="post_btn" type="submit" class="btn btn-primary">
Post <span class="glyphicon glyphicon-send"></span>
</button>
</div>
<div class="input-group">
<span class="btn btn-default btn-file">
Add attachment&hellip;
<input id="msg_attachments_input" name="files" type="file" multiple
/></span>
<a
href="#"
id="formsSelectBtn"
class="btn btn-default"
data-toggle="modal"
data-target="#selectForm"
>
Template&hellip; <span class="glyphicon glyphicon-edit"> </span>
</a>
</div>
</div>
<div id="composer_attachments" class="row"></div>
</div>
</div>
</div>
</form>
</div>
<!-- End composer -->
<!-- Begin selecting-a-form modal -->
<div
class="modal"
id="selectForm"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="container">
<div class="d-flex">
<h5 class="modal-title w-100">Select a form...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="row">
<div class="col">
<small id="formsRootFolderName">root folder path</small>
<small id="formsVersion">(v0.0.0)</small>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col" id="formFolderRoot"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Begin folder -->
<div class="table-responsive panel panel-default" id="folder">
<table class="table table-striped table-condensed table-hover"></table>
</div>
<!-- End folder -->
<!-- Begin message view -->
<div
class="modal"
id="message_view"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="btn-group pull-right">
<button
type="button"
class="btn btn-link btn-xs dropdown-toggle"
data-toggle="dropdown"
>
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#" id="reply_btn">
<span class="glyphicon glyphicon-pencil" /> Reply...
</a>
</li>
<li>
<a href="#" id="forward_btn">
<span class="glyphicon glyphicon-share-alt" /> Forward...
</a>
</li>
<li class="divider"></li>
<li>
<a href="#" id="archive_btn">
<span class="glyphicon glyphicon-briefcase" /> Archive
</a>
</li>
<li>
<a href="#" id="delete_btn">
<span class="glyphicon glyphicon-trash" /> Delete
</a>
</li>
</ul>
</div>
<h4 class="modal-title" id="subject"></h4>
<div id="headers"></div>
</div>
<div class="modal-body primary">
<div class="msgbody" id="body"></div>
</div>
<div class="modal-footer primary">
<div id="attachments" class="row"></div>
</div>
</div>
</div>
</div>
<!-- End message view -->
<!-- Begin delete confirm modal -->
<div
class="modal fade"
id="confirm_delete"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Delete message</div>
<div class="modal-body">
Are you sure you want to delete this message? This action can not be reverted.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
</div>
<!-- End delete confirm modal -->
</div>
<!-- End page content -->
<div class="footer">
<div class="container">
<pre id="console"></pre>
</div>
</div>
<script src="dist/js/app.js"></script>
</body>
</html>