MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-11-24 11:37:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Major refactoring of UI code, small UI changes. (#48)

Browse Source 
* Major refactoring of UI code, small UI changes.

* Single file index.js split up into separate modules
* Modules for handling UI view components
* Modules for handling JSON/Model data
* Modules for support tasks
* Module to encapsulate Moonfire API
* Main application module
* index.js simplified to just activating main app
* Settings file functionality expanded
* UI adds "Time Format" popup to allow changing time representation
* CSS changes/additions to streamline looks
* Recordings loading indicator only appears after 500ms delay, if at all

* Address first set of PR change requests from Scott.

* Add copyright headers to all files (except JSON files)
* Fix bug with entering time values in range pickers
* Fixed an erroneous comment and/or spelling error here and there
* Fixed JSDoc comments where [description] was not filled in
* Removed a TODO from NVRApplication as it no longer applies
* Fixed bug handling "infinite" case of video segment lengths
* Fixed bug in "trim" handler and trim execution

* Retrofit video continues loading from separate PR

Signed-off-by: Dolf Starreveld <dolf@starreveld.com>

* Address PR comments

Signed-off-by: Dolf Starreveld <dolf@starreveld.com>

* Address PR comments

Signed-off-by: Dolf Starreveld <dolf@starreveld.com>
This commit is contained in:
Dolf Starreveld
2018-03-20 07:03:12 -07:00
committed by Scott Lamb
parent caac324bd5
commit 58152e8d94
35 changed files with 4089 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
ui-src/index.html
View File

@@ -1,79 +0,0 @@
<!DOCTYPE html>
<!-- vim: set et: -->
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
<style type="text/css">
#nav {
float: left;
width: 17em;
}
#nav .ui-datepicker { width: 100%; }
#videos {
margin-left: 18em;
}
#videos tbody:after {
content: '';
display: block;
height: 3ex;
}
tbody .name {
background-color: #eee;
}
tr.r:hover { background-color: #ddd; }
tr.r th, tr.r td { padding: 0.5ex 1.5em; text-align: right; }
.ui-dialog .ui-dialog-content {
overflow: visible; /* remove stupid scroll bars when resizing. */
padding: 0;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="nav">
<form action="#">
<fieldset id="cameras">
<legend>Cameras</legend>
</fieldset>
<fieldset id="datetime">
<legend>Datetime range</legend>
<div id="start-date"></div>
<input id="start-time" name="start-time" type="text" title="Starting
time within the day. Blank for the beginning of the day. Otherwise
HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second.
Timezone is normally left out; it's useful once a year during the
ambiguous times of the &quot;fall back&quot; hour."><br>
<input type="radio" name="end-date-type" id="end-date-same" checked>
<label for="end-date-same">to same day</label><br>
<input type="radio" name="end-date-type" id="end-date-other">
<label for="end-date-other">to other day</label>
<div id="end-date"></div>
<input id="end-time" name="end-time" type="text" title="Ending
time within the day. Blank for the end of the day. Otherwise
HH:mm[:ss[:FFFFF]][+-HH:mm], where F is 90,000ths of a second.
Timezone is normally left out; it's useful once a year during the
ambiguous times of the &quot;fall back&quot; hour."><br>
</fieldset>
<label for="split">Max video length</label>
<select name="split" id="split">
<option value="324000000">1 hour</option>
<option value="1296000000">4 hours</option>
<option value="7776000000">24 hours</option>
<option value="">infinite</option>
</select><br>
<input type="checkbox" checked id="trim" name="trim">
<label for="trim">Trim segment start/end</label><br>
<input type="checkbox" checked id="ts" name="ts">
<label for="ts">Timestamp track</label>
</form>
</div>
<table id="videos"></table>
</body>
</html>