MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-11-20 01:50:24 -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

418
ui-src/lib/views/CalendarView.js Normal file
View File

@@ -0,0 +1,418 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
import 'jquery-ui/themes/base/button.css';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/datepicker.css';
import 'jquery-ui/themes/base/dialog.css';
import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/tooltip.css';
import 'jquery-ui/ui/widgets/datepicker';
import 'jquery-ui/ui/widgets/dialog';
import 'jquery-ui/ui/widgets/tooltip';
import DatePickerView from './DatePickerView';
import CalendarTSRange from '../models/CalendarTSRange';
import {TimeStamp90kFormatter} from '../support/TimeFormatter';
import Time90kParser from '../support/Time90kParser';
/**
* Find the earliest and latest dates from an array of CameraView
* objects.
*
* Each camera view has a "days" property, whose keys identify days with
* recordings. All such dates are collected and then scanned to find earliest
* and latest dates.
*
* "days" for camera views that are not enabled are ignored.
*
* @param {[Iterable]} cameraViews Camera views to look into
* @return {[Set, String, String]} Array with set of all dates, and
* earliest and latest dates
*/
function minMaxDates(cameraViews) {
/*
* Produce a set with all dates, across all enabled cameras, that
* have at least one recording available (allDates).
*/
const allDates = new Set(
[].concat(
...cameraViews
.filter((v) => v.enabled)
.map((v) => Array.from(v.camera.days.keys()))
)
);
return [
allDates,
...Array.from(allDates.values()).reduce((acc, dateStr) => {
acc[0] = !acc[0] || dateStr < acc[0] ? dateStr : acc[0];
acc[1] = !acc[1] || dateStr > acc[1] ? dateStr : acc[1];
return acc;
}, []),
];
}
/**
* Class to represent a calendar view.
*
* The view consists of:
* - Two date pickers (from and to)
* - A time input box with each date picker (from time, to time)
* - A set of radio buttons to select between same day or not
*
*/
export default class CalendarView {
/**
* Construct the view with UI elements IDs specified.
*
* @param {String} options.fromPickerId Id for from datepicker
* @param {String} options.toPickerId Id for to datepicker
* @param {String} options.isSameDayId Id for same day radio button
* @param {String} options.isOtherDayId Id for other day radio button
* @param {String} options.fromPickerTimeId Id for from time field
* @param {String} options.toPickerTimeId Id for to time field
* @param {[type]} options.timeZone Timezone
*/
constructor({
fromPickerId = 'start-date',
toPickerId = 'end-date',
isSameDayId = 'end-date-same',
isOtherDayId = 'end-date-other',
fromPickerTimeId = 'start-time',
toPickerTimeId = 'end-time',
timeZone = null,
} = {}) {
// Lookup all by id, check and remember
[
this._fromPickerView,
this._toPickerView,
this._sameDayElement,
this._otherDayElement,
this._startTimeElement,
this._endTimeElement,
] = [
fromPickerId,
toPickerId,
isSameDayId,
isOtherDayId,
fromPickerTimeId,
toPickerTimeId,
].map((id) => {
const el = $(`#${id}`);
if (el.length == 0) {
console.log('Warning: Calendar element with id "' + id + '" not found');
}
return el;
});
this._fromPickerView = new DatePickerView(this._fromPickerView);
this._toPickerView = new DatePickerView(this._toPickerView);
this._timeFormatter = new TimeStamp90kFormatter(timeZone);
this._timeParser = new Time90kParser(timeZone);
this._selectedRange = new CalendarTSRange(timeZone);
this._sameDay = true; // Start in single day view
this._sameDayElement.prop('checked', this._sameDay);
this._otherDayElement.prop('checked', !this._sameDay);
this._availableDates = null;
this._minDateStr = null;
this._maxDateStr = null;
this._singleDateStr = null;
this._cameraViews = null;
this._rangeChangedHandler = null;
}
/**
* Change timezone.
*
* @param {String} tz New timezone
*/
set tz(tz) {
this._timeParser.tz = tz;
}
/**
* (Re)configure the datepickers and other calendar range inputs to reflect
* available dates.
*/
_configureDatePickers() {
const dateSet = this._availableDates;
const minDateStr = this._minDateStr;
const maxDateStr = this._maxDateStr;
const fromPickerView = this._fromPickerView;
const toPickerView = this._toPickerView;
const beforeShowDay = function(date) {
let dateStr = date.toISOString().substr(0, 10);
return [dateSet.has(dateStr), '', ''];
};
if (this._sameDay) {
fromPickerView.option({
dateFormat: $.datepicker.ISO_8601,
minDate: minDateStr,
maxDate: maxDateStr,
onSelect: (dateStr, picker) => this._updateRangeDates(dateStr, dateStr),
beforeShowDay: beforeShowDay,
disabled: false,
});
toPickerView.destroy();
toPickerView.activate(); // Default state, but alive
} else {
fromPickerView.option({
dateFormat: $.datepicker.ISO_8601,
minDate: minDateStr,
onSelect: (dateStr, picker) => {
toPickerView.option('minDate', this.fromDateISO);
this._updateRangeDates(dateStr, this.toDateISO);
},
beforeShowDay: beforeShowDay,
disabled: false,
});
toPickerView.option({
dateFormat: $.datepicker.ISO_8601,
minDate: fromPickerView.dateISO,
maxDate: maxDateStr,
onSelect: (dateStr, picker) => {
fromPickerView.option('maxDate', this.toDateISO);
this._updateRangeDates(this.fromDateISO, dateStr);
},
beforeShowDay: beforeShowDay,
disabled: false,
});
toPickerView.date = fromPickerView.date;
fromPickerView.maxDate = toPickerView.date;
}
}
/**
* Call an installed handler (if any) to inform that range has changed.
*/
_informRangeChange() {
if (this._rangeChangedHandler !== null) {
this._rangeChangedHandler(this._selectedRange);
}
}
/**
* Handle a change in the time input of either from or to.
*
* The change requires updating the selected range and then informing
* any listeners that the range has changed (so they can update data).
*
* @param {Object} event Time Event on DOM that triggered calling this
* @param {Boolean} isEnd True if this is for end time
*/
_pickerTimeChanged(event, isEnd) {
const pickerElement = event.currentTarget;
const newTimeStr = pickerElement.value;
const selectedRange = this._selectedRange;
const parsedTS = isEnd
? selectedRange.setEndTime(newTimeStr)
: selectedRange.setStartTime(newTimeStr);
if (parsedTS === null) {
console.log('bad time change');
$(pickerElement).addClass('ui-state-error');
return;
}
$(pickerElement).removeClass('ui-state-error');
console.log(
(isEnd ? 'End' : 'Start') +
' time changed to: ' +
parsedTS +
' (' +
this._timeFormatter.formatTimeStamp90k(parsedTS) +
')'
);
this._informRangeChange();
}
/**
* Handle a change in the calendar's same/other day settings.
*
* The change means the selected range changes.
*
* @param {Boolean} isSameDay True if the same day radio button was activated
*/
_pickerSameDayChanged(isSameDay) {
// Prevent change if not real change (can happen on initial setup)
if (this._sameDay != isSameDay) {
/**
* This is called when the status of the same/other day radio buttons
* changes. We need to determine a new selected range and activiate it.
* Doing so will then also inform the change listener.
*/
const endDate = isSameDay
? this.selectedRange.start.dateStr
: this.selectedRange.end.dateStr;
this._updateRangeDates(this.selectedRange.start.dateStr, endDate);
this._sameDay = isSameDay;
// Switch between single day and multi-day
this._configureDatePickers();
}
}
/**
* Reflect a change in start and end date in the calendar view.
*
* The selected range is update, the view is reconfigured as necessary and
* any listeners are informed.
*
* @param {String} startDateStr New starting date
* @param {String} endDateStr New ending date
*/
_updateRangeDates(startDateStr, endDateStr) {
const newRange = this._selectedRange;
const originalStart = Object.assign({}, newRange.start);
const originalEnd = Object.assign({}, newRange.end);
newRange.setStartDate(startDateStr);
newRange.setEndDate(endDateStr);
const isSameRange = (a, b) => {
return (
a.dateStr == b.dateStr && a.timeStr == b.timeStr && a.ts90k == b.ts90k
);
};
// Do nothing if effectively no change
if (
!isSameRange(newRange.start, originalStart) ||
!isSameRange(newRange.end, originalEnd)
) {
console.log('New range: ' + startDateStr + ' - ' + endDateStr);
this._informRangeChange();
}
}
/**
* Install event handlers for same/other day radio buttons and the
* time input boxes as both need to result in an update of the calendar
* view.
*/
_wireControls() {
// If same day status changed, update the view
this._sameDayElement.change(() => this._pickerSameDayChanged(true));
this._otherDayElement.change(() => this._pickerSameDayChanged(false));
// Handle changing of a time input (either from or to)
const handler = (e, isEnd) => {
console.log('Time changed for: ' + (isEnd ? 'end' : 'start'));
this._pickerTimeChanged(e, isEnd);
};
this._startTimeElement.change((e) => handler(e, false));
this._endTimeElement.change((e) => handler(e, true));
}
/**
* (Re)Initialize the calendar based on a collection of camera views.
*
* This is necessary as the camera views ultimately define the limits on
* the date pickers.
*
* @param {Iterable} cameraViews Collection of camera views
*/
initializeWith(cameraViews) {
this._cameraViews = cameraViews;
[this._availableDates, this._minDateStr, this._maxDateStr] = minMaxDates(
cameraViews
);
this._configureDatePickers();
// Initialize the selected range to the from picker's date
// if we do not have a selected range yet
if (!this.selectedRange.hasStart()) {
const date = this.fromDateISO;
this._updateRangeDates(date, date);
this._wireControls();
}
}
/**
* Set a handler to be called when the calendar selection range changes.
*
* The handler will be called with one argument, an object of type
* CalendarTSRange reflecting the current calendar range. It will be called
* whenever that range changes.
*
* @param {Function} handler Function that will be called
*/
set onRangeChange(handler) {
this._rangeChangedHandler = handler;
}
/**
* Get the "to" selected date as Date object.
*
* @return {Date} Date value of the "to"date picker
*/
get toDate() {
return this._toPickerView.date;
}
/**
* Get the "from" selected date as Date object.
*
* @return {Date} Date value of the "from"date picker
*/
get fromDate() {
return this._fromPickerView.date;
}
/**
* Get the "to" selected date as the date component of an ISO-8601
* formatted string.
*
* @return {String} Date value (YYYY-MM-D) of the "to" date picker
*/
get toDateISO() {
return this._toPickerView.dateISO;
}
/**
* Get the "from" selected date as the date component of an ISO-8601
* formatted string.
*
* @return {String} Date value (YYYY-MM-D) of the "from" date picker
*/
get fromDateISO() {
return this._fromPickerView.dateISO;
}
/**
* Get the currently selected range in the calendar view.
*
* @return {CalendarTSRange} Range object
*/
get selectedRange() {
return this._selectedRange;
}
}

174
ui-src/lib/views/CameraView.js Normal file
View File

@@ -0,0 +1,174 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import RecordingsView from './RecordingsView';
/**
* Class handling a camer view.
*
* A camera view consists of a list of available recording segments for
* playback.
*/
export default class CameraView {
/**
* Construct the view.
*
* @param {Camera} cameraModel Model object for camera
* @param {[type]} recordingFormatter Formatter to be used by recordings
* @param {[type]} trimmed True if rec. ranges should be trimmed
* @param {[type]} recordingsParent Parent element to attach to or null)
*/
constructor(
cameraModel,
recordingFormatter,
trimmed,
recordingsParent = null
) {
this.camera = cameraModel;
this.recordingsView = new RecordingsView(
this.camera,
recordingFormatter,
trimmed,
recordingsParent
);
this._enabled = true;
this.recordingsUrl = null;
this.recordingsReq = null;
}
/**
* Get whether the view is enabled or not.
*
* @return {Boolean}
*/
get enabled() {
return this._enabled;
}
/**
* Change enabled state of the view.
*
* @param {Boolean} enabled Whether view should be enabled
*/
set enabled(enabled) {
this._enabled = enabled;
this.recordingsView.show = enabled;
console.log(
'Camera ',
this.camera.shortName,
this.enabled ? 'enabled' : 'disabled'
);
}
/**
* Get the currently remembered recordings range for this camera.
*
* This is just passed on to the recordings view.
*
* @return {Range90k} Currently remembered range
*/
get recordingsRange() {
return this.recordingsView.recordingsRange;
}
/**
* Set the recordings range for this view.
*
* This is just passed on to the recordings view.
*
* @param {Range90k} range90k Range to remember
*/
set recordingsRange(range90k) {
this.recordingsView.recordingsRange = range90k;
}
/**
* Set whether loading indicator should be shown or not.
*
* This indicator is really on the recordings list.
*
* @param {Boolean} show True if indicator should be showing
*/
set showLoading(show) {
this.recordingsView.showLoading = show;
}
/**
* Show the loading indicated after a delay, unless the timer has been
* cleared already.
*
* @param {Number} timeOutMs Delay (in ms) before indicator should appear
*/
delayedShowLoading(timeOutMs) {
this.recordingsView.delayedShowLoading(timeOutMs);
}
/**
* Set new recordings from JSON data.
*
* @param {Object} dataJSON JSON data (array)
*/
set recordingsJSON(dataJSON) {
this.recordingsView.recordingsJSON = dataJSON;
}
/**
* Set a new time format string for the recordings list.
*
* @param {String} formatStr Formatting string
*/
set timeFormat(formatStr) {
this.recordingsView.timeFormat = formatStr;
}
/**
* Set the trimming option of the cameraview as desired.
*
* This is really just passed on to the recordings view.
*
* @param {Boolean} enabled True if trimming should be enabled
*/
set trimmed(enabled) {
this.recordingsView.trimmed = enabled;
}
/**
* Set a handler for clicks on a recording.
*
* The handler will be called with one argument, the recording model.
*
* @param {Function} h Handler function
*/
set onRecordingClicked(h) {
this.recordingsView.onRecordingClicked = h;
}
}

113
ui-src/lib/views/CheckboxGroupView.js Normal file
View File

@@ -0,0 +1,113 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
/**
* Class to handle a group of (related) checkboxes.
*
* Each checkbox is managed through a simple object containing properties:
* - id: {String} Id (some unique value within the group)
* - selector: {String} jQuery compatible selector to find the dom element
* - checked: {Boolean} Value for checkbox
* - jq: {jQuery} jQuery element for the checkbox, or null if not found
*
* A handler can be called if a checbox changes value.
*/
export default class CheckboxGroupView {
/**
* Construct the seteup for the checkboxes.
*
* The passed group array should contain individual maps describing each
* checkbox. THe maps should contain:
* - id
* - selector: optional. If not provided #id will be used
* - checked: Initial value for checkbox, default true
* - text: Text for the checkbox label (not generated if empty)
*
* @param {Array} group Array of maps, one for each checkbox
* @param {jQuery} parent jQuery parent element to append to
*/
constructor(group = [], parent = null) {
this._group = group.slice(); // Copy
this._group.forEach((element) => {
// If parent specified, create and append
if (parent) {
let cb = `<input type="checkbox" id="${element.id}" name="${
element.id
}">`;
if (element.text) {
cb += `<label for="${element.id}">${element.text}</label>`;
}
parent.append($(cb + '<br/>'));
}
const jq = $(element.selector || `#${element.id}`);
element.jq = jq;
if (jq !== null) {
jq.prop('checked', element.checked || true);
jq.change((e) => {
if (this._checkChangeHandler) {
element.checked = e.target.checked;
this._checkChangeHandler(element);
}
});
}
});
this._checkChangeHandler = null;
}
/**
* Get the checkbox object for the specified checkbox.
*
* The checkbox is looked up by the specified id or selector, which must
* match what was specified during construction.
*
* @param {String} idOrSelector Identifying string
* @return {Object} Object for checkbox, or null if not found
*/
checkBox(idOrSelector) {
return this._group.find(
(el) => el.id === idOrSelector || el.selector === idOrSelector
);
}
/**
* Set a handler for checkbox changes.
*
* Handler will be called with same result as would be found by checkBox().
*
* @param {Function} handler function (checbox)
*/
set onCheckChange(handler) {
this._checkChangeHandler = handler;
}
}

283
ui-src/lib/views/DatePickerView.js Normal file
View File

@@ -0,0 +1,283 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
/**
* Class to encapsulate datepicker UI widget from jQuery.
*/
export default class DatePickerView {
/**
* Construct wapper an attach to a specified parent DOM node.
*
* @param {Node} parent Note to serve for attachign datepicker
* @param {Object} options Options to pass to datepicker
*/
constructor(parent, options = null) {
this._pickerElement = $(parent);
/*
* The widget is somewhat peculiar in that its functionality does
* not exist until it has been called with a settings/options argument
* as the only parameter to the datepicker() function.
* So, unless some are passed in here explicitly, we create a default
* and disabled date picker.
*/
this._initWithOptions(options);
}
/**
* Initialize the date picker with a set of options.
*
* Attach the datepicker function to its parent and set the specified options.
* If the options are not specified a minimum set of options just enabling the
* datepicker with defaults is used.
*
* @param {Object} options Options for datepicker, or null to just enable
*/
_initWithOptions(options = null) {
this._alive = true;
options =
options !== null
? options
: {
disabled: true,
};
this._pickerElement.datepicker(options);
}
/**
* Execute a specified datepicker function, passing the arguments.
*
* This function exists to catch the cases where functions are called when
* the picker is not attached (alive).
*
* The first argument to this function should be the name of the desired
* datepicker function, followed by the correct arguments for that function.
*
* @return {Any} Function result
*/
_apply() {
if (!this._alive) {
console.log('WARN: datepicker not constructed yet [' + this.domId + ']');
}
return this._pickerElement.datepicker(...arguments);
}
/**
* Activate the datepicker if not already attached.
*
* Basically calls _initWithOptions({disabled: disabled}), but only if not
* already attached. Otherwise just sets the disabled status.
*
* @param {Boolean} disabled True if datepicker needs to be disabled
*/
activate(disabled = true) {
if (this._alive) {
this.disabled = disabled;
} else {
this._initWithOptions({
disabled: disabled,
});
}
}
/**
* Get the element the datepicker is attached to.
*
* @return {jQuery} jQuery element
*/
get element() {
return this._pickerElement;
}
/**
* Set option or options to the datepicker, like the 'option' call with
* various arguments.
*
* Special case is when the datepicker is not (yet) attached. In that case
* we need to initialze the datepicker with the options instead.
*
* @param {object} arg0 First parameter or undefined if not given
* @param {array} args Rest of the parameters (might be empty)
* @return {object} Result of the 'option' call.
*/
option(arg0, ...args) {
/*
* Special case the scenario of calling option setting with just a map of
* settings, when the picker is not alive. That really should translate
* to a constructor call to the datepicker.
*/
if (!this._alive && args.length === 0 && typeof arg0 === 'object') {
return this._initWithOptions(arg0);
}
return this._apply('option', arg0, ...args);
}
/**
* Return current set of options.
*
* This is special cased here vs. documentation. We need to ask for 'all'.
*
* @return {Object} Datepicker options
*/
options() {
return this.option('all');
}
/**
* Determine whether datepicker is disabled.
*
* @return {Boolean}
*/
get isDisabled() {
return this._apply('isDisabled');
}
/**
* Set disabled status of picker.
*
* @param {Boolean} disabled True to disable
*/
set disabled(disabled) {
this.option('disabled', disabled);
}
/**
* Get picker's currently selected date.
*
* @return {Date} Selected date
*/
get date() {
return this._apply('getDate');
}
/**
* Set the datepicker to a specific date.
*
* @param {String|Date} date Desired date as string or Date
*/
set date(date) {
this._apply('setDate', date);
}
/**
* Get the picker's current date in ISO format.
*
* This will return just the date portion of the ISO-8601 format, or in other
* words: YYYY-MM-DD
*
* @return {String} Date portion of ISO-8601 formatted selected date
*/
get dateISO() {
return this.date.toISOString().substr(0, 10);
}
/**
* Get currently set minimum date.
*
* @return {Date} Minimum date
*/
get minDate() {
return this.option('minDate');
}
/**
* Set a new minimum date.
*
* @param {String|Date} value Desired minimum date
*/
set minDate(value) {
this.option('minDate', value);
}
/**
* Get currently set maximum date.
*
* @return {Date} Maximum date
*/
get maxDate() {
return this.option('maxDate');
}
/**
* Set a new maximum date.
*
* @param {String|Date} value Desired maximum date
*/
set maxDate(value) {
this.option('maxDate', value);
}
/**
* Set the picker to open up in a dialog.
*
* This takes a variable number of arguments, like the native dialog function.
*
* @param {varargs} dialogArgs Variable argument list
*/
dialog(...dialogArgs) {
this._apply('option', dialogArgs);
}
/**
* Make the picker visible.
*/
show() {
this._apply('show');
}
/**
* Hide the picker.
*/
hide() {
this._apply('hide');
}
/**
* Refresh the picker.
*/
refresh() {
this._apply('refresh');
}
/**
* Destroy the picker.
*
* Destroy means detach it from its element and dispose of everything.
* Sets the status in this object to !alive.
*/
destroy() {
this._alive = true;
this._apply('destroy');
this._alive = false;
}
}

205
ui-src/lib/views/NVRSettingsView.js Normal file
View File

@@ -0,0 +1,205 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
/**
* Class to control the view of NVR Settings.
*
* These settings/controls include:
* - Max video length
* - Trim segment start/end
* - Time Format
*/
export default class NVRSettingsView {
/**
* Construct based on element ids
*/
constructor({
videoLenId = 'split',
trimCheckId = 'trim',
tsTrackId = 'ts',
timeFmtId = 'timefmt',
} = {}) {
this._ids = {videoLenId, trimCheckId, tsTrackId, timeFmtId};
this._videoLength = null;
this._videoLengthHandler = null;
this._trim = null;
this._trimHandler = null;
this._timeFmtStr = null;
this._timeFmtHandler = null;
this._tsTrack = null;
this._tsTrackHandler = null;
this._wireControls();
}
/**
* Find selected option in <select> and return value, or first option's value.
*
* The first option's value is returned if no option is selected.
*
* @param {jQuery} selectEl jQuery element for the <select>
* @return {String} Value of the selected/first option
*/
_findSelectedOrFirst(selectEl) {
let value = selectEl.find(':selected').val();
if (!value) {
value = selectEl.find('option:first-child').val();
}
return value;
}
/**
* Wire up all controls and handlers.
*
*/
_wireControls() {
const videoLengthEl = $(`#${this._ids.videoLenId}`);
this._videoLength = this._findSelectedOrFirst(videoLengthEl);
videoLengthEl.change((e) => {
const newValueStr = e.currentTarget.value;
this._videoLength =
newValueStr == 'infinite' ? Infinity : Number(newValueStr);
if (this._videoLengthHandler) {
this._videoLengthHandler(this._videoLength);
}
});
const trimEl = $(`#${this._ids.trimCheckId}`);
this._trim = trimEl.is(':checked');
trimEl.change((e) => {
this._trim = e.currentTarget.checked;
if (this._trimHandler) {
this._trimHandler(this._trim);
}
});
const timeFmtEl = $(`#${this._ids.timeFmtId}`);
this._timeFmtStr = this._findSelectedOrFirst(timeFmtEl);
timeFmtEl.change((e) => {
this._timeFmtStr = e.target.value;
if (this._timeFmtHandler) {
this._timeFmtHandler(this._timeFmtStr);
}
});
const trackEl = $(`#${this._ids.tsTrackId}`);
this._tsTrack = trackEl.is(':checked');
trackEl.change((e) => {
this._tsTrack = e.target.checked;
if (this._tsTrackHandler) {
this._tsTrackHandler(this._tsTrack);
}
});
}
/**
* Get currently selected video length.
*
* @return {Number} Video length value
*/
get videoLength() {
return this._videoLength;
}
/**
* Get currently selected time format string.
*
* @return {String} Format string
*/
get timeFormatString() {
return this._timeFmtStr;
}
/**
* Get currently selected trim setting.
*
* @return {Boolean}
*/
get trim() {
return this._trim;
}
/**
* Determine value of timestamp tracking option
*
* @return {Boolean}
*/
get timeStampTrack() {
return this._tsTrack;
}
/**
* Set a handler to be called when the time format string changes.
*
* The handler will be called with one argument: the new format string.
*
* @param {Function} handler Format change handler
*/
set onTimeFormatChange(handler) {
this._timeFmtHandler = handler;
}
/**
* Set a handler to be called when video length popup changes.
*
* The handler will be called with one argument: the new video length.
*
* @param {Function} handler Video Length change handler
*/
set onVideoLengthChange(handler) {
this._videoLengthHandler = handler;
}
/**
* Set a handler to be called when video trim checkbox changes.
*
* The handler will be called with one argument: the new trim value (Boolean).
*
* @param {Function} handler Trim change handler
*/
set onTrimChange(handler) {
this._trimHandler = handler;
}
/**
* Set a handler to be called when video timestamp tracking checkbox changes.
*
* The handler will be called with one argument: the new tsTrack value
* (Boolean).
*
* @param {Function} handler Timestamp track change handler
*/
set onTimeStampTrackChange(handler) {
this._tsTrackHandler = handler;
}
}

283
ui-src/lib/views/RecordingsView.js Normal file
View File

@@ -0,0 +1,283 @@
// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera digital video recorder.
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
import Recording from '../models/Recording';
/**
* Desired column order in recordings table.
*
* The column names must correspond to the propertu names in the JSON
* representation of recordings.
*
* @todo This should be decoupled!
*
* @type {Array} Array of column names
*/
const _columnOrder = [
'start',
'end',
'resolution',
'frameRate',
'size',
'rate',
];
/**
* Labels for columns.
*/
const _columnLabels = {
start: 'Start',
end: 'End',
resolution: 'Resolution',
frameRate: 'FPS',
size: 'Storage',
rate: 'BitRate',
};
/**
* Class to encapsulate a view of a list of recordings from a single camera.
*/
export default class RecordingsView {
/**
* Construct display from camera data and use supplied formatter.
*
* @param {Camera} camera camera object (immutable)
* @param {RecordingFormatter} recordingFormatter Desired formatter
* @param {Boolean} trimmed True if the display should include trimmed ranges
* @param {jQuery} parent Parent to which new DOM is attached, or null
*/
constructor(camera, recordingFormatter, trimmed = false, parent = null) {
this._cameraName = camera.shortName;
this._cameraRange = camera.range90k;
this._formatter = recordingFormatter;
this._element = $(`tab-${camera.uuid}`); // Might not be there initially
if (this._element.length == 0) {
this._element = this._createElement(camera.uuid, camera.shortName);
}
this._trimmed = trimmed;
this._recordings = null;
this._recordingsRange = null;
this._clickHandler = null;
if (parent) {
parent.append(this._element);
}
this._timeoutId = null;
}
/**
* Create DOM for the recording.
*
* @param {String} id DOM id for the main element
* @param {String} cameraName Name of the corresponding camera
* @return {jQuery} Partial DOM as jQuery object
*/
_createElement(id, cameraName) {
const tab = $('<tbody>').attr('id', id);
tab.append(
$('<tr class="name">').append($('<th colspan=6/>').text(cameraName)),
$('<tr class="hdr">').append(
$(
_columnOrder
.map((name) => '<th>' + _columnLabels[name] + '</th>')
.join('')
)
),
$('</tr>'),
$('<tr class="loading"><td colspan=6>loading...</td></tr>').hide()
);
return tab;
}
/**
* Update display for new recording values.
*
* Each existing row is reformatted.
*
* @param {Array} newRecordings
* @param {Boolean} trimmed True if timestamps should be trimmed
*/
_updateRecordings() {
const trimRange = this._trimmed ? this.recordingsRange : null;
const recordings = this._recordings;
this._element.children('tr.r').each((rowIndex, row) => {
const values = this._formatter.format(recordings[rowIndex], trimRange);
$(row)
.children('td')
.each((index, element) => $(element).text(values[_columnOrder[index]]));
});
}
/**
* Get the currently remembered recordings range for this view.
*
* This range corresponds to what was in the data time range selector UI
* at the time the data for this view was selected. The value is remembered
* purely for trimming purposes.
*
* @return {Range90k} Currently remembered range
*/
get recordingsRange() {
return this._recordingsRange ? this._recordingsRange.clone() : null;
}
/**
* Set the recordings range for this view.
*
* @param {Range90k} range90k Range to remember
*/
set recordingsRange(range90k) {
this._recordingsRange = range90k ? range90k.clone() : null;
}
/**
* Get whether time ranges in the recording list are being trimmed.
*
* @return {Boolean}
*/
get trimmed() {
return this._trimmed;
}
/**
* Set whether recording time ranges should be trimmed.
*
* @param {Boolean} value True if trimming desired
*/
set trimmed(value) {
if (value != this._trimmed) {
this._trimmed = value;
this._updateRecordings();
}
}
/**
* Show or hide the display in the DOM.
*
* @param {Boolean} show True for show, false for hide
*/
set show(show) {
const sel = this._element;
if (show) {
sel.show();
} else {
sel.hide();
}
}
/**
* Set whether loading indicator should be shown or not.
*
* @param {Boolean} show True if indicator should be showing
*/
set showLoading(show) {
const loading = $('tr.loading', this._element);
if (show) {
loading.show();
} else {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
this._timeoutId = null;
}
loading.hide();
}
}
/**
* Show the loading indicated after a delay, unless the timer has been
* cleared already.
*
* @param {Number} timeOutMs Delay (in ms) before indicator should appear
*/
delayedShowLoading(timeOutMs) {
this._timeoutId = setTimeout(() => (this.showLoading = true), timeOutMs);
}
/**
* Set a new time format string.
*
* This string is passed on to the formatter and the recordings list
* is updated (using the formatter).
*
* @param {String} formatStr Formatting string
*/
set timeFormat(formatStr) {
// Change the formatter and update recordings (view)
this._formatter.timeFormat = formatStr;
this._updateRecordings();
}
/**
* Set a handler to receive clicks on a recording.
*
* The handler will be called with one argument: a recording model.
*
* @param {Function} h Handler to be called.
*/
set onRecordingClicked(h) {
this._clickHandler = h;
}
/**
* Set the list of recordings from JSON data.
*
* The data is expected to be an array with recording objects.
*
* @param {String} recordingsJSON JSON data (array)
*/
set recordingsJSON(recordingsJSON) {
this.showLoading = false;
// Store as model objects
this._recordings = recordingsJSON.map(function(r) {
return new Recording(r);
});
const tbody = this._element;
// Remove existing rows, replace with new ones
$('tr.r', tbody).remove();
this._recordings.forEach((r) => {
let row = $('<tr class="r" />');
row.append(_columnOrder.map((k) => $('<td/>')));
row.on('click', (e) => {
console.log('Video clicked');
if (this._clickHandler !== null) {
console.log('Video clicked handler call');
this._clickHandler(r);
}
});
tbody.append(row);
});
// Cause formatting and date to be put in the rows
this._updateRecordings();
}
}