// vim: set et sw=2 ts=2: // // This file is part of Moonfire NVR, a security camera network video recorder. // Copyright (C) 2018 The Moonfire NVR Authors // // 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 . import $ from 'jquery'; const allStreamTypes = ['main', 'sub']; /** * View for selecting the enabled streams. * * This displays a table with a camera per row and stream type per column. * It propagates the enabled status on to the stream view. It also calls * the optional onChange handler on any change. */ export default class StreamSelectorView { /** * @param {Array} cameras An element for each camera with * - camera: a {Camera} * - streamViews: a map of stream type to {StreamView} * @param {jQuery} parent jQuery parent element to append to */ constructor(cameras, parent) { this.cameras_ = cameras; if (cameras.length !== 0) { // Add a header row. const hdr = $('').append($('')); for (const streamType of allStreamTypes) { hdr.append($('').text(streamType)); } parent.append(hdr); } this.cameras_.forEach((c) => { const row = $('').append($('').text(c.camera.shortName)); let firstStreamType = true; for (const streamType of allStreamTypes) { const streamView = c.streamViews[streamType]; if (streamView === undefined) { row.append(''); } else { const id = 'cam-' + c.camera.uuid + '-' + streamType; const cb = $('') .attr('name', id) .attr('id', id); // Only the first stream type for each camera should be checked // initially. cb.prop('checked', firstStreamType); streamView.enabled = firstStreamType; firstStreamType = false; cb.change((e) => { streamView.enabled = e.target.checked; if (this.onChangeHandler_) { this.onChangeHandler_(); } }); row.append($('').append(cb)); } } parent.append(row); }); this.onChangeHandler_ = null; } /** @param {function()} handler a handler to run after toggling a stream */ set onChange(handler) { this.onChangeHandler_ = handler; } }