MyFavMirrors
/
moonfire-nvr
mirror of https://github.com/scottlamb/moonfire-nvr.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix incorrect Javascript private variable style 

It's supposed to be a trailing underscore, not a leading underscore, as
described here:

https://google.github.io/styleguide/jsguide.html#naming-method-names
https://google.github.io/styleguide/jsguide.html#naming-non-constant-field-names

and discussed in an earlier PR:

https://github.com/scottlamb/moonfire-nvr/pull/48#discussion_r175678736

I fixed these mechanically:

rg -l0 'this[.]_' | xargs -0 perl -pi -e 's/this[.]_(\w+)/this.$1_/g'
rg -l0 '\s_\w+\(' | xargs -0 perl -pi -e 's/_(\w+)\(/$1_(/g'
This commit is contained in:
Scott Lamb 2020-03-14 15:20:18 -07:00
parent 038aebe0fd
commit 9d6dec2565
13 changed files with 223 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui-src/lib/MoonfireAPI.js
View File

@ -59,7 +59,7 @@ export default class MoonfireAPI {
url.hostname = host;
url.port = port;
console.log('API: ' + url.origin + url.pathname);
this._builder = new URLBuilder(url.origin + url.pathname, relativeUrls);
this.builder_ = new URLBuilder(url.origin + url.pathname, relativeUrls);
}
/**
@ -70,7 +70,7 @@ export default class MoonfireAPI {
* @return {String} Constructed url
*/
nvrUrl(days = true) {
return this._builder.makeUrl('', {days: days});
return this.builder_.makeUrl('', {days: days});
}
/**
@ -92,7 +92,7 @@ export default class MoonfireAPI {
if (split90k != Infinity) {
query.split90k = split90k;
}
return this._builder.makeUrl(
return this.builder_.makeUrl(
'cameras/' + cameraUUID + '/' + streamType + '/recordings',
query
);
@ -135,7 +135,7 @@ export default class MoonfireAPI {
s: sParam,
ts: timestampTrack,
});
return this._builder.makeUrl('cameras/' + cameraUUID + '/' + streamType +
return this.builder_.makeUrl('cameras/' + cameraUUID + '/' + streamType +
'/view.mp4', {
s: sParam,
ts: timestampTrack,
@ -167,7 +167,7 @@ export default class MoonfireAPI {
* @return {Request}
*/
login(username, password) {
return $.ajax(this._builder.makeUrl('login'), {
return $.ajax(this.builder_.makeUrl('login'), {
data: JSON.stringify({
username: username,
password: password,
@ -185,7 +185,7 @@ export default class MoonfireAPI {
* @return {Request}
*/
logout(csrf) {
return $.ajax(this._builder.makeUrl('logout'), {
return $.ajax(this.builder_.makeUrl('logout'), {
data: JSON.stringify({
csrf: csrf,
}),

26
ui-src/lib/models/CalendarTSRange.js
View File

@ -53,11 +53,11 @@ export default class CalendarTSRange {
* @param {String} timeZone Desired timezone, e.g. 'America/Los_Angeles'
*/
constructor(timeZone) {
this._start = {dateStr: null, timeStr: '', ts90k: null};
this._end = {dateStr: null, timeStr: '', ts90k: null};
this.start_ = {dateStr: null, timeStr: '', ts90k: null};
this.end_ = {dateStr: null, timeStr: '', ts90k: null};
// Don't need to keep timezone, but need parser and formatter
this._timeFormatter = new TimeStamp90kFormatter(timeZone);
this._timeParser = new Time90kParser(timeZone);
this.timeFormatter_ = new TimeStamp90kFormatter(timeZone);
this.timeParser_ = new Time90kParser(timeZone);
}
/**
@ -93,7 +93,7 @@ export default class CalendarTSRange {
* @return {object} Object containing dateStr, timeStr, and ts90k components
*/
get start() {
return this._start;
return this.start_;
}
/**
@ -102,7 +102,7 @@ export default class CalendarTSRange {
* @return {object} Object containing dateStr, timeStr, and ts90k components
*/
get end() {
return this._end;
return this.end_;
}
/**
@ -165,8 +165,8 @@ export default class CalendarTSRange {
* not present in the range.
* @return {Number} New timestamp if succesfully parsed, null otherwise
*/
_setRangeTime(range, dateStr, timeStr, dateOnlyThenEndOfDay) {
const newTs90k = this._timeParser.parseDateTime90k(
setRangeTime_(range, dateStr, timeStr, dateOnlyThenEndOfDay) {
const newTs90k = this.timeParser_.parseDateTime90k(
dateStr,
timeStr,
dateOnlyThenEndOfDay
@ -189,7 +189,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise
*/
setStartDate(dateStr) {
return this._setRangeTime(this._start, dateStr, this._start.timeStr, false);
return this.setRangeTime_(this.start_, dateStr, this.start_.timeStr, false);
}
/**
@ -201,7 +201,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise
*/
setStartTime(timeStr) {
return this._setRangeTime(this._start, this._start.dateStr, timeStr, false);
return this.setRangeTime_(this.start_, this.start_.dateStr, timeStr, false);
}
/**
@ -213,7 +213,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise
*/
setEndDate(dateStr) {
return this._setRangeTime(this._end, dateStr, this._end.timeStr, true);
return this.setRangeTime_(this.end_, dateStr, this.end_.timeStr, true);
}
/**
@ -225,7 +225,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise
*/
setEndTime(timeStr) {
return this._setRangeTime(this._end, this._end.dateStr, timeStr, true);
return this.setRangeTime_(this.end_, this.end_.dateStr, timeStr, true);
}
/**
@ -236,6 +236,6 @@ export default class CalendarTSRange {
* @return {String} Formatted string
*/
formatTimeStamp90k(ts90k) {
return this._timeFormatter.formatTimeStamp90k(ts90k);
return this.timeFormatter_.formatTimeStamp90k(ts90k);
}
}

10
ui-src/lib/support/RecordingFormatter.js
View File

@ -59,8 +59,8 @@ export default class RecordingFormatter {
* @param {String} tz Timezone
*/
constructor(formatStr, tz) {
this._timeFormatter = new TimeFormatter(formatStr, tz);
this._singleDateStr = null;
this.timeFormatter_ = new TimeFormatter(formatStr, tz);
this.singleDateStr_ = null;
}
/**
@ -69,7 +69,7 @@ export default class RecordingFormatter {
* @param {String} formatStr Time format string
*/
set timeFormat(formatStr) {
this._timeFormatter = new TimeFormatter(formatStr, this._timeFormatter.tz);
this.timeFormatter_ = new TimeFormatter(formatStr, this.timeFormatter_.tz);
}
/**
@ -85,8 +85,8 @@ export default class RecordingFormatter {
const duration = recording.duration;
const trimmedRange = recording.range90k(trimRange);
return {
start: this._timeFormatter.formatTimeStamp90k(trimmedRange.startTime90k),
end: this._timeFormatter.formatTimeStamp90k(trimmedRange.endTime90k),
start: this.timeFormatter_.formatTimeStamp90k(trimmedRange.startTime90k),
end: this.timeFormatter_.formatTimeStamp90k(trimmedRange.endTime90k),
resolution:
recording.videoSampleEntryWidth +
'x' +

12
ui-src/lib/support/TimeFormatter.js
View File

@ -57,8 +57,8 @@ export default class TimeFormatter {
* @param {String} tz Timezone, e.g. "America/Los_Angeles"
*/
constructor(formatStr, tz) {
this._formatStr = formatStr || defaultTimeFormat;
this._tz = tz;
this.formatStr_ = formatStr || defaultTimeFormat;
this.tz_ = tz;
}
/**
@ -67,7 +67,7 @@ export default class TimeFormatter {
* @return {String} Format specification string
*/
get formatStr() {
return this._formatStr;
return this.formatStr_;
}
/**
@ -76,7 +76,7 @@ export default class TimeFormatter {
* @return {String} Timezone
*/
get tz() {
return this._tz;
return this.tz_;
}
/**
@ -103,7 +103,7 @@ export default class TimeFormatter {
* @return {String} Formatted timestamp
*/
formatTimeStamp90k(ts90k) {
let format = this._formatStr;
let format = this.formatStr_;
const ms = ts90k / 90.0;
const fracFmt = 'FFFFF';
const fracLoc = format.indexOf(fracFmt);
@ -114,6 +114,6 @@ export default class TimeFormatter {
String(100000 + frac).substr(1) +
format.substr(fracLoc + fracFmt.length);
}
return moment.tz(ms, this._tz).format(format);
return moment.tz(ms, this.tz_).format(format);
}
}

6
ui-src/lib/support/TimeStamp90kFormatter.js
View File

@ -46,7 +46,7 @@ export default class TimeStamp90kFormatter {
* @param {String} tz Timezone
*/
constructor(tz) {
this._formatter = new TimeFormatter(internalTimeFormat, tz);
this.formatter_ = new TimeFormatter(internalTimeFormat, tz);
}
/**
@ -56,7 +56,7 @@ export default class TimeStamp90kFormatter {
* @return {String} Formatted timestamp
*/
formatTimeStamp90k(ts90k) {
return this._formatter.formatTimeStamp90k(ts90k);
return this.formatter_.formatTimeStamp90k(ts90k);
}
/**
@ -70,7 +70,7 @@ export default class TimeStamp90kFormatter {
formatSameDayShortened(ts1, ts2) {
let ts1Formatted = this.formatTimeStamp90k(ts1);
let ts2Formatted = this.formatTimeStamp90k(ts2);
const timePos = this._formatter.formatStr.indexOf('T');
const timePos = this.formatter_.formatStr.indexOf('T');
if (timePos != -1) {
const datePortion = ts1Formatted.substr(0, timePos);
ts1Formatted = datePortion + ' ' + ts1Formatted.substr(timePos + 1);

12
ui-src/lib/support/URLBuilder.js
View File

@ -44,8 +44,8 @@ export default class URLBuilder {
* @param {Boolean} relative True if relative urls desired
*/
constructor(base, relative = true) {
this._baseUrl = base;
this._relative = relative;
this.baseUrl_ = base;
this.relative_ = relative;
}
/**
@ -58,7 +58,7 @@ export default class URLBuilder {
* @param {Object} query Object with parameter name/value pairs
* @return {URL} URL where query params have been added
*/
_addQuery(url, query = {}) {
addQuery_(url, query = {}) {
Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v));
return url;
}
@ -74,8 +74,8 @@ export default class URLBuilder {
* @return {String} Formatted url, relative if so configured
*/
makeUrl(path, query = {}) {
const url = new URL(path || '', this._baseUrl);
this._addQuery(url, query);
return this._relative ? url.pathname + url.search : url.href;
const url = new URL(path || '', this.baseUrl_);
this.addQuery_(url, query);
return this.relative_ ? url.pathname + url.search : url.href;
}
}

126
ui-src/lib/views/CalendarView.js
View File

@ -105,12 +105,12 @@ export default class CalendarView {
} = {}) {
// Lookup all by id, check and remember
[
this._fromPickerView,
this._toPickerView,
this._sameDayElement,
this._otherDayElement,
this._startTimeElement,
this._endTimeElement,
this.fromPickerView_,
this.toPickerView_,
this.sameDayElement_,
this.otherDayElement_,
this.startTimeElement_,
this.endTimeElement_,
] = [
fromPickerId,
toPickerId,
@ -125,20 +125,20 @@ export default class CalendarView {
}
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._streamViews = null;
this._rangeChangedHandler = null;
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.streamViews_ = null;
this.rangeChangedHandler_ = null;
}
/**
@ -147,31 +147,31 @@ export default class CalendarView {
* @param {String} tz New timezone
*/
set tz(tz) {
this._timeParser.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;
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) {
const dateStr = date.toISOString().substr(0, 10);
return [dateSet.has(dateStr), '', ''];
};
if (this._sameDay) {
if (this.sameDay_) {
fromPickerView.option({
dateFormat: DatePickerView.datepicker.ISO_8601,
minDate: minDateStr,
maxDate: maxDateStr,
onSelect: (dateStr /* , picker */) =>
this._updateRangeDates(dateStr, dateStr),
this.updateRangeDates_(dateStr, dateStr),
beforeShowDay: beforeShowDay,
disabled: false,
});
@ -183,7 +183,7 @@ export default class CalendarView {
minDate: minDateStr,
onSelect: (dateStr /* , picker */) => {
toPickerView.minDate = this.fromDateISO;
this._updateRangeDates(dateStr, this.toDateISO);
this.updateRangeDates_(dateStr, this.toDateISO);
},
beforeShowDay: beforeShowDay,
disabled: false,
@ -194,7 +194,7 @@ export default class CalendarView {
maxDate: maxDateStr,
onSelect: (dateStr /* , picker */) => {
fromPickerView.maxDate = this.toDateISO;
this._updateRangeDates(this.fromDateISO, dateStr);
this.updateRangeDates_(this.fromDateISO, dateStr);
},
beforeShowDay: beforeShowDay,
disabled: false,
@ -207,9 +207,9 @@ export default class CalendarView {
/**
* Call an installed handler (if any) to inform that range has changed.
*/
_informRangeChange() {
if (this._rangeChangedHandler !== null) {
this._rangeChangedHandler(this._selectedRange);
informRangeChange_() {
if (this.rangeChangedHandler_ !== null) {
this.rangeChangedHandler_(this.selectedRange_);
}
}
@ -222,10 +222,10 @@ export default class CalendarView {
* @param {event} event DOM event that triggered us
* @param {Boolean} isEnd True if this is for end time
*/
_pickerTimeChanged(event, isEnd) {
pickerTimeChanged_(event, isEnd) {
const pickerElement = event.currentTarget;
const newTimeStr = pickerElement.value;
const selectedRange = this._selectedRange;
const selectedRange = this.selectedRange_;
const parsedTS = isEnd ?
selectedRange.setEndTime(newTimeStr) :
selectedRange.setStartTime(newTimeStr);
@ -240,10 +240,10 @@ export default class CalendarView {
' time changed to: ' +
parsedTS +
' (' +
this._timeFormatter.formatTimeStamp90k(parsedTS) +
this.timeFormatter_.formatTimeStamp90k(parsedTS) +
')'
);
this._informRangeChange();
this.informRangeChange_();
}
/**
@ -253,9 +253,9 @@ export default class CalendarView {
*
* @param {Boolean} isSameDay True if the same day radio button was activated
*/
_pickerSameDayChanged(isSameDay) {
pickerSameDayChanged_(isSameDay) {
// Prevent change if not real change (can happen on initial setup)
if (this._sameDay != isSameDay) {
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.
@ -264,11 +264,11 @@ export default class CalendarView {
const endDate = isSameDay ?
this.selectedRange.start.dateStr :
this.selectedRange.end.dateStr;
this._updateRangeDates(this.selectedRange.start.dateStr, endDate);
this._sameDay = isSameDay;
this.updateRangeDates_(this.selectedRange.start.dateStr, endDate);
this.sameDay_ = isSameDay;
// Switch between single day and multi-day
this._configureDatePickers();
this.configureDatePickers_();
}
}
@ -281,8 +281,8 @@ export default class CalendarView {
* @param {String} startDateStr New starting date
* @param {String} endDateStr New ending date
*/
_updateRangeDates(startDateStr, endDateStr) {
const newRange = this._selectedRange;
updateRangeDates_(startDateStr, endDateStr) {
const newRange = this.selectedRange_;
const originalStart = Object.assign({}, newRange.start);
const originalEnd = Object.assign({}, newRange.end);
newRange.setStartDate(startDateStr);
@ -300,7 +300,7 @@ export default class CalendarView {
!isSameRange(newRange.end, originalEnd)
) {
console.log('New range: ' + startDateStr + ' - ' + endDateStr);
this._informRangeChange();
this.informRangeChange_();
}
}
@ -309,18 +309,18 @@ export default class CalendarView {
* time input boxes as both need to result in an update of the calendar
* view.
*/
_wireControls() {
wireControls_() {
// If same day status changed, update the view
this._sameDayElement.change(() => this._pickerSameDayChanged(true));
this._otherDayElement.change(() => this._pickerSameDayChanged(false));
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.pickerTimeChanged_(e, isEnd);
};
this._startTimeElement.change((e) => handler(e, false));
this._endTimeElement.change((e) => handler(e, true));
this.startTimeElement_.change((e) => handler(e, false));
this.endTimeElement_.change((e) => handler(e, true));
}
/**
@ -332,18 +332,18 @@ export default class CalendarView {
* @param {Iterable} streamViews Collection of camera views
*/
initializeWith(streamViews) {
this._streamViews = streamViews;
[this._availableDates, this._minDateStr, this._maxDateStr] = minMaxDates(
this.streamViews_ = streamViews;
[this.availableDates_, this.minDateStr_, this.maxDateStr_] = minMaxDates(
streamViews
);
this._configureDatePickers();
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();
this.updateRangeDates_(date, date);
this.wireControls_();
}
}
@ -357,7 +357,7 @@ export default class CalendarView {
* @param {Function} handler Function that will be called
*/
set onRangeChange(handler) {
this._rangeChangedHandler = handler;
this.rangeChangedHandler_ = handler;
}
/**
@ -366,7 +366,7 @@ export default class CalendarView {
* @return {Date} Date value of the "to"date picker
*/
get toDate() {
return this._toPickerView.date;
return this.toPickerView_.date;
}
/**
@ -375,7 +375,7 @@ export default class CalendarView {
* @return {Date} Date value of the "from"date picker
*/
get fromDate() {
return this._fromPickerView.date;
return this.fromPickerView_.date;
}
/**
@ -385,7 +385,7 @@ export default class CalendarView {
* @return {String} Date value (YYYY-MM-D) of the "to" date picker
*/
get toDateISO() {
return this._toPickerView.dateISO;
return this.toPickerView_.dateISO;
}
/**
@ -395,7 +395,7 @@ export default class CalendarView {
* @return {String} Date value (YYYY-MM-D) of the "from" date picker
*/
get fromDateISO() {
return this._fromPickerView.dateISO;
return this.fromPickerView_.dateISO;
}
/**
@ -404,6 +404,6 @@ export default class CalendarView {
* @return {CalendarTSRange} Range object
*/
get selectedRange() {
return this._selectedRange;
return this.selectedRange_;
}
}

50
ui-src/lib/views/DatePickerView.js
View File

@ -60,7 +60,7 @@ export default class DatePickerView {
* @param {Object} options Options to pass to datepicker
*/
constructor(parent, options = null) {
this._pickerElement = $(parent);
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
@ -68,7 +68,7 @@ export default class DatePickerView {
* So, unless some are passed in here explicitly, we create a default
* and disabled date picker.
*/
this._initWithOptions(options);
this.initWithOptions_(options);
}
/**
@ -80,15 +80,15 @@ export default class DatePickerView {
*
* @param {Object} options Options for datepicker, or null to just enable
*/
_initWithOptions(options = null) {
this._alive = true;
initWithOptions_(options = null) {
this.alive_ = true;
options =
options !== null ?
options :
{
disabled: true,
};
this._pickerElement.datepicker(options);
this.pickerElement_.datepicker(options);
}
/**
@ -102,26 +102,26 @@ export default class DatePickerView {
*
* @return {Any} Function result
*/
_apply(...args) {
if (!this._alive) {
apply_(...args) {
if (!this.alive_) {
console.warn('datepicker not constructed yet [%s]', this.domId);
}
return this._pickerElement.datepicker(...args);
return this.pickerElement_.datepicker(...args);
}
/**
* Activate the datepicker if not already attached.
*
* Basically calls _initWithOptions({disabled: disabled}), but only if not
* 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) {
if (this.alive_) {
this.disabled = disabled;
} else {
this._initWithOptions({
this.initWithOptions_({
disabled: disabled,
});
}
@ -133,7 +133,7 @@ export default class DatePickerView {
* @return {jQuery} jQuery element
*/
get element() {
return this._pickerElement;
return this.pickerElement_;
}
/**
@ -153,10 +153,10 @@ export default class DatePickerView {
* 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);
if (!this.alive_ && args.length === 0 && typeof arg0 === 'object') {
return this.initWithOptions_(arg0);
}
return this._apply('option', arg0, ...args);
return this.apply_('option', arg0, ...args);
}
/**
@ -176,7 +176,7 @@ export default class DatePickerView {
* @return {Boolean}
*/
get isDisabled() {
return this._apply('isDisabled');
return this.apply_('isDisabled');
}
/**
@ -194,7 +194,7 @@ export default class DatePickerView {
* @return {Date} Selected date
*/
get date() {
return this._apply('getDate');
return this.apply_('getDate');
}
/**
@ -203,7 +203,7 @@ export default class DatePickerView {
* @param {String|Date} date Desired date as string or Date
*/
set date(date) {
this._apply('setDate', date);
this.apply_('setDate', date);
}
/**
@ -262,28 +262,28 @@ export default class DatePickerView {
* @param {varargs} dialogArgs Variable argument list
*/
dialog(...dialogArgs) {
this._apply('option', dialogArgs);
this.apply_('option', dialogArgs);
}
/**
* Make the picker visible.
*/
show() {
this._apply('show');
this.apply_('show');
}
/**
* Hide the picker.
*/
hide() {
this._apply('hide');
this.apply_('hide');
}
/**
* Refresh the picker.
*/
refresh() {
this._apply('refresh');
this.apply_('refresh');
}
/**
@ -293,8 +293,8 @@ export default class DatePickerView {
* Sets the status in this object to !alive.
*/
destroy() {
this._alive = true;
this._apply('destroy');
this._alive = false;
this.alive_ = true;
this.apply_('destroy');
this.alive_ = false;
}
}

80
ui-src/lib/views/NVRSettingsView.js
View File

@ -50,16 +50,16 @@ export default class NVRSettingsView {
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();
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_();
}
/**
@ -70,7 +70,7 @@ export default class NVRSettingsView {
* @param {jQuery} selectEl jQuery element for the <select>
* @return {String} Value of the selected/first option
*/
_findSelectedOrFirst(selectEl) {
findSelectedOrFirst_(selectEl) {
let value = selectEl.find(':selected').val();
if (!value) {
value = selectEl.find('option:first-child').val();
@ -82,42 +82,42 @@ export default class NVRSettingsView {
* Wire up all controls and handlers.
*
*/
_wireControls() {
const videoLengthEl = $(`#${this._ids.videoLenId}`);
this._videoLength = this._findSelectedOrFirst(videoLengthEl);
wireControls_() {
const videoLengthEl = $(`#${this.ids_.videoLenId}`);
this.videoLength_ = this.findSelectedOrFirst_(videoLengthEl);
videoLengthEl.change((e) => {
const newValueStr = e.currentTarget.value;
this._videoLength =
this.videoLength_ =
newValueStr == 'infinite' ? Infinity : Number(newValueStr);
if (this._videoLengthHandler) {
this._videoLengthHandler(this._videoLength);
if (this.videoLengthHandler_) {
this.videoLengthHandler_(this.videoLength_);
}
});
const trimEl = $(`#${this._ids.trimCheckId}`);
this._trim = trimEl.is(':checked');
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);
this.trim_ = e.currentTarget.checked;
if (this.trimHandler_) {
this.trimHandler_(this.trim_);
}
});
const timeFmtEl = $(`#${this._ids.timeFmtId}`);
this._timeFmtStr = this._findSelectedOrFirst(timeFmtEl);
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);
this.timeFmtStr_ = e.target.value;
if (this.timeFmtHandler_) {
this.timeFmtHandler_(this.timeFmtStr_);
}
});
const trackEl = $(`#${this._ids.tsTrackId}`);
this._tsTrack = trackEl.is(':checked');
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);
this.tsTrack_ = e.target.checked;
if (this.tsTrackHandler_) {
this.tsTrackHandler_(this.tsTrack_);
}
});
}
@ -128,7 +128,7 @@ export default class NVRSettingsView {
* @return {Number} Video length value
*/
get videoLength() {
return this._videoLength;
return this.videoLength_;
}
/**
@ -137,7 +137,7 @@ export default class NVRSettingsView {
* @return {String} Format string
*/
get timeFormatString() {
return this._timeFmtStr;
return this.timeFmtStr_;
}
/**
@ -146,7 +146,7 @@ export default class NVRSettingsView {
* @return {Boolean}
*/
get trim() {
return this._trim;
return this.trim_;
}
/**
@ -155,7 +155,7 @@ export default class NVRSettingsView {
* @return {Boolean}
*/
get timeStampTrack() {
return this._tsTrack;
return this.tsTrack_;
}
/**
@ -166,7 +166,7 @@ export default class NVRSettingsView {
* @param {Function} handler Format change handler
*/
set onTimeFormatChange(handler) {
this._timeFmtHandler = handler;
this.timeFmtHandler_ = handler;
}
/**
@ -177,7 +177,7 @@ export default class NVRSettingsView {
* @param {Function} handler Video Length change handler
*/
set onVideoLengthChange(handler) {
this._videoLengthHandler = handler;
this.videoLengthHandler_ = handler;
}
/**
@ -188,7 +188,7 @@ export default class NVRSettingsView {
* @param {Function} handler Trim change handler
*/
set onTrimChange(handler) {
this._trimHandler = handler;
this.trimHandler_ = handler;
}
/**
@ -200,6 +200,6 @@ export default class NVRSettingsView {
* @param {Function} handler Timestamp track change handler
*/
set onTimeStampTrackChange(handler) {
this._tsTrackHandler = handler;
this.tsTrackHandler_ = handler;
}
}

74
ui-src/lib/views/RecordingsView.js
View File

@ -80,20 +80,20 @@ export default class RecordingsView {
*/
constructor(camera, streamType, recordingFormatter, trimmed = false,
parent = null) {
this._cameraName = camera.shortName;
this._cameraRange = camera.range90k;
this._formatter = recordingFormatter;
this.cameraName_ = camera.shortName;
this.cameraRange_ = camera.range90k;
this.formatter_ = recordingFormatter;
const id = `tab-${camera.uuid}-${streamType}`;
this._element = this._createElement(id, camera.shortName, streamType);
this._trimmed = trimmed;
this._recordings = null;
this._recordingsRange = null;
this._clickHandler = null;
this.element_ = this.createElement_(id, camera.shortName, streamType);
this.trimmed_ = trimmed;
this.recordings_ = null;
this.recordingsRange_ = null;
this.clickHandler_ = null;
if (parent) {
parent.append(this._element);
parent.append(this.element_);
}
this._timeoutId = null;
this.timeoutId_ = null;
}
/**
@ -104,7 +104,7 @@ export default class RecordingsView {
* @param {String} streamType "main" or "sub"
* @return {jQuery} Partial DOM as jQuery object
*/
_createElement(id, cameraName, streamType) {
createElement_(id, cameraName, streamType) {
const tab = $('<tbody>').attr('id', id);
tab.append(
$('<tr class="name">').append($('<th colspan=6/>')
@ -130,11 +130,11 @@ export default class RecordingsView {
* @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);
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((i, e) => $(e).text(values[_columnOrder[i]]));
@ -151,7 +151,7 @@ export default class RecordingsView {
* @return {Range90k} Currently remembered range
*/
get recordingsRange() {
return this._recordingsRange ? this._recordingsRange.clone() : null;
return this.recordingsRange_ ? this.recordingsRange_.clone() : null;
}
/**
@ -160,7 +160,7 @@ export default class RecordingsView {
* @param {Range90k} range90k Range to remember
*/
set recordingsRange(range90k) {
this._recordingsRange = range90k ? range90k.clone() : null;
this.recordingsRange_ = range90k ? range90k.clone() : null;
}
/**
@ -169,7 +169,7 @@ export default class RecordingsView {
* @return {Boolean}
*/
get trimmed() {
return this._trimmed;
return this.trimmed_;
}
/**
@ -178,9 +178,9 @@ export default class RecordingsView {
* @param {Boolean} value True if trimming desired
*/
set trimmed(value) {
if (value != this._trimmed) {
this._trimmed = value;
this._updateRecordings();
if (value != this.trimmed_) {
this.trimmed_ = value;
this.updateRecordings_();
}
}
@ -190,7 +190,7 @@ export default class RecordingsView {
* @param {Boolean} show True for show, false for hide
*/
set show(show) {
const sel = this._element;
const sel = this.element_;
if (show) {
sel.show();
} else {
@ -204,13 +204,13 @@ export default class RecordingsView {
* @param {Boolean} show True if indicator should be showing
*/
set showLoading(show) {
const loading = $('tr.loading', this._element);
const loading = $('tr.loading', this.element_);
if (show) {
loading.show();
} else {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
this._timeoutId = null;
if (this.timeoutId_) {
clearTimeout(this.timeoutId_);
this.timeoutId_ = null;
}
loading.hide();
}
@ -223,7 +223,7 @@ export default class RecordingsView {
* @param {Number} timeOutMs Delay (in ms) before indicator should appear
*/
delayedShowLoading(timeOutMs) {
this._timeoutId = setTimeout(() => (this.showLoading = true), timeOutMs);
this.timeoutId_ = setTimeout(() => (this.showLoading = true), timeOutMs);
}
/**
@ -236,8 +236,8 @@ export default class RecordingsView {
*/
set timeFormat(formatStr) {
// Change the formatter and update recordings (view)
this._formatter.timeFormat = formatStr;
this._updateRecordings();
this.formatter_.timeFormat = formatStr;
this.updateRecordings_();
}
/**
@ -248,7 +248,7 @@ export default class RecordingsView {
* @param {Function} h Handler to be called.
*/
set onRecordingClicked(h) {
this._clickHandler = h;
this.clickHandler_ = h;
}
/**
@ -261,27 +261,27 @@ export default class RecordingsView {
set recordingsJSON(recordingsJSON) {
this.showLoading = false;
// Store as model objects
this._recordings = recordingsJSON.recordings.map(function(r) {
this.recordings_ = recordingsJSON.recordings.map(function(r) {
const vse = recordingsJSON.videoSampleEntries[r.videoSampleEntryId];
return new Recording(r, vse);
});
const tbody = this._element;
const tbody = this.element_;
// Remove existing rows, replace with new ones
$('tr.r', tbody).remove();
this._recordings.forEach((r) => {
this.recordings_.forEach((r) => {
const row = $('<tr class="r" />');
row.append(_columnOrder.map(() => $('<td/>')));
row.on('click', () => {
console.log('Video clicked');
if (this._clickHandler !== null) {
if (this.clickHandler_ !== null) {
console.log('Video clicked handler call');
this._clickHandler(r);
this.clickHandler_(r);
}
});
tbody.append(row);
});
// Cause formatting and date to be put in the rows
this._updateRecordings();
this.updateRecordings_();
}
}

12
ui-src/lib/views/StreamSelectorView.js
View File

@ -49,7 +49,7 @@ export default class StreamSelectorView {
* @param {jQuery} parent jQuery parent element to append to
*/
constructor(cameras, parent) {
this._cameras = cameras;
this.cameras_ = cameras;
if (cameras.length !== 0) {
// Add a header row.
@ -60,7 +60,7 @@ export default class StreamSelectorView {
parent.append(hdr);
}
this._cameras.forEach((c) => {
this.cameras_.forEach((c) => {
const row = $('<tr/>').append($('<td>').text(c.camera.shortName));
let firstStreamType = true;
for (const streamType of allStreamTypes) {
@ -81,8 +81,8 @@ export default class StreamSelectorView {
cb.change((e) => {
streamView.enabled = e.target.checked;
if (this._onChangeHandler) {
this._onChangeHandler();
if (this.onChangeHandler_) {
this.onChangeHandler_();
}
});
row.append($('<td/>').append(cb));
@ -91,11 +91,11 @@ export default class StreamSelectorView {
parent.append(row);
});
this._onChangeHandler = null;
this.onChangeHandler_ = null;
}
/** @param {function()} handler a handler to run after toggling a stream */
set onChange(handler) {
this._onChangeHandler = handler;
this.onChangeHandler_ = handler;
}
}

6
ui-src/lib/views/StreamView.js
View File

@ -60,7 +60,7 @@ export default class StreamView {
trimmed,
recordingsParent
);
this._enabled = true;
this.enabled_ = true;
this.recordingsUrl = null;
this.recordingsReq = null;
}
@ -71,7 +71,7 @@ export default class StreamView {
* @return {Boolean}
*/
get enabled() {
return this._enabled;
return this.enabled_;
}
/**
@ -80,7 +80,7 @@ export default class StreamView {
* @param {Boolean} enabled Whether view should be enabled
*/
set enabled(enabled) {
this._enabled = enabled;
this.enabled_ = enabled;
this.recordingsView.show = enabled;
console.log('Stream %s-%s %s', this.camera.shortName, this.streamType,
this.enabled ? 'enabled' : 'disabled');

20
ui-src/lib/views/VideoDialogView.js
View File

@ -63,11 +63,11 @@ export default class VideoDialogView {
* @return {VideoDialogView} Returns "this" for chaining.
*/
attach(domElement) {
this._videoElement = $('<video controls preload="auto" autoplay="true" />');
this._dialogElement = $('<div class="playdialog" />').append(
this._videoElement
this.videoElement_ = $('<video controls preload="auto" autoplay="true" />');
this.dialogElement_ = $('<div class="playdialog" />').append(
this.videoElement_
);
$(domElement).append(this._dialogElement);
$(domElement).append(this.dialogElement_);
return this;
}
@ -80,21 +80,21 @@ export default class VideoDialogView {
* @return {VideoDialogView} Returns "this" for chaining.
*/
play(title, width, url) {
this._dialogElement.dialog({
this.dialogElement_.dialog({
title: title,
width: width,
close: () => {
const videoDOMElement = this._videoElement[0];
const videoDOMElement = this.videoElement_[0];
videoDOMElement.pause();
videoDOMElement.src = ''; // Remove current source to stop loading
this._videoElement = null;
this._dialogElement.remove();
this._dialogElement = null;
this.videoElement_ = null;
this.dialogElement_.remove();
this.dialogElement_ = null;
},
});
// Now that dialog is up, set the src so video starts
console.log('Video url: ' + url);
this._videoElement.attr('src', url);
this.videoElement_.attr('src', url);
return this;
}
}