<!DOCTYPE html> <html class="base-html" lang="en"> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2CMYRYYFKT"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-2CMYRYYFKT'); </script> <title></title> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="apple-itunes-app" content="" /> <meta name="google-play-app" content="" /> <link rel="shortcut icon" id="favicon-link" href=""> <link rel="stylesheet" href="css/bootstrap.min_1582427b.css" /> <link rel="stylesheet" href="css/bootstrap-responsive.min_02ca8cb3.css" /> <link rel="stylesheet" href="css/bootstrap-formhelpers_4f4c6a6d.css" /> <link rel="stylesheet" href="_css/vendor/bootstrap-datepicker_c00195ac.css" /> <link rel="stylesheet" href="_css/vendor/bootstrap-timepicker_d4643724.css" /> <link rel="stylesheet" href="css/font-awesome.min_ea8d6bd5.css" /> <link rel="stylesheet" href="_css/vendor/jquery-ui_3718f004.css" /> <link rel="stylesheet" href="_css/bootstrap-modal_8d63668e.css" /> <link rel="stylesheet" href="_css/vendor/imgareaselect/imgareaselect-default_95f9edf6.css" /> <link rel="stylesheet" href="_css/vendor/jquery.tagsinput_e4e15402.css" /> <link rel="stylesheet" href="_css/vendor/jQRangeSlider/classic-min_80bae634.css" /> <link rel="stylesheet" href="_css/vendor/jquery.fixedheadertable_5c7d4657.css" /> <link rel="stylesheet" href="_css/vendor/jquery.timepicker_78142e36.css" /> <link rel="stylesheet" href="_css/vendor/chosen/chosen.min_d7ca5ca9.css" /> <link rel="stylesheet" href="css/eagle.base_28a2f6e7.css" /> <link rel="stylesheet" href="css/eagle.custom_1ca80e2e.css" /> <link rel="stylesheet" href="_css/layout_style_096b515f.css" /> <link rel="stylesheet" href="_css/style_62c3cd0c.css" /> <link rel="stylesheet" href="_css/fa_icons_33da5a81.css" /> <link rel="stylesheet" href="_css/fonts_763d6b56.css"> <link rel="stylesheet" href="css/build/een_style_b5d82bd4.css"> <link rel="stylesheet" href="static/notification/notifications.css" type="text/css" /> <link rel="stylesheet" id="override-css-link" href=""> <link rel="stylesheet" href="node_modules/smart-app-banner/dist/smart-app-banner.css" type="text/css" media="screen" /> <link rel="stylesheet" href="node_modules/fastselect/dist/fastselect.css" type="text/css" /> <style> #preloader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999; background: url('../_images/spinning.gif') no-repeat center; background-size: 45px; } </style> </head> <body> <div class="container site-container site-wrapper" style="display: none"> <div id="sidebar"> <h1 id="site-name" class="logo"><a id="wrapper-small-logo" href="#" title=""></a></h1> <div id="superTagsFilter"></div> <menu id="dashboard-tools" class="sidebar"> <ul> <li><a href="#"><i class="icon icon-dashboard active"></i> <span class="translator-preload">Dashboard</span></a> </li> <li><a href="#"><i class="icon icon-th-large"></i> <span class="translator-preload">Layouts</span></a> </li> <li><a href="#"><i class="icon icon-facetime-video"></i> <span class="translator-preload">Cameras</span></a> </li> </ul> </menu> </div> <div class="container-fluid site-content" id="main-content"> <header id="dashboard-info" class="row"> <div class="pull-left btn-group layout-menu" id="een-layout-actions"> <a class="dropdown-toggle btn btn-info pull-left" data-toggle="dropdown" id="layout-manager-name"> <span class="icon-caret-down"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#" class="layout_new">New Layout</a> </li> <li><a href="#" class="layout_edit">Edit</a> </li> <li><a href="#" class="layout_add" id="shine">Add Cameras</a> </li> <li><a href="#" class="layout_settings">Settings</a> </li> <li><a href="#" class="layout_delete">Delete</a> </li>  <li><a href="#" class="layout_all_on">Cameras On</a> </li>  <li><a href="#" class="layout_all_off">Cameras Off</a> </li> <li class="dropdown-submenu"> <a tabindex="-1" href="#" class="layout_smart_options">Smart Layouts</a> <ul class="dropdown-menu layout_smart_options_dropdown">          <li> <label class="smart_layouts_options_item_label"> <input class="smart_layouts_options_item" data-event-type="motion" type="checkbox">Motion</label> </li> <li> <label class="smart_layouts_options_item_label"> <input class="smart_layouts_options_item" data-event-type="person" type="checkbox">Person</label> </li> <li> <label class="smart_layouts_options_item_label"> <input class="smart_layouts_options_item" data-event-type="vehicle" type="checkbox">Vehicle</label> </li> </ul> </li> </ul> </div> <div class="pull-left btn-group" id="CameraMap__map_actions"> <a class="dropdown-toggle btn btn-info pull-left" data-toggle="dropdown"><span class="translator-preload">Map</span> <span class="icon-caret-down"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#" id="CameraMap__map_edit"><span class="translator-preload">Edit</span></a> </li> </ul> </div> <div class="rightbuttons pull-left"> <div id="new-interface-wrapper" class="pull-left hidden"> <button class="btn btn-info" id="btn__open-new-interface">Enhanced Interface (beta)</button> </div> <div id="responder-wrapper"> <img class='hidden' id='active-responder-img' src='_images/first_responder.png'> <p id='responder-tooltip' class="tooltip-text">Activated Responder Share</p> </div> <nav id='header-navigation-btns' class="btn-toolbar dark"> <div class="btn-group"> <a href="#" class="btn dropdown-toggle" data-toggle="dropdown" id="username_display"><i class="icon-user"></i>  <div style="display: inline;"></div>   <div style="display:inline;" class="icon-caret-down"></div></a> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#" id="userSettings">My Profile</a> </li> <li><a href="#" id="accountSettings">Account Settings</a> </li> <li style="display:none"><a href="#" id="accountPlugins">Plugin Settings</a> </li>  <li class="hide"><a href="#" id="businessPortal">Business Portal</a> </li> <li><a style="display:none;" href="#" id="goToRecordingPage">Go To Recording Page</a> </li> <li><a href="#" id="activateResponderCams">Activate Responder Share</a> </li> <li style="display:none"><a href="#" id="switchToMaster">Back to Reseller Account</a> </li> <li class="edition-info--holder hidden"> <a> Edition <span id="edition-info--span" class="badge badge-secondary">-</span> </a> </li> <li><a href="#/logout" id="logout">Log Out</a> </li> </ul> </div> <div class="btn-group" id="notifications"> <a class="btn dropdown-toggle disabled" data-toggle="dropdown"><i class="icon-flag"></i><span class="notification-count">0</span></a> <ul class="dropdown-menu pull-right"> <li class="notification-template"><a href="#"><img src=""/><span class="notification-title">Camera</span><span class="notification-time">2m</span><span class="notification-description"><span>Motion</span></span><i class="icon-circle green notification-icon"></i><span class="notification-more"></span></a> </li> </ul> </div> <div class="btn" id="timeclock"></div> <div class="btn" id="een-fullscreen"> <i class="icon-resize-full"></i> </div>  </nav> </div> </header> <section class="content primary-content"> <div id="global-message"></div> <div id="content"></div> </section> </div> <div id="footer"> <div class="footer_logo_small"> <dl class="dl-horizontal" id="login_support" style="display:none"> <dt>Support:</dt> <dd></dd> </dl> <div id="copyright" class="copyright-mention">Copyright © <div id="copy_year">2015</div>, <div id="copy_brand"></div>. <br/>All rights reserved.</div> </div> </div> <div id="inactive_session_modal" style="display:none; position: absolute; z-index: 9999; left: 45%; top: 25%; width: 280px; height: 119px; background-color: whitesmoke;border: 1px darkgray solid;border-radius: 6px; padding: 15px;"> <p id="inactive_session_modal__count">Your session will expire in 30 seconds...</p> <button class="btn btn-success" style="position:absolute; left: 150px; top: 100px;" id="inactive_session_modal__close">Continue Session</button> </div> </div>  <div id="preloader"></div>  <script src="/_js/dictionaries_492c72a6.js"></script>  <div class="modal hide fade" data-backdrop="static" keyboard="false" id="ractive-modal"></div>  <div class="modal hide fade" data-backdrop="static" keyboard="false" id="ractive-location-modal"></div>  <div id="accountSettingsModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Account Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs accountSettingsTab"> <li id="acMainLabel" class="ac_advanced ac_on_off"> <a href="#acMain" data-toggle="tab" data-testid="modal-account-tab-label-control">Control</a> </li> <li id="acDaysLabel" class="ac_advanced"> <a href="#acDays" data-toggle="tab" data-testid="modal-account-tab-label-days">Days</a> </li>  <li class="ac_advanced"> <a href="#acClients" data-toggle="tab" data-testid="modal-account-tab-label-security">Security</a> </li> <li id="acCamerasLabel" class="ac_advanced"> <a href="#acCamera" data-toggle="tab" data-testid="modal-account-tab-label-camera">Camera</a> </li> <li class="ac_advanced"> <a href="#acAlerts" data-toggle="tab" data-testid="modal-account-tab-label-alerts">Alerts</a> </li> <li class="ac_advanced"> <a href="#acNotifications" data-toggle="tab" data-testid="modal-account-tab-label-notifications">Notifications</a> </li> <li class="ac_advanced ac_master_video"> <a href="#acMasterVideo" data-toggle="tab" data-testid="modal-account-tab-label-privacy">Privacy</a> </li> <li id="acSharingLabel" class="ac_sharing"> <a href="#acSharing" data-toggle="tab" data-testid="modal-account-tab-label-sharing">Sharing</a> </li> <li> <a href="#acResponders" class="ac_sharing" data-toggle="tab" data-testid="modal-account-tab-label-responders">Responders</a> </li> <li> <a href="#acDefaults" class="ac_advanced" data-toggle="tab" data-testid="modal-account-tab-label-defaults">Defaults</a> </li> <li> <a href="#acEdition" class="ac_edition" data-toggle="tab" data-testid="modal-account-tab-label-edition">Edition</a> </li> </ul> <div class="tab-content" id="accountSettingsTabContent"></div> </div> <div class="modal-footer"> <p class="red" id="accountSettings_msg"></p> <button class="btn btn-warning" data-dismiss="modal" data-testid="modal-account-button-cancel">Cancel</button> <button class="btn btn-success" id="accountSettings__save" data-testid="modal-account-button-save">Save changes</button> </div> </div>   <div id="addAPIKeyModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Add Application</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span11 offset1"> <form class="form-horizontal"> <div class="row"> <p class="help-block">Application Name</p> <input class="span12" type="text" maxlength="60" id="addAppName" placeholder="Name"> </div> </form> </div> </div> </div> </div> <div class="modal-footer"> <p id="addAPIKeyResponse" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="confirmAddAPIKeyButton">Get New API Key</button> </div> </div>   <script type="text/ractive" id="addLPRRecipientModal-template"> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <div class="row-fluid"> <div class="span5">Available</div> <div class="span5 offset1">Applied</div> </div> <div class="row-fluid" id="lprRule__recipient_menu"> </div> </div> </form> </div> </script>   <div class="hide" id="addUser"></div>   <div id="cameraAnalyticsModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Camera Analytics</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#cameraAnalyticsMotion" data-toggle="tab">Activity</a> </li> <li class="analyticsTab"><a href="#cameraAnalyticsCounting" data-toggle="tab">Counting</a> </li> <li class="analyticsTab"><a href="#cameraAnalyticsCrossing" data-toggle="tab">Crossing</a> </li> <li class="analyticsTab"><a href="#cameraAnalyticsIntrusion" data-toggle="tab">Intrusion</a> </li> <li class="analyticsTab"><a href="#cameraAnalyticsLoitering" data-toggle="tab">Loitering</a> </li> <li class="analyticsTab"><a href="#cameraAnalyticsTampering" data-toggle="tab">Tampering</a> </li> </ul> <div class="tab-content" id="cameraAnalyticsModal__body"></div> </div> <div class="modal-footer"> <p class="red" id="cameraAnalyticsModal__msg"></p> <button class="btn btn-success" data-dismiss="modal">OK</button> </div> </div>   <div id="CameraVPNModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Add Camera</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span8 offset2"> <form class="form-horizontal"> <p class="help-block">Please wait while we establish a connection with this camera</p> </form> </div> </div> </div> </div> <div class="modal-footer"> <p id="cameraVPNResponse" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" data-dismiss="modal">Close Modal</button> </div> </div>   <div id="chooseCamerasForLayoutModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Add Cameras</h3> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label translate-label" for="chooseCamerasForLayoutModal__filter">Filter:</label> <div class="controls"> <input type="text" id="chooseCamerasForLayoutModal__filter" autocomplete="off" maxlength="100"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="chooseCamerasForLayoutModal__show_all_cameras" value="1"><span class="translate-label">Hide cameras already in layout</span> </label> </div> </div> </form> <div id="chooseCamerasForLayoutModal__body"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success" id="chooseCamerasForLayoutModal__save" data-dismiss="modal">Add Cameras</button> </div> </div>   <script type="text/ractive" id="clearLPRAlertModal-template"> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="">Clear reason:</label> <div class="controls"> <select id="clear_reason" class="form-control" value="{{ alertModel.clear_reason }}"> {{#each reason_list: idx}} <option value="{{ . }}">{{ . }}</option> {{/each}} </select> </div> </div> </form> </div> </script>   <div id="deleteAPIKeyModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Delete Confirmation</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span10 offset1" id="deleteAPIKeymsg"></div> </div> </div> </div> <div class="modal-footer"> <p id="deleteAPIKeyModal_msg" class="red"></p> <button class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="confirmedDeleteAPIKeyButton">Delete</button> </div> </div>   <div id="deleteCameraCompositeModal" class="modal hide fade small-modal"></div>   <div id="deleteCameraModal" class="modal hide fade small-modal"></div>   <div id="deleteCameraShareModal" class="modal hide fade"></div>   <div id="deleteConfirmationModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Delete Confirmation</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span8 offset2">Are you sure you want to delete this layout? It will be removed for yourself and everyone it is shared with.</div> </div> </div> </div> <div class="modal-footer"> <p class="red" id="layout-delete-confirm-error_message"></p> <button class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="confirmedDeleteLayoutButton" data-dismiss="modal">Delete</button> </div> </div>   <script type="text/ractive" id="deleteLPRRuleModal-template"> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span10 offset1" id="deleteLPRRulemsg">Are you sure you want to delete this rule? This will remove them completely. There is no recovery from this.</div> </div> </div> </div> </script>   <div id="deleteSpeakerModal" class="modal hide fade small-modal"></div>   <div id="deleteUserModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Delete Confirmation</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span10 offset1" id="deleteUsermsg"></div> </div> </div> </div> <div class="modal-footer"> <p id="deleteUserModal_msg" class="red"></p> <button class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="confirmedDeleteUserButton">Delete</button> </div> </div>   <div id="demoDisclaimerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Demo Information</h3> </div> <div class="modal-body"> <p>You have logged into a Demo Account. This Demo Account will show you all the features and settings that a full Administrator would have on the Security Camera VMS. Any changes you attempt to make, however, will be quietly ignored so that the demo account does not get modified. Thank you.</p> </div> <div class="modal-footer"> <button class="btn btn-warning" data-dismiss="modal">OK</button> </div> </div>   <div id="editBridgeModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close modal-close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Bridge Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#editBridge__bridge" data-toggle="tab">Bridge</a> </li> <li id="editBridge__locationTabLabel"><a href="#editBridge__location" data-toggle="tab">Location</a> </li> <li id="metrics_tab"><a href="#editBridge__metrics" data-toggle="tab">Metrics</a> </li> <li id="local_disp_tab"><a href="#editBridge__local" data-toggle="tab">Local Display</a> </li> <li id="analog_ignored_tab"><a href="#editBridge__analog" data-toggle="tab">Analog</a> </li> <li style="display:none;" id="interface_info"><a href="#editBridge__interfaces" data-toggle="tab">Cam WiFi</a> </li> <li id="notes_tab"><a href="#editBridge__notes" data-toggle="tab">Notes</a> </li> </ul> <div id="editBridge__communication-error" class="hide"> <span class="red">We are currently unable to communicate with this bridge. Please try again later, or contact customer support.</span> </div> <div class="tab-content" id="editBridgeModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editBridgeModal_msg"></p> <button class="btn btn-warning modal-close" data-dismiss="modal">Cancel</button> <a href="#" class="btn btn-success" id="editBridge__save">Save Changes</a> </div> </div>   <div id="editCameraModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close modal-close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Camera Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li id="csCameraTabLabel" class="active cs_advanced"> <a href="#csCamera" data-toggle="tab" data-testid="modal-camera-settings-tab-label-camera">Camera</a> </li> <li class="cs_advanced cs_account_advanced"> <a href="#csRetention" data-toggle="tab" data-testid="modal-camera-settings-tab-label-retention">Retention</a> </li> <li class="cs_advanced cs_account_advanced"> <a href="#csResolution" data-toggle="tab" data-testid="modal-camera-settings-tab-label-resolution">Resolution</a> </li> <li style="display: none"> <a href="#csDewarping" data-toggle="tab" data-testid="modal-camera-settings-tab-label-fisheye-dewarp">Fisheye Dewarp</a> </li> <li id="csIOTabLabel" class="hidden"> <a href="#csIO" id="ioTab" data-toggle="tab" data-testid="modal-camera-settings-tab-label-io">IO</a> </li> <li id="csMotionTabLabel" class=""> <a href="#csMotion" id="motionTab" data-toggle="tab" data-testid="modal-camera-settings-tab-label-motion">Motion</a> </li> <li id="csAnalyticsTabLabel" class="cs_advanced" style="display: none;"> <a href="#csAnalytics" data-toggle="tab" data-testid="modal-camera-settings-tab-label-analytics">Analytics</a> </li> <li id="csDeviceAnalyticsTabLabel" style="display: none;"> <a href="#csDeviceAnalytics" data-toggle="tab" data-testid="modal-camera-settings-tab-label-device-features">Device Analytics</a> </li> <li id="csPTZTabLabel"> <a href="#csptz" id="ptzTab" data-toggle="tab" data-testid="modal-camera-settings-tab-label-ptz">PTZ</a> </li> <li id="csThermalLabel" class="" style="display: none;"> <a href="#csThermal" data-toggle="tab" data-testid="modal-camera-settings-tab-label-thermal">Thermal</a> </li> <li id="csMobotixMotionLabel" class="hidden"> <a href="#csMobotixMotion" data-toggle="tab" data-testid="modal-camera-settings-tab-label-mobotix-motion">MOBOTIX Motion</a> </li> <li id="csMobotixMotionMessageLabel" class="hidden"> <a href="#csMobotixMotionMessage" data-toggle="tab" data-testid="modal-camera-settings-tab-label-mobotix-messaging">MOBOTIX Messaging</a> </li> <li class="cs_advanced_hidden" style="display:none"> <a href="#csPrivacy" data-toggle="tab" data-testid="modal-camera-settings-tab-label-privacy">Privacy</a> </li> <li class="cs_advanced_hidden" style="display:none"> <a href="#csAudio" data-toggle="tab" data-testid="modal-camera-settings-tab-label-audio">Audio</a> </li> <li class="cs_advanced_hidden" style="display:none"> <a href="#csImage" data-toggle="tab" data-testid="modal-camera-settings-tab-label-image">Image</a> </li> <li id="csLocationTabLabel" class="cs_advanced"> <a href="#csLocation" data-toggle="tab" data-testid="modal-camera-settings-tab-label-location">Location</a> </li> <li id="metricsTabLabel" class=""> <a href="#editCamera__metrics" data-toggle="tab" data-testid="modal-camera-settings-tab-label-metrics">Metrics</a> </li> <li id="csMaintTabLabel" class="cs_advanced" style="display:none;"> <a href="#csMaintenance" data-toggle="tab" data-testid="modal-camera-settings-tab-label-maintenance">Maintenance</a> </li> <li id="csAIFilteringLabel" class="hidden"> <a href="#csAIFiltering" data-toggle="tab" data-testid="modal-camera-settings-tab-label-ai-filtering">AI Filtering</a> </li> </ul> <div id="editCamera__communication-error" class="hide"> <div class="row-fluid"> <div class="span12 text-center "> <div class="red error-message" data-testid="modal-camera-settings-tab-warning-unable-to-communicate">We are currently unable to communicate with this camera. Please try again later, or contact customer support.</div> </div> </div> </div> <div class="tab-content" id="editCameraModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editCameraModal_msg"></p> <button class="btn btn-warning modal-close" id="editCamera__cancel" data-dismiss="modal" data-testid="modal-camera-settings-footer-button-cancel">Cancel</button> <button class="btn btn-info" id="editCamera__apply_motion_settings" data-testid="modal-camera-settings-footer-button-apply">Apply</button> <button class="btn btn-success" id="editCamera__save" data-testid="modal-camera-settings-footer-button-save">Save Changes</button> </div> </div>   <div id="editCameraShareModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Camera Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#csCameraShare" data-toggle="tab">Camera</a> </li> <li><a href="#csCameraShareLocation" data-toggle="tab">Location</a> </li> </ul> <div id="editCameraShare__communication-error" class="hide"> <span class="red">We are currently unable to communicate with this camera. Please try again later, or contact customer support.</span> </div> <div class="tab-content" id="editCameraShareModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editCameraShareModal_msg"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <a href="#" class="btn btn-success" id="editCameraShareModal__save">Save Changes</a> </div> </div>   <script type="text/ractive" id="EditionUpgradeForm-template"> <form class="row-horizontal"> <div class="control-group"> <label class="control-label" data-testid="modal-account-tab-editions-label-current-edition" > {{translateText('Current Edition:')}} </label> <div class="control-text controls current-edition-holder">{{initial_edition_name}}</div> </div> {{#if editions.length !== 1}} <div class="control-group"> <label class="control-label" data-testid="modal-account-tab-editions-input-label-edition-to-upgrade" > {{translateText('Edition To Upgrade')}} </label> <div class="controls"> <div class="row-fluid"> <select value="{{selected_edition}}"> {{#each editions}} <option value={{.id}}>{{.name}}</option> {{/each}} </select> </div> </div> </div> {{/if}} {{#if initial_edition_id !== selected_edition}} <p id="editionWarning" class="red new-line" data-testid="modal-account-tab-editions-warning-upgrade-editions" > {{translateText('WARNING: Changing the Edition will incur additional charges.Do you want to continue?')}} </p> {{/if}} {{#if is_reject === true}} <p class="red new-line" id="editionErrorWarning" data-testid="modal-account-tab-editions-warning-error-during-fetching" > {{translateText('An error occurred while fetching available Editions. Please try again or contact support.')}} </p> {{/if}} </form> </script>   <script type="text/ractive" id="editLPRRuleModal-template"> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group {{#if ruleModel.plate === '' }} error {{/if}}"> <label class="control-label" for="">License Plate:</label> <div class="controls"> <input type="text" maxlength="60" id="license_plate" class="settings span4" value="{{ ruleModel.plate }}"> {{#if ruleModel.plate === '' }}<div class="help-block lpr-rule-help-text" >License plate can not be empty.</div>{{/if}} </div> </div> <div class="control-group"> <label class="control-label" for="">Location:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <select class="span6" id="location" value="{{ location_index }}"> {{#each locationList:index }} <option value="{{ index }}" {{#if ruleModel.location_name === name }} selected {{/if}} >{{ name }}</option> {{/each}} </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="">Type:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <select class="span6" id="type" value="{{ ruleModel.event }}"> <option value="whitelist">Allow</option> <option value="blacklist">Deny</option> <option value="watchlist">Watch</option> </select> </div> </div> </div> </div> {{#if ruleModel.event === "watchlist" }} <div class="control-group" id="duration-row"> <label class="control-label" for="">Duration:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <select class="span6" id="type" value="{{ ruleModel.duration }}"> <option value="15">15 Minutes</option> <option value="30">30 Minutes</option> <option value="45">45 Minutes</option> <option value="60">60 Minutes</option> <option value="75">75 Minutes</option> <option value="90">90 Minutes</option> <option value="105">105 Minutes</option> <option value="120">120 Minutes</option> </select> </div> </div> </div> </div> {{/if}} <div class="row-fluid"> <div class="span5">Available recipients</div> <div class="span5 offset1">Applied recipients</div> </div> <div class="row-fluid" id="lprRule__recipient_menu"> </div> </form> </div> </script>   <div id="editMasterAccountSettingsModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Reseller Account Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#masterAccountSettingsBranding" data-toggle="tab">Branding</a> </li> <li><a href="#masterAccountDefaults" data-toggle="tab">Defaults</a> </li> <li><a href="#masterAccountDays" data-toggle="tab">Days</a> </li> <li><a id="masterAccountSettingsTOS-tab" href="#masterAccountSettingsTOS" data-toggle="tab">Terms of Service</a> </li> <li id="editMasterAccountSettingsModal__SecurityTabOption"><a href="#masterAccountSecurity" data-toggle="tab">Security</a> </li> </ul> <div class="tab-content" id="editMasterAccountSettingsModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editMasterAccountSettingsModal__msg"></p> <button class="btn btn-warning" data-dismiss="modal" id="editMasterAccountSettingsModal__cancel">Cancel</button> <button class="btn btn-success" id="editMasterAccountSettingsModal__save">Save changes</button> </div> </div>   <div id="editParentCameraModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="editParentCamera_title"></h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a id="editParentCamera_main_tab" href="#csParentCamera" data-toggle="tab">Camera</a> </li> <li class="active"><a id="editParentCamera_views_tab" href="#csParentCameraViews" data-toggle="tab">Views</a> </li> </ul> <div id="editParentCamera__communication-error" class="hide"> <span class="red">We are currently unable to communicate with this camera. Please try again later, or contact customer support.</span> </div> <div class="tab-content" id="editParentCameraModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editParentCameraModal_msg"></p> <p class="red" id="editParentCameraModal_msg2"></p> <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success" id="editParentCameraModal__save">Save Changes</button> </div> </div>   <div id="editSpeakerModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Speaker Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#editSpeaker__speaker" data-toggle="tab">Device</a> </li> <li id="editSpeaker__camerasTabLabel"><a href="#editSpeaker__cameras" data-toggle="tab">Audio</a> </li> </ul> <div id="editSpeaker__communication-error" class="hide"> <span class="red">We are currently unable to communicate with this speaker. Please try again later, or contact customer support.</span> </div> <div class="tab-content" id="editSpeakerModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editSpeakerModal_msg"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <a href="#" class="btn btn-success" id="editSpeaker__save">Save Changes</a> </div> </div>   <div id="editSubAccountSettingsModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Account Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a href="#subAccountSettingsStatus" data-toggle="tab">Status</a> </li> <li><a href="#subAccountSettingsContact" data-toggle="tab">Contact</a> </li> <li><a href="#subAccountSettingsAdmin" data-toggle="tab">Access</a> </li> </ul> <div class="tab-content" id="editSubAccountSettingsModal-body"></div> </div> <div class="modal-footer"> <p class="red" id="editSubAccountSettingsModal__msg"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="editSubAccountSettingsModal__save">Save changes</button> </div> </div>   <div id="editUserModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>User Settings</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs accountSettingsTab"> <li class="active" id="editUserModal__permissions_tab"> <a href="#editUserModal__tab_permissions" data-toggle="tab">Permissions</a> </li> <li><a href="#editUserModal__tab_user_settings" data-toggle="tab">Access</a> </li> <li id="editUserModal__accounts_tab"><a href="#editUserModal__tab_accounts" data-toggle="tab">Accounts</a> </li> <li id="editUserModal__locations_tab"><a href="#editUserModal__tab_locations" data-toggle="tab">Locations</a> </li> <li id="editUserModal__cameras_tab"><a href="#editUserModal__tab_cameras" data-toggle="tab">Cameras</a> </li> <li id="editUserModal__layouts_tab"><a href="#editUserModal__tab_layouts" data-toggle="tab">Layouts</a> </li> </ul> <div class="tab-content"></div> </div> <div class="modal-footer"> <p id="editUserModal_msg" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="editUserModal__save">Save Changes</button> </div> </div>   <script type="text/ractive" id="errorNotification-template"> {{#if message !== null}} <div class="error-message-body"> <div class="error-message-title-row"> <div class="icon icon-remove-circle red"> </div> <div class="title"> {{ header }} </div> <div class="close-icon talkdown-close-icon" on-click="@this.close()"> </div> </div> <div class="error-message-content"> <div class="message">{{ message }}</div> </div> </div> {{/if}} </script>   <div id="FeedbackModal" class="modal hide fade" data-desc="none" data-id="none"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3></h3> </div> <div class="modal-body"> <div id="FeedbackModal-body"></div> </div> <div class="modal-footer"> <p id="supportSubmitInvalid" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="submitRequest">Submit</button> </div> </div>   <div class="modal hide fade" data-backdrop="static" keyboard="false" id="warningModal"></div>   <div class="modal hide fade" data-backdrop="static" keyboard="false" id="genericModal"></div>   <div id="addCameraModal" class="modal hide fade"></div>   <div id="addSpeakerModal" class="modal hide fade"></div>   <div id="layoutSettingsModal" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Layout Settings</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="row" id="layoutSettingsModalRow"></div> </div> </div> <div class="modal-footer"> <p class="red" id="layout-settings-error_message"></p> <button class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="layoutSettings_saveButton">Save Changes</button> </div> </div>   <div class="modal hide fade" id="managedSwitchModal"></div>   <div id="removeBridgeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Delete Bridge</h3> </div> <div class="modal-body"> <p>You are about to delete the Bridge/CMVR {{bridgeName}} and all the data that it has. This will delete all cloud information, all video recordings, and all the cameras connected to this Bridge/CMVR. Are you REALLY sure you want to do this?</p> </div> <div class="modal-footer"> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="removeBridgeButton">Delete Bridge</button> </div> </div>   <div id="replaceBridgeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Replace Bridge</h3> </div> <div class="modal-body" id="replaceBridge__body"></div> <div class="modal-footer"> <p id="replaceBridge__msg" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="replaceBridge__replace">Replace</button> <button class="btn btn-danger" id="replaceBridge__confirm_replace">Confirm Replace</button> </div> </div>   <div id="requestDownload" class="modal hide fade"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Re-request Download</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="">Description:</label> <div class="controls"> <div class="row-fluid"> <input type="text" id="requestDownloadDescription"></input> </div> </div> </div> <div class="control-group"> <label class="control-label" for="">Show Timestamp:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="requestDownloadTimestamp"></input> </div> <div class="span6"> <select id="requestDownloadTimezone" class="span10"> <option value="US/Alaska">US/Alaska</option> <option value="US/Hawaii">US/Hawaii</option> <option value="US/Pacific">US/Pacific</option> <option value="US/Arizona">US/Arizona</option> <option value="US/Mountain">US/Mountain</option> <option value="US/Central">US/Central</option> <option value="US/Eastern">US/Eastern</option> <option value="Canada/Atlantic">Canada/Atlantic</option> <option value="Mexico/General">Mexico/General</option> <option value="America/Bogota">America/Bogota</option> <option value="America/Argentina/Buenos_Aires">America/Buenos Aires</option> <option value="America/Monterrey">America/Monterrey</option> <option value="UTC">UTC</option> <option value="Europe/London">Europe/London</option> <option value="Europe/Amsterdam">Europe/Amsterdam</option> <option value="Europe/Paris">Europe/Paris</option> <option value="Europe/Berlin">Europe/Berlin</option> <option value="Europe/Kaliningrad">Europe/Kaliningrad</option> <option value="Europe/Istanbul">Europe/Istanbul</option> <option value="Europe/Moscow">Europe/Moscow</option> <option value="Asia/Riyadh">Asia/Riyadh</option> <option value="Asia/Baku">Asia/Baku</option> <option value="Asia/Dubai">Asia/Dubai</option> <option value="Asia/Qatar">Asia/Qatar</option> <option value="Asia/Karachi">Asia/Karachi</option> <option value="Asia/Calcutta">Asia/Calcutta</option> <option value="Asia/Dhaka">Asia/Dhaka</option> <option value="Asia/Bangkok">Asia/Bangkok</option> <option value="Asia/Hong_Kong">Asia/Hong Kong</option> <option value="Asia/Tel_Aviv">Asia/Tel Aviv</option> <option value="Asia/Tokyo">Asia/Tokyo</option> <option value="Asia/Magadan">Asia/Magadan</option> <option value="Asia/Yangon">Asia/Yangon</option> <option value="Australia/Lord_Howe">Australia/Lord Howe</option> <option value="Australia/Perth">Australia/Perth</option> <option value="Australia/Sydney">Australia/Sydney</option> <option value="Australia/West">Australia/West</option> <option value="Pacific/Guam">Pacific/Guam</option> <option value="Pacific/Auckland">Pacific/Auckland</option> <option value="Pacific/Kwajalein">Pacific/Kwajalein</option> <option value="Pacific/Midway">Pacific/Midway</option> </select> </div> </div> </div> </div> <div class="control-group" style="display:none;"> <label class="control-label" for="">Show Watermark:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="requestDownloadWatermark"></input> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="">Notes:</label> <div class="controls"> <div class="row-fluid"> <textarea id="requestDownloadNotes"></textarea> </div> </div> </div> </form> </div> </div> </div> <div class="modal-footer"> <p id="requestDownloadResponse" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" id="submitDownloadReq">Submit</button> </div> </div>   <div id="restartBridgeModal" class="modal hide fade small-modal" role="dialog"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Restart Bridge</h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span8 offset2">Are you sure you want to restart this bridge? Brief data loss could occur.</div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-warning" id="" data-dismiss="modal">Cancel</button> <button class="btn btn-danger" id="confirm_restart_bridge" data-dismiss="modal">Restart</button> </div> </div>   <script type="text/ractive" id="speakerNotification-template"> {{#if status !== null}} <div class="speaker-message-body"> <div class="speaker-message-title-row"> {{#if status === "connecting" }} <div class="icon talkdown-connecting-icon"> </div> <div class="title"> {{ translateText("Speaker is connecting...") }} </div> {{elseif status === "connected"}} <div class="icon talkdown-connected-icon"> </div> <div class="title"> {{ translateText("Speaker connected") }} </div> {{elseif status === "disconnected"}} <div class="icon talkdown-disconnected-icon"> </div> <div class="title"> {{ translateText("Speaker disconnected") }} </div> {{elseif status === "talkdowning"}} <div class="icon talkdown-disconnected-icon"> </div> <div class="title"> {{ translateText("There is another speaker working") }} </div> {{elseif status === "closed"}} <div class="icon talkdown-disconnected-icon"> </div> <div class="title"> {{ translateText("Speaker disconnected") }} </div> {{elseif status === "busy"}} <div class="icon talkdown-busy-icon"> </div> <div class="title"> {{ translateText("Speaker is busy") }} </div> {{/if}} <div class="close-icon talkdown-close-icon" on-click="@this.close()"> </div> </div> <div class="speaker-message-content"> {{#if status === "connected" }} <div class="message">{{ translateText("You can use the speaker") }}</div> {{elseif status === "disconnected"}} <div class="message">{{ translateText("Check internet connection and try again") }}</div> {{elseif status === "busy"}} <div class="message">{{ translateText("Check speaker settings and try again") }}</div> {{/if}} </div> </div> {{/if}} </script>   <div class="modal hide fade" id="superSearchModal"></div>   <div id="tunnelModal" class="modal hide fade"></div>   <div class="modal hide fade" id="twoFactorModal"></div>   <div id="userSettingsModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>My Profile</h3> </div> <div class="modal-body"> <ul class="nav nav-tabs accountSettingsTab"> <li class="active"> <a href="#usLogin" data-toggle="tab" data-testid="modal-my-profile-tab-label-login">Login</a> </li> <li id="userSettings__notifications_tab"> <a href="#usAlerts" data-toggle="tab" data-testid="modal-my-profile-tab-label-notifications">Notifications</a> </li> <li id="userSettings__time_tab"> <a href="#usTime" data-toggle="tab" data-testid="modal-my-profile-tab-label-time">Time</a> </li> <li id="userSettings__layouts_tab"> <a href="#usLayouts" data-toggle="tab" data-testid="modal-my-profile-tab-label-layouts">Layouts</a> </li> <li id="userSettings__previews_tab"> <a href="#usPreviews" data-toggle="tab" data-testid="modal-my-profile-tab-label-previews">Previews</a> </li> <li id="userSettings__devices_tab"> <a href="#usDevices" data-toggle="tab" data-testid="modal-my-profile-tab-label-trusted-devices">Trusted Devices</a> </li> <li id="userSettings__reports_tab"> <a href="#usReports" data-toggle="tab" data-testid="modal-my-profile-tab-label-reports">Reports</a> </li> </ul> <div class="tab-content" id="usTabContent"></div> </div> <div class="modal-footer"> <p class="red" id="userSettings_msg"></p> <button class="btn btn-warning" data-dismiss="modal" data-testid="modal-my-profile-button-cancel">Cancel</button> <button class="btn btn-success" id="userSettingsModal_save" data-testid="modal-my-profile-button-save">Save changes</button> </div> </div>  <script type="text/ractive" id="EEN-Modals-CompositeNaming-template"> <form class="form-horizontal" autocomplete="off"> <div class="control-group"> <label class="control-label" for="name">{{translateText('Viewport Name')}}:</label> <div class="controls"> <input type="text" id="name" placeholder="{{translateText('View 1')}}" value="{{name}}" {{#disabled}}disabled{{/}} /> <p class="text-error {{^error}}hidden{{/}}"> {{ error }} </p> </div> </div> {{> extra-form-elements}} </form> </script>  <script type="text/template" id="AccountListItemView-template"> <% var account = this.model; var currentUser = userList.getCurrentUser(); %> <tr> <td><i title="<%=(account.get('is_active') ? this.t('Account Enabled') : (account.get('is_inactive') ? this.t('Account Login Disabled') : this.t('Account Disabled')))%>" class="<%=(account.get('is_active') ? 'icon-ok-circle green big-icon' : (account.get('is_inactive') ? 'icon-ban-circle orange big-icon' : 'icon-remove-circle red big-icon'))%>"></i></td> <td><%= this.getAccountName(account) %></td> <td> <% if (account.get('is_delegated_account')) { %> <span class="pull-right label"><%=this.t('Delegated')%></span> <% } %> </td> <% if (currentUser.checkEditionsIsEnabled()) { %> <td><%= this.getEditionName(account.get('extras').account_edition_id) %></td> <% } %> <td style="text-align:center"><span class="green" title="<%=this.t('Bridges Online')%>" style="padding-left:3px;padding-right:3px;<%=(account.get('bridge_online_count')?'':'display:none')%>"><%= account.get('bridge_online_count') %></span><span class="red" title="<%= this.t('Bridges Offline') %>" style="padding-left:3px;padding-right:3px;<%=(account.get('bridge_offline_count')?'':'display:none')%>"><%= account.get('bridge_offline_count')%></span></td> <td style="text-align:center"><span class="green" title="<%=this.t('Cameras Online')%>" style="padding-left:3px;padding-right:3px;<%=(account.get('camera_online_count')?'':'display:none')%>"><%= account.get('camera_online_count') %></span><span class="red" title="<%= this.t('Cameras Offline') %>" style="padding-left:3px;padding-right:3px;<%=(account.get('camera_offline_count')?'':'display:none')%>"><%= account.get('camera_offline_count')%></span><span class="orange" title="<%=this.t('Cameras Off') %>" style="<%=(account.get('camera_off_count')?'':'display:none')%>"><%= account.get('camera_off_count') %></span></td> <td style="text-align:center"><%=(account.get('average_retention_days') ? account.get('average_retention_days') : '')%></td> <td style="text-align:center"><%= account.get('user_count')%></td> <td><%= deviceList.getDisplayTime(account.get('last_login'), false, true)%></td> <td> <button type="button" class="account-login" data-id="<%= account.get('id') %>" title="<%=this.t('login to end user account')%>"><i class="icon-eye-open"></i></button> <% if (currentUser.checkAccountUpdateByID(account.get('id')) && !account.get('is_delegated_account')) { %> <button type="button" class="account-edit" data-id="<%= account.get('id') %>" title="<%=this.t('change end user account settings')%>"><i class="icon-cog"></i></button> <% } %> <%if(currentUser.checkAccountAddDelete()){%> <button type="button" class="account-delete" data-id="<%= account.get('id') %>" title="<%=this.t('remove end user account')%>"><i class="icon-trash"></i></button> <%}%> </td> </tr> </script>   <script type="text/template" id="AccountNotificationView-template"> <% if (notifications.length > 0) {%> <% _.each(notifications, function(item) { %> <% var notification_time = item['starttime'], notification_types = item['json']['notification_types'].join('|'), notification_recent_states = (item['json']['recent_states'] && item['json']['recent_states'][item['target_deviceid']]) || null, notification_raw_status = (item['json']['raw_status'] && item['json']['raw_status'][item['target_deviceid']]) || null, notification_purge_info = (item['json']['device_purge_info'] && item['json']['device_purge_info'][item['target_deviceid']]) || null, notification_target_deviceid = item.target_deviceid, is_camera_notification = (notification_raw_status ? notification_raw_status.type === 'camera' : false); var notification_status_name = notification_raw_status && notification_raw_status['name'] ? notification_raw_status['name'] : ''; if(notification_types.indexOf('alert_notification_')>=0){ // don't show motion alerts for now return; notification_type = 'motion'; notification_icon = 'notification-icon-motion'; notification_description = item['json']['raw_status']['device_name'] + ' camera motion detected'; if(item['json']['raw_status'] && item['json']['raw_status']['trigger_name']){ notification_description+=' in region "'+item['json']['raw_status']['trigger_name']+'"'; } } else if (!notification_status_name) { return; }else if(notification_types.indexOf('off_notification_')>=0){ notification_type = 'off'; notification_icon = 'icon-ban-circle orange'; notification_description = notification_status_name + ' turned off'; }else if(notification_types.indexOf('offline_notification_')>=0){ notification_type = 'offline'; notification_icon = 'icon-remove-circle red'; notification_description = notification_status_name + ' went offline'; // Make sure we show the time that reflects the total offline time (disable for now) /* if(notification_recent_states && (notification_recent_states['internet+offline_notification_email'] || notification_recent_states['offline_notification_email'])){ if(notification_recent_states['offline_notification_email']){ notification_time = notification_recent_states['offline_notification_email']; if(notification_recent_states['internet+offline_notification_email'] && notification_recent_states['internet+offline_notification_email'] > notification_time){ notification_time = notification_recent_states['internet+offline_notification_email'] } }else{ notification_time = notification_recent_states['internet+offline_notification_email']; } }*/ }else if(notification_types.indexOf('online_notification_')>=0){ notification_type = 'online'; notification_icon = 'icon-ok-circle green'; notification_description = notification_status_name + ' came online'; }else if(notification_types.indexOf('cloud+disconnected_notification_')>=0){ notification_type = 'internetoffline'; notification_icon = 'icon-exclamation-sign red'; notification_description = notification_status_name + ' internet offline'; }else if(notification_types.indexOf('camera_purge_notification_')>=0){ notification_type = 'camerapurge'; notification_icon = 'icon-warning-sign red'; notification_description = notification_status_name + ' data purged'; }else{ return; } notification_account = item['account_name']; %> <% if (is_camera_notification) {%> <tr class="notification-clickable-row" data-target-deviceid="<%= notification_target_deviceid %>" data-toggle="tooltip" title="<%=utils.t('Open selected device in the customer account')%>"> <td> <i class="notification-icon <%= notification_icon %>"></i> </td> <td> <%=deviceList.getDisplayTime(notification_time, false, true)%> - <%-notification_account%><br/><%-notification_description%> </td> </tr> <%} else {%> <tr> <td> <i class="notification-icon <%= notification_icon %>"></i> </td> <td> <%=deviceList.getDisplayTime(notification_time, false, true)%> - <%-notification_account%><br/><%-notification_description%> </td> </tr> <%}%> <% }); %> <%} else {%> <div class="text-center text-dimmed"><%=utils.t('No new notifications')%></p> <%}%> </script>   <script type="text/template" id="AccountSummaryView-template"> <div id="master_account_summary" class="pull-left span6"> <div class="row"> <div class="span10 text-right" title="<%= this.t('Total number of accounts') %>"><%= this.t('Accounts') %>:</div><div class="span2"><%= account_active_count + account_inactive_count %></div> </div> <div class="row"> <div class="span10 text-right" title="<%=this.t('Total number of bridges')%>"><%= this.t('Total Bridges/CMVRs') %>:</div><div class="span2"><%= bridge_count %></div> </div> <div class="row"> <div class="span10 text-right" title="<%=this.t('Online bridges with no cameras')%>"><%= this.t('Bridges/CMVRs Online without Cameras') %>:</div><div class="span2"><%= bridge_inactive_count %></div> </div> <div class="row"> <div class="span10 text-right" title="<%= this.t('Total number of cameras (does not include Available Cameras)') %>"><%= this.t('Total Cameras') %>:</div><div class="span2"><%= camera_active_count %></div> </div> <div class="row"> <div class="span10 text-right" title="<%= this.t('Cameras available to be added') %>"><%= this.t('Available Cameras') %>:</div><div class="span2"><%= camera_available_count > 0 ? this.t("Yes") : this.t("No") %></div> </div> </div> <div id="master_bridge_summary" class="pull-left span3"></div> <div id="master_camera_summary" class="pull-left span3"></div> </script>   <script type="text/template" id="AccountView-template"> <% var currentUser = userList.getCurrentUser(); %> <header class="widget-title"><i class="icon-sitemap"></i> <span><%= this.t('Accounts') %></span> (<span id="account-list-active"></span> <%= this.t('Active') %>, <span id="account-list-total"></span> <%= this.t('Total') %>) <%if(currentUser.checkAccountAddDelete()){%> <i id="launchAddAccountModalSmall" title="<%= this.t('Add Account') %>" class="add-icon icon-plus-sign pull-right launchAddAccountModal"></i> <%}%> </header> <div class="widget-content clearfix" id="account-list"> <table class="table table-striped"> <thead> <tr> <th id='account-table-status' style="cursor:pointer;width:7%"><%= this.t('Status') %></th> <th id='account-table-name' style="cursor:pointer;width:20%"><%= this.t('Account Name') %></th> <th></th> <% if (currentUser.checkEditionsIsEnabled()) { %> <th id='account-table-edition' style="width:10%"><%= this.t('Edition') %></th> <% } %> <th id='account-table-bridges' style="text-align:center;width:10%"><%= this.t('Bridges/CMVRs') %></th> <th id='account-table-cameras' style="cursor:pointer;text-align:center;width:10%"><%= this.t('Cameras') %></th> <th id='account-table-retention' style="text-align:center;width:8%"><%= this.t('Avg. Retention') %></th> <th id='account-table-users' style="text-align:center;width:8%"><%= this.t('Users') %></th> <th id='account-table-login' style="width:17%"><%= this.t('Last Login') %></th> <th style="width:20%"><%= this.t('Actions') %></th> </tr> </thead> <tbody id='account-list-rows'> </tbody> </table> </div> <footer id="accounts-footer" class="widget-title"> <%if(currentUser.checkAccountAddDelete()){%> <button type="button" id="launchAddAccountModal" href="#" class="btn btn-success pull-right launchAddAccountModal"><i class="icon-plus-sign"></i> <%= this.t('Add Account') %></button> <%}%> <span id="footer-span"></span> </footer> </script>   <script type="text/ractive" id="AddAccount-template"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>{{translateText('Add Account')}}</h3> </div> <div class="modal-body add-new-account"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="">{{translateText('Account Name')}}:</label> <div class="controls"> <div class="control-group"> <input type="text" value="{{account.name}}" maxlength="60" autocomplete="off" placeholder="{{translateText('Account Name')}}*" required> </div> </div> </div> <div class="control-group"> <label class="control-label" for="">{{translateText('Customer ID')}}:</label> <div class="controls"> <div class="control-group"> <input type="text" placeholder="{{translateText('Customer ID')}}" maxlength="100" value="{{account.customer_id}}"> </div> </div> </div> <div class="control-group"> <label class="control-label" for="">{{translateText('Email')}} ({{translateText('optional')}}):</label> <div class="controls"> <div class="row-fluid"> <div class="span7"> <input class="span12" type="email" maxlength="60" value="{{account.contact_email}}" placeholder="{{translateText('Email')}}" required> </div> <div class="span2"> <label class="admin-label">{{translateText('Admin')}}</label> </div> <div class="span1"> <input type="checkbox" checked="{{account.is_initial_user_admin}}"> </div> </div> </div> </div> {{#if is_enabled_edition && is_edition_upgrade_enabled}} <div class="control-group"> <label class="control-label" for="">{{translateText('Edition')}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span7"> <select class="span12" type="text" value="{{account.edition_id}}" required > {{#each available_editions}} <option value="{{.id}}">{{.name}}</option> {{/each}} </select> </div> </div> </div> </div> {{/if}} {{#if available_editions[0].id !== account.edition_id}} <p id="editionWarning" class= "red new-line">{{translateText('WARNING: Changing the Edition will incur additional charges.Do you want to continue?')}}</p> {{/if}} {{#if is_reject}} <p class="red new-line" id="editionErrorWarning"> {{translateText('An error occurred while fetching available Editions. Please try again or contact support.')}} </p> {{/if}} {{! this section must be hidden with css or bootstrap form helpers won't init }} <div class="control-group {{#unless ui.valid_email}}hidden{{/unless}}"> <label class="control-label" for="">{{translateText('User')}}:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{account.contact_first_name}}" placeholder="{{translateText('First Name')}}*" required> </div> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{account.contact_last_name}}" placeholder="{{translateText('Last Name')}}*" required> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span12" maxlength="60" value="{{ui.address1}}" placeholder="{{translateText('Address')}} 1"> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span12" maxlength="60" value="{{ui.address2}}" placeholder="{{translateText('Address')}} 2"> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{account.contact_city}}" placeholder="{{translateText('City')}}"> </div> <div class="span6"> <div class="span12 bfh-selectbox bfh-states" data-country="add-account-country"> <input type="hidden" value="" id="add-account-state-value"> <a class="bfh-selectbox-toggle span12" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium"></span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" value="{{account.contact_postal_code}}" maxlength="60" placeholder="{{translateText('ZIP / Postal Code')}}"> </div> <div class="span6"> <div id="add-account-country" class="span12 bfh-selectbox bfh-countries" data-country="US"> <input type="hidden" value="" id="add-account-country-value"> <a class="span12 bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="US"></span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <hr> <h5>{{translateText('Camera Defaults')}}</h5> <div class="modal-form-centered"> <DefaultCloudPreviewOnly user_value={{account.default_preview_only_cloud_retention}}></DefaultCloudPreviewOnly> <DefaultCloudRetention user_value={{account.default_camera_cloud_retention_days}} is_default_preview_only_cloud_retention="{{account.default_preview_only_cloud_retention}}" ></DefaultCloudRetention> <DefaultMinLocalRetention user_value={{account.default_minimum_on_premise_retention_days}} max_value="{{account.default_maximum_on_premise_retention_days}}"></DefaultMinLocalRetention> <DefaultMaxLocalRetention user_value={{account.default_maximum_on_premise_retention_days }} min_value="{{account.default_minimum_on_premise_retention_days}}"></DefaultMaxLocalRetention> <DefaultPreviewResolution user_value={{account.default_camera_preview_resolution}}></DefaultPreviewResolution> <DefaultFullVideoResolution user_value={{account.default_camera_full_video_resolution}}></DefaultFullVideoResolution> </div> </form> </div> <div class="modal-footer"> <p class="red">{{ui.error}}</p> <button type="button" class="btn btn-warning" data-dismiss="modal">{{translateText('Cancel')}}</button> <button type="button" class="btn btn-success" on-click="@this.save()">{{translateText('Add Account')}}</button> </div> </script>   <script type="text/ractive" id="AddBridgeComponent-template"> <div class="modal-content add-bridge-modal"> <div class="row-fluid"> <div class="span12"> <div class="span8 offset2"> <form class="form-horizontal"> <div class="control-group"> <p class="help-block">{{{translateText('Attach ID')}}}</p> <input class="span10" value="{{connect_id}}" type="text" maxlength="60" id="addBridgeConnectID" placeholder="{{translateText('Attach ID')}}" data-testid="modal-add-bridge-form-input-attach-id" /> </div> <div class="control-group"> <p class="help-block">{{{translateText('Bridge Name')}}}</p> <input class="span10" value="{{bridge_name}}" type="text" maxlength="60" id="addBridgeName" placeholder="{{translateText('Bridge Name')}}" data-testid="modal-add-bridge-form-input-name" /> </div> {{#if is_locations_feature_enabled && user.checkEditLocationGroup()}} <div class="location-section"> <p class="help-block">{{{translateText('Location')}}}</p> <div class="flex-modal"> <div class="span10"> <LocationSelect onSelect='{{onLocationSelect}}' is_no_location_visible="true" should_select_default_location="true" data_test_id="modal-add-bridge-form-select-location" /> </div> <div class="location-add-button-center span2"> <LocationAddButton id="bridgeAddButton" beforeOpen='{{hideBridgeModal}}' onResult='{{onAddNewLocation}}'/> </div> </div> </div> {{/if}} </form> </div> </div> </div> </div> </script>   <script type="text/template" id="AddCameraMessageView-template"> <header class="widget-title"><i class="icon-bullhorn"></i> <span><%= this.t('Add Cameras') %></span></header> <div class="widget-content clearfix" id="AddCameraMessage">  <div class="row-fluid"> <p><%= this.t('No cameras detected by the Bridge.') %></p> <p><%= this.t('Please connect your cameras to the CAMLAN port on the Bridge and make sure they have power.') %></p> </div> <div id="quick-install-cameras-img" class="row-fluid"> </div> </div> </script>  <script type="text/template" id="AddCamerasWrapView-template"> <div class="container-fluid"> <article class="row-fluid"> <div id="add-view-recently-added"></div> <div id="available-cameras-component"></div> </article> </div> </script>  <script type="text/ractive" id="AddCameraViewComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-facetime-video"></i> {{translateText('Available Devices')}} {{#if ui.show_toggle_upnp}} <i class="icon-plus-sign add-icon-gray pull-right {{#if ui.show_upnp}}icon-plus-sign {{else}} icon-minus-sign{{/if}}" title="{{translateText('Show/Hide UPNP devices')}}" on-click="@this.toggleUPNP()" style="margin-left:10px"> </i> {{/if}} {{#if account.is_rtsp_cameras_enabled && user.checkAddDeleteDevices()}} <i class="icon-plus-sign add-icon pull-right orange" on-click="@this.addRtspCamera()" title="{{translateText('Add RTSP Camera by IP Address')}}"></i> {{/if}} {{#if search.enabled}} <div class="widget-search pull-right no-pad"> <div class="pull-left"> <input class="pull-left" value="{{search.value}}" maxlength="100" placeholder="Search" autocomplete="off" type="text"> </div> </div> {{/if}} {{#if pagination.enabled}} <div class="widget-pagination pull-right"> <div class="pull-right btn-group"> <button class="btn btn-info btn-mini" on-click="@this.paginationStart()"> <i class=" icon-step-backward"></i> </button> <button class="btn btn-info btn-mini" on-click="@this.paginationPrevPage()"> <i class=" icon-chevron-left"></i> </button> <button class="btn btn-info btn-mini" on-click="@this.paginationNextPage()"> <i class=" icon-chevron-right"></i> </button> <button class="btn btn-info btn-mini" on-click="@this.paginationEnd()"> <i class=" icon-step-forward"></i> </button> </div> <p class="pag-num-text pull-right"> {{! TODO: add helper function for translating strings with placeholders like this }} {{pagination.start}} - {{pagination.end}} {{translateText('of')}} {{pagination.total}} </p> </div> {{/if}} </header> <div class="widget-content"> {{#if user.checkAddDeleteDevices()}} <table class="table table-striped">  {{#if isLoading}} <thead> <tr> <th id='available-camera-table-status' style="width:7%">{{translateText('Status')}}</th> <th id='available-camera-table-name' style="width:52%">{{translateText('Name')}}</th> <th id='available-camera-table-bridge' style="width:21%">{{translateText('Bridge')}}</th> <th style="width:20%">{{translateText('Actions')}}</th> </tr> </thead> <tbody> <tr> <td> <box class="shine"></box> </td> <td> <longLines class="shine"></longLines> </td> <td> <shortLines class="shine"></shortLines> </td> <td> <boxTwo class="shine"></boxTwo> <boxTwo class="shine"></boxTwo> </td> </tr> </tbody> {{elseif cameras}} <thead> <tr> <th id='available-camera-table-status' style="width:7%">{{translateText('Status')}}</th> <th id='available-camera-table-name' style="width:52%">{{translateText('Name')}}</th> <th id='available-camera-table-bridge' style="width:21%">{{translateText('Bridge')}}</th> <th style="width:20%">{{translateText('Actions')}}</th> </tr> </thead> <tbody> {{#each cameras as camera}} {{#if camera.deviceStatus === 'IGND' && !(ui.show_upnp && camera.deviceUPNP)}} <tr> <td class="{{#unless account.is_rtsp_cameras_enabled || camera.deviceSupported}}dim-row{{/unless}}"> {{#if camera.deviceConnect.connect == "PASS"}} <i class="icon-lock red big-icon"></i> {{else}} <i class="icon-question-sign orange big-icon"></i> {{/if}} </td> <td class="camera-available-description {{#unless account.is_rtsp_cameras_enabled || camera.deviceSupported}}dim-row{{/unless}}"> {{getDeviceDescription(camera)}} {{#if camera.deviceOwner}} <div class="camera-available-description-more"> {{getAttachedDescription(camera)}} </div> {{/if}} </td> <td class="{{#unless account.is_rtsp_cameras_enabled || camera.deviceSupported}}dim-row{{/unless}}"> {{#each camera.deviceBridges}} {{#unless @index === 0}}, {{/unless}}{{getBridgeName(this[0])}} {{/each}} </td> <td> {{! ACTIONS COLUMN }} {{#if !camera.deviceSupported}} {{! RTSP/SUPPORT BUTTON }} {{#if account.is_rtsp_cameras_enabled}} <button type="button" on-click="@this.addRtspCamera(camera)" class="orange" title="{{translateText('add camera to account using RTSP')}}" data-testid="add-rtsp-camera-{{ camera.deviceGUID }}" > <i class="icon-plus"></i> </button> {{/if}} <button type="button" on-click="@this.sendFeedback(camera)" title="{{translateText('request support for this camera')}}" data-testid="send-feedback-{{ camera.deviceGUID }}" > <i class="icon-envelope"></i> </button> {{else}} {{! ADD CAMERA BUTTON }} <span class="attach-available-camera"> {{#if camera.deviceBridges.length > 1}} <ul class="dropdown-menu" role="menu"> {{#each camera.deviceBridges}} <li> <a href="javascript:void(0);" data-testid="add-device-{{ camera.deviceGUID }}" {{#if camera.deviceType === 'speaker'}} on-click="@this.addSpeaker(camera, this[0])" {{elseif camera.deviceOwner}} on-click="@this.stealCameraModal(camera, this[0])" {{else}} on-click="@this.addCameraModal(camera, null, this[0])" {{/if}}> {{getBridgeName(this[0])}} </a> </li> {{/each}} </ul> <button type="button" class="dropdown-toggle green" data-toggle="dropdown" data-testid="add-dropdown-{{ camera.deviceGUID }}" {{#if camera.deviceType === 'speaker'}} title="{{translateText('add speaker to account')}}" {{else}} title="{{translateText('add camera to account')}}" {{/if}}> <i class="icon-plus"></i> </button> {{else}} <button type="button" class="green" data-testid="add-device-{{ camera.deviceGUID }}" {{#if camera.deviceType === 'speaker'}} on-click="@this.addSpeaker(camera, null)" {{elseif camera.deviceOwner}} {{! Case where camera is attached to another account/bridge on the same network. Should be the same or similar to one for additional green text.}} on-click="@this.stealCameraModal(camera, camera.deviceBridges[0][0])" {{else}} on-click="@this.addCameraModal(camera, null, camera.deviceBridges[0][0])" {{/if}} {{#if camera.deviceType === 'speaker'}} title="{{translateText('add speaker to account')}}" {{else}} title="{{translateText('add camera to account')}}" {{/if}} > <i class="icon-plus"></i> </button> {{/if}} </span> {{/if}} {{! VPN TUNNEL BUTTON }} {{#if user.checkDeviceVPN(this) && !this.isCloudCamera() && !this.isAnalog() && !this.isChildCamera()}} <button type="button" on-click="@this.openVPN(camera)" data-testid="open-vpn-{{ camera.deviceGUID }}" {{#if camera.deviceType === 'speaker'}} title="{{translateText('open VPN to speaker')}}" {{else}} title="{{translateText('open VPN to camera')}}" {{/if}} > <i class="een-icon-tunnel"></i> </button> {{/if}} {{! REPLACE CAMERA BUTTON }} {{#if camera.getReplaceableCameras().length && camera.deviceType !== 'speaker'}} <span class="replace-camera"> <ul class="dropdown-menu" role="menu"> {{#each getCameraReplacements(camera) as replacement}} <li> <a href="#" on-click="@this.addCameraModal(camera, replacement.replace_id, camera.deviceBridges[0][0])"> {{replacement.replace_name}} </a> </li> {{/each}} </ul> <button type="button" data-toggle="dropdown" class="dropdown-toggle replace" data-testid="replace-camera-dropdown-{{ camera.deviceGUID }}" title="{{translateText('replace camera')}}" > <i class="icon-exchange"></i> </button> </span> {{/if}} </td> </tr> {{/if}} {{/each}} </tbody> {{else}} <thead> <tr> <th id='available-camera-table-status' style="width:7%">{{translateText('Status')}}</th> <th id='available-camera-table-name' style="width:52%">{{translateText('Name')}}</th> <th id='available-camera-table-bridge' style="width:21%">{{translateText('Bridge')}}</th> <th style="width:20%">{{translateText('Actions')}}</th> </tr> </thead> <tbody> <tr> <td colspan=4> <div class="well text-center"> {{translateText('If you are adding a camera or speaker and do not see it displayed here, please check your device and ensure ONVIF is enabled with proper username and password.')}} </div> </td> </tr> </tbody> {{/if}} </table> {{else}} <p class="text-center">{{translateText('You do not have permission to add cameras.')}}</p> {{/if}} </div> </div> </script>   <script type="text/ractive" id="AddedRecentlyComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-time"></i> {{translateText('Recently Added Devices')}} </header> <div class="widget-content"> {{#if cameras.length > 0}} <table class="table table-striped"> <thead> <tr> <th id='available-camera-table-status' style="width:7%">{{translateText('Status')}}</th> <th id='available-camera-table-name' style="width:52%">{{translateText('Name')}}</th> <th id='available-camera-table-bridge' style="width:21%">{{translateText('Bridge')}}</th> <th style="width:20%">{{translateText('Actions')}}</th> </tr> </thead> <tbody> {{#each cameras as camera}} {{#with ~/user}} <tr> <td> {{#if camera.deviceType === 'mca_camera'}} {{> partial-mca-camera-status}} {{else}} {{> partial-camera-status}} {{/if}} </td> <td> {{camera.deviceName}} <span class="text-dimmed">({{camera.deviceID}})</span> </td> <td> {{getBridgeName(camera.deviceBridges[0][0])}} </td> <td> {{#if user.checkDeviceUpdate(camera) && user.checkPTZOnlyShowSettings(camera)}} <button type="button" on-click="@this.openCameraSettings(camera)" title="{{translateText('change camera settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkDeviceVPN(camera) && !camera.isCloudCamera() && !camera.isParentCamera() && !camera.isAnalog() && !camera.isChildCamera()}} <button type="button" on-click="@this.openVPN(camera)" title="{{translateText('open VPN to camera') }}"> <i class="een-icon-tunnel"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" on-click="@this.deleteCamera(camera)" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </tr> {{/with}} {{/each}} </tbody> </table> {{else}} <p class="text-center">{{translateText('No recently added devices.')}}</p> {{/if}} </div> </div> </script>   <script type="text/ractive" id="DirectCamera-template"> <div class="container-fluid"> <div class="widget-content"> <div class="row-fluid"> <div class="span12"> <div class="span8 offset2"> <form class="form-horizontal"> <p class="help-block">{{translateText('Camera Name')}}</p> <input type="text" maxlength="60" id="cameraName" placeholder={{translateText('Camera Name')}} value="{{camera.name}}"> <p class="help-block">{{translateText('MAC Address')}}</p> <input type="text" id="macAddress" placeholder={{translateText('MAC Address')}} on-input="processHardwareId" value="{{camera.hardware_id}}"> </form> </div> </div> </div> </div> </div> </script>   <script type="text/ractive" id="AddDistributorUser-template"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{{translateText('Email')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span10"> <input class="span12" value="{{email}}" type="email" maxlength="60" id="addUserEmail" placeholder="{{{translateText('Email')}}}"/> </div> </div> </div> </div> <div class="control-group"> <label class="control-label">{{{translateText('Name')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input type="text" class="span12" value="{{first_name}}" maxlength="60" id="addUserFirstName" placeholder="{{{translateText('First Name')}}}"/> </div> <div class="span5"> <input type="text" class="span12" value="{{last_name}}" maxlength="60" id="addUserLastName" placeholder="{{{translateText('Last Name')}}}"/> <div> </div> </div> </div> </form> </script>   <script type="text/template" id="AddMultiviewCameraView-template"> <span class="modal-heading-append"></span> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3 id="addMultiviewCamera__title"></h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Camera Name') %>:</label> <div class="controls"> <div class="row-fluid"> <input type="text" class="span4" id="addMultiviewCamera__name" value="" disabled/> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Tags') %>:</label> <div class="controls"> <div class="row-fluid"> <input name="tags" class="span8" id="addMultiviewCamera__tags" value="" disabled/> </div> </div> </div> <div class="control-group"> <label class="control-label" id="addMultiviewCamera__views_label" for="" ><%= this.t('Views') %>:</label> <div class="controls"> <input type="checkbox" name="Select All" id="addMultiviewCamera__all_channels"> <p class="addMultiviewCamera__channel_label" id="addMultiviewCamera__all_channels_label"><%= this.t('Select All') %></p> <hr id="addMultiviewCamera__channel_sep_line"> <div id="addMultiviewCamera__first_channel_col" class="addMultiviewCamera__channel_column"> </div> <div id="addMultiviewCamera__second_channel_col" class="addMultiviewCamera__channel_column"> </div> </div> </div> </div> <div class="span12" id="addMultiviewCamera__crendentials_prompt"> <p><%= this.t('A Username and Password are needed to communicate with this camera.') %></p> <div class="controls"> <div class="row-fluid"> <input id="addMultiviewCamera__username" class="span6" type="text" maxlength="40" placeholder="<%= this.t('Username') %>" value=""> <input id="addMultiviewCamera__password" class="span6" type="password" maxlength="40" placeholder="<%= this.t('Password') %>" value=""> </div> </div> <button class="btn btn-info" id="addMultiviewCamera__saveCredentials"><%= this.t('Save and Try Again') %></button> </div> </div> </div> <div class="modal-footer"> <p id="addMultiviewCamera__Response" class="red"></p> <p id="addMultiviewCamera__Response2" class="red"></p> <button class="btn btn-success" id="addMultiviewCamera__save"><%= this.t('Save') %></button> </div> </script>   <script type="text/ractive" id="addNewCamera-template"> <div class="modal-content add-new-camera-component"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3> {{#if is_replace}} {{translateText('Replace Camera')}} {{else}} {{translateText('Add Camera')}} {{/if}} {{#if ui.description}} // {{ui.description}}{{/if}} </h3> </div> <div class="modal-body"> {{#if is_replace}} {{{ui.replace_message}}} {{else}} <div class="row-fluid"> <div class="span6"> <div class="control-group"> <label class="control-label">{{translateText('Camera name')}}:</label> <div class="controls"> <input type="text" value="{{camera_input.name}}"> </div> </div> <SelectScene scene="{{camera_input.scene}}" is_mca="{{ui.is_mca_camera}}"></SelectScene> </div> <div class="span6"> {{#if ui.is_cmvr}} <div class="control-group" title="{{translateText('Cloud Preview Only (PR1)')}}"> <label for="add_camera_preview_only_cloud_retention" class="control-label">{{translateText('Cloud Preview Only (PR1)')}}:</label> <div class="controls"> <input type="checkbox" id="add_camera_preview_only_cloud_retention" checked="{{camera_input.preview_only_cloud_retention}}"/> </div> </div> {{/if}} <div class="control-group"> <label class="control-label">{{translateText('Cloud Retention')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{camera_input.cloud_retention}}"> <option value="" disabled selected hidden> -- </option> {{#if !!camera_input.preview_only_cloud_retention && ui.is_cmvr}} <option value="1">1 {{translateText('day')}} (M10)</option> {{else}} <option value="1">{{translateText('None')}} (M10)</option> {{/if}} <option value="2">2 {{translateText('days')}}</option> <option value="3">3 {{translateText('days')}}</option> <option value="5">5 {{translateText('days')}}</option> <option value="7">7 {{translateText('days')}}</option> <option value="14">14 {{translateText('days')}}</option> <option value="20">20 {{translateText('days')}}</option> <option value="28">28 {{translateText('days')}}</option> <option value="30">30 {{translateText('days')}}</option> <option value="31">31 {{translateText('days')}}</option> <option value="60">60 {{translateText('days')}}</option> <option value="90">90 {{translateText('days')}}</option> <option value="180">180 {{translateText('days')}}</option> <option value="365">1 {{translateText('Year')}}</option> <option value="730">2 {{translateText('Years')}}</option> <option value="1095">3 {{translateText('Years')}}</option> <option value="1825">5 {{translateText('Years')}}</option> </select> </div> </div> {{#if ui.is_cmvr}} <div class="control-group"> <label class="control-label">{{translateText('Maximum On Premise Retention')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{camera_input.local_retention}}" > <option value="" disabled selected hidden> -- </option> <option value="0">{{translateText('None')}}</option> <option value="1">1 {{translateText('day')}}</option> <option value="2">2 {{translateText('days')}}</option> <option value="3">3 {{translateText('days')}}</option> <option value="5">5 {{translateText('days')}}</option> <option value="7">7 {{translateText('days')}}</option> <option value="14">14 {{translateText('days')}}</option> <option value="20">20 {{translateText('days')}}</option> <option value="28">28 {{translateText('days')}}</option> <option value="30">30 {{translateText('days')}}</option> <option value="31">31 {{translateText('days')}}</option> <option value="45">45 {{translateText('days')}}</option> <option value="60">60 {{translateText('days')}}</option> <option value="90">90 {{translateText('days')}}</option> <option value="180">180 {{translateText('days')}}</option> <option value="365">1 {{translateText('Year')}}</option> </select> </div> </div> {{/if}} </div> </div> <div class="control-group"> <label class="control-label" for="">{{translateText('Tags')}}:</label> <div class="controls"> <input name="tags" class="span8" id="add-camera-tags" value=""> </div> </div> <p>{{translateText('Add username and password')}} <span class="text-dimmed">({{translateText('optional')}})</span></p> <div class="controls"> <div class="row"> <input class="col-auto" type="text" maxlength="40" placeholder="{{translateText('Username')}}" value="{{camera_input.username}}" autocomplete="off"> <input id="addCamera__onvifp" class="col-auto input-password" type="text" maxlength="40" placeholder="{{translateText('Password')}}" value="{{camera_input.password}}" autocomplete="off"> </div> </div> {{#if location_feature_status}} <p>{{translateText('Location')}}</p> <div class="controls"> <div class="row-fluid"> <div class="span6"> <LocationSelect onSelect='{{onLocationSelect}}' is_no_location_visible="true" should_select_default_location="true" data_test_id="modal-add-camera-form-select-location" /> </div> <div class="span2 location-add-button-center"> <LocationAddButton beforeOpen='{{hideCameraModal}}' onResult='{{onAddNewLocation}}'/> </div> </div> </div> {{/if}} {{/if}} </div> <div class="modal-footer"> <p class="red">{{ui.message}}</p> <p class="red">{{ui.message2}}</p> <button type="button" class="btn btn-warning" data-dismiss="modal">{{translateText('Cancel')}}</button> <button type="button" class="btn btn-success" on-click="@this.save()">{{translateText('Save')}}</button> </div> </div> </script>   <script type="text/template" id="AddRtspCameraView-template"> <span class="modal-heading-append"></span> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3><%= this.t('Add RTSP Camera') %></h3> </div> <div class="modal-body add-rtsp-camera-component"> <div class="row-fluid"> <div class="span12"> <div class="span10 offset1">  <span class="pull-right" id="addRtspCameraHelp" data_link="camera_add_rtsp"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <p class="help-block"><%= this.t('Connect to Bridge') %></p> <select id="addRtspCameraToBridge" class="span6"> <%if(model){%> <% _.each(model.get('deviceBridges'), function(item) { %> <option value="<%= item[0] %>"><%- bridgeList.findByDeviceID(item[0]).get('deviceName') %></option> <% }) %> <%}else{%> <% _.each(bridgeList.models, function(item) { %> <option value="<%= item.get('deviceID') %>"><%- item.get('deviceName') %></option> <% }) %> <% } %> </select> <p class="help-block"><%= this.t('Camera Name') %></p> <input type="text" class="span6" maxlength="60" id="addRtspCameraName" placeholder="<%= this.t('Camera Name') %>"> <span style="<%=(model && model.isAnalog() ? 'display:none;' : '')%>"> <p style="margin-top:10px;" class="help-block"><%= this.t('Login (optional)') %></p> <input type="text" class="span5" maxlength="40" id="addRtspCameraUsername" placeholder="<%= this.t('Username') %>"> <input type="text" class="span5" maxlength="40" id="addRtspCameraPassword" placeholder="<%= this.t('Password') %>"> </span> <%if(!model || !model.get('deviceSupported')){%> <p style="margin-top:10px;" class="help-block">RTSP</p> <%if(!model){%> <input type="text" class="span6" maxlength="15" id="addRtspCamera__rtsp_ip_address" placeholder="<%= this.t('IP Address') %>" style="margin-bottom:5px"/> <%}%> <input type="checkbox" name="Dual Stream" id="dual-stream-checkbox"> <p id="dual-stream-txt"><%= this.t('Dual Stream') %></p><br> <input type="text" class="span6" maxlength="200" id="addRtspCamera__rtsp_video_resource" placeholder="<%= this.t('Video Resource URL (H264)') %>"/> <input type="text" class="span6" maxlength="200" id="addRtspCamera__rtsp_preview_resource" placeholder="<%= this.t('Preview Resource URL (MJPEG)') %>"/> <div class="span6 help-block" style="margin-top:2px;margin-left:0px"><em><%= this.t('Examples:') %></em><br/> "snl/live/1/1/Ux/", "live.sdp", "h264"</div> <div id="mjpeg-examples" class="span6 help-block" style="margin-top:2px;margin-left:0px"><em><%= this.t('Examples:') %></em><br/> "snl/live/1/2/Ux/", "live2.sdp", "jpeg"</div> <% if(userList.getCurrentUser().checkFeatureFlag('location_groups') && userList.getCurrentUser().checkEditLocationGroup()) { %> <p class="help-block location"><%= this.t('Location') %></p> <div class="row flex-modal"> <div id="addRtspCamera__location_select" class="span6"></div> <div id="addRtspCamera__location_add_button"></div> </div> <% } %> <p id="dual-stream-checkbox-warning" class="red hide" style="margin-top: 10px"> <%= this.t('Please be aware that 1 single stream RTSP camera takes up the same amount of bridge resources as 4 dual stream cameras. Because of this it is very easy to overload the bridge.') %> </p> <%}%> </form> </div> </div> </div> </div> <div class="modal-footer"> <p id="addRtspCameraResponse" class="red"></p> <p id="addRtspCameraResponse2" class="red"></p> <button class="btn btn-warning" data-dismiss="modal"><%= this.t('Cancel') %></button> <button class="btn btn-success" id="addRtspCameraButton"><%= this.t('Add Camera') %></button> </div> </script>   <script type="text/template" id="AddSpeakerView-template"> <span class="modal-heading-append"></span> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3><%= this.t('Add Speaker') %></h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span10 offset1">  <span class="pull-right" id="addSpeakerHelp" data_link="speaker_add"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <% if (false) {%>  <p class="help-block"><%= this.t('Available Speakers') %></p> <select id="addSpeakerGUID" class="span6" <%=(availableCamerasList.filterAvailableSpeakers().length === 0 ? 'disabled' : '')%> > <%if(availableCamerasList.filterAvailableSpeakers().length != 0){%> <% _.each(availableCamerasList.filterAvailableSpeakers(), function(item) { %> <option value="<%= item.get('deviceGUID') %>"><%- item.get('deviceName') %></option> <% }) %> <%}else{%> <option value=""><%- this.t('No Available Speaker') %></option> <%}%> </select> <input type="checkbox" name="Add IP Speaker" id="add-ip-speaker-checkbox"> <p id="add-ip-speaker-txt"><%= this.t('Add IP Speaker') %></p> <p class="help-block" id="addSpeakerToBridge-text"><%= this.t('Connect to Bridge') %></p> <select id="addSpeakerToBridge" class="span6"> <% _.each(bridgeList.models, function(item) { %> <option value="<%= item.get('deviceID') %>"><%- item.get('deviceName') %></option> <% }) %> </select> <p class="help-block" id="addSpeakerIpAddress-text"><%= this.t('IP Address') %></p> <input type="text" class="span6" maxlength="60" id="addSpeakerIpAddress" placeholder="<%= this.t('IP Address') %>"> <%}%> <p class="help-block"><%= this.t('Speaker Name') %></p> <input type="text" class="span6" maxlength="60" id="addSpeakerName" value="<%= this.getNewSpeakerName() %>">   <span> <p style="margin-top:10px;" class="help-block"><%= this.t('Speaker Login (optional)') %></p> <input type="text" class="span5" maxlength="40" id="addSpeakerUsername" placeholder="<%= this.t('Username') %>"> <input type="text" class="span5" maxlength="40" id="addSpeakerPassword" placeholder="<%= this.t('Password') %>"> </span> </form> </div> </div> </div> </div> <div class="modal-footer"> <p id="addSpeakerResponse" class="red"></p> <p id="addSpeakerResponse2" class="red"></p> <button class="btn btn-warning" data-dismiss="modal"><%= this.t('Cancel') %></button> <button class="btn btn-success" id="addSpeakerButton"><%= this.t('Add Speaker') %></button> </div> </script>   <script type="text/ractive" id="AddUser-template"> <div class="tabbable"> <ul class="nav nav-tabs"> {{#each nav_tabs}} <li class="{{#if active_id===id}}active{{/if}}"> <a href="#{{id}}" data-toggle="tab" on-click="@this.setActiveTab(id)"> {{{label}}} </a> </li> {{/each}} </ul> <div class="tab-content"> <TabPane id="addUser-general-tab" active_id="{{active_id}}"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{{translateText('Email')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span10"> <input class="span12" value="{{email}}" type="email" maxlength="60" id="addUserEmail" placeholder="{{{translateText('Email')}}}"/> </div> </div> </div> </div> <div class="control-group"> <label class="control-label">{{{translateText('Name')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input type="text" class="span12" value="{{first_name}}" maxlength="60" id="addUserFirstName" placeholder="{{{translateText('First Name')}}}"/> </div> <div class="span5"> <input type="text" class="span12" value="{{last_name}}" maxlength="60" id="addUserLastName" placeholder="{{{translateText('Last Name')}}}"/> </div> </div> </div> </div> {{#if show_copy_permissions}} <div class="control-group"> <label class="control-label" for="addUser__permissions">{{translateText('Clone permissions from')}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span10"> <select id="addUser__permissions" class="span12" data-placeholder="{{translateText('Select a user to clone')}}"> <option value=""></option> {{#each userList}} <option value="{{ attributes.id }}">{{ attributes.first_name + " " + attributes.last_name}}</option> {{/each}} </select> </div> </div> {{#if copy_permission_error}} <p class="copy-permissions__error red">{{translateText('Unable to copy permissions')}}!</p> {{/if}} </div> </div> {{/if}} </form> </TabPane> <TabPane id="addUser-permissions-tab" active_id="{{active_id}}"> {{#if reloadUserPermissions}} <UserPermissionsComponent user_model="{{final_permissions}}"/> {{/if}} </TabPane> <TabPane id="addUser-access-tab" active_id="{{active_id}}"> <GeneralAccessComponent user_model="{{defaults}}"/> </TabPane> {{#if is_master}} {{#if reloadUserPermissions}} <TabPane id="addUser-accounts-tab" active_id="{{active_id}}"> <AccountAccessComponent user_model="{{final_permissions}}" available_account_models="{{available_account_models}}" is_new_user="true" is_copied_permissions="{{is_copied_permissions}}"/> </TabPane> {{/if}} {{/if}} {{#if reloadUserPermissions}} <TabPane id="addUser-locations-tab" active_id="{{active_id}}"> <LocationAccessComponent user_model="{{final_permissions}}" is_new_user="true" is_copied_permissions="{{is_copied_permissions}}"/> </TabPane> <TabPane id="addUser-cameras-tab" active_id="{{active_id}}"> <CameraAccessComponent user_model="{{final_permissions}}" available_camera_models="{{available_camera_models}}" is_new_user="true" is_copied_permissions="{{is_copied_permissions}}"/> </TabPane> <TabPane id="addUser-layouts-tab" active_id="{{active_id}}"> <LayoutAccessComponent user_model="{{final_permissions}}" available_layout_models="{{available_layout_models}}" is_new_user="true" is_copied_permissions="{{is_copied_permissions}}"/> </TabPane> {{/if}} </div> </div> </script>   <script type="text/ractive" id="AlertEditor-template"> <tr> <td colspan="{{colspan}}" class="{{active ? 'focus-alert' : 'not-active'}}"> <i on-click="close" style="margin-right: 20px;" class="pull-right icon-chevron-up"></i> <div class="span7 alert-column"> <div class="span12 height-0">  </div> <div class="span12"> <label class="span5 control-label" for="editCamera__motion_alert"> {{ translateText('Enable Alerts') }}: </label> <div class="span1 text-left"> <input type="checkbox" class="alert-active" on-click="save" checked="{{is_active}}" twoway="false"/> </div> </div> <div class="span12"> <label class="span5 control-label" for=""> {{ translateText('When') }}: </label> <div class="row-fluid control-group span7"> <select class="span12 when" value="{{['*', 'work', 'nonwork'].indexOf(when) > -1 ? when : 'custom'}}" twoway="false" disabled="{{model.isCloudCamera()}}"> <option value="*">{{ translateText('24 hours') }}</option> <option value="work">{{ translateText('Work hours')}} ({{getWorkHours()}})</option> <option value="nonwork">{{ translateText('Non-work hours') }}</option> <option value="custom">{{ translateText('Custom hours') }}</option> </select> </div> </div> {{#if ['*', 'work', 'nonwork'].indexOf(when) === -1}} <TimeSlider start="{{when_start}}" end="{{when_end}}" on-change="save"></TimeSlider> {{/if}} <div class="span12 shorten"> <label class="span5 control-label" for="editCamera__motion_alert_throttle_none"> {{ translateText('Re-arm') }}: </label> <div class="span7"> <div class="span12"> <div class="span6"> <select class="span12 throttle_type" value="{{throttle_type}}" twoway="true"> <option value="1"> {{ translateText('Immediate') }} </option> <option value="2"> {{ translateText('After') }} </option> <option value="3"> {{ translateText('After quiet for') }} </option> </select> </div> <div class="span6"> <div class="span6"> <input type="number" min="1" style="height: 25px;" class="span12 throttle_seconds" maxlength="5" name="{{throttle_type}}" value="{{parseInt(throttle_type) === 1 ? '' : typeof throttle_seconds === 'number' ? throttle_seconds / 60 : 15 }}" twoway="false" {{#if (parseInt(throttle_type) === 1)}}disabled{{/if}}> </div> <div class="span6" style="margin-top:5px">{{ translateText('minutes') }}</div> </div> </div> </div> </div> <div class="span12"> <label class="span5 control-label" for="motion_alert_throttle_hour_limit"> {{ translateText('Max Per Hour') }}: </label> <div class="span7" style="text-align: left"> <input type="text" style="height: 25px;" class="span3 throttle_hour_limit" maxlength="3" twoway="false"name="editCamera__motion_alert_throttle_hour_limit" value="{{typeof throttle_hour_limit === 'number' ? throttle_hour_limit: ''}}"> </div> </div> </div> <div class="span4 alert-column"> <div class="span12">  </div> <div class="span12 css-motion-alert-who"> <label class="span4 control-label" for="editCamera__motion_alert_who"> {{ translateText('Who') }}: </label> <div class="span8"> <select class="span12 motion_alert_who" multiple="multiple"> <option value="select-all-option">All</option> {{#each users}} <option value="{{ this.get('id') }}">{{this.getDisplayName(true)}}</option> {{/each}} </select> </div> </div> <div class="span12 css-motion-alert-mode"> <label class="span4 control-label" for="motion_alert_mode"> {{ translateText('Mode') }}: </label> <div class="span8"> <select class="span12 motion_alert_mode" multiple="multiple"> <option value="select-all-option">All</option> {{#each account_alert_modes}} <option value="{{ this }}">{{ this }}</option> {{/each}} </select> </div> </div> <div class="span12"> <label class="span4 control-label" for="editCamera__motion_alert_level"> {{ translateText('Level') }}: </label> <div class="span4"> <select class="span12 level" name="motion_alert_level" value="{{level}}" twoway="false"> <option value="1">{{ translateText('High') }}</option> <option value="2">{{ translateText('Low') }}</option> </select> </div> </div> </div> {{#if @global.smart_alerts && @global.smart_alerts.isSmartAlertsAvailable(@this.get('smart_alerts_source_alert'))}} <div class="span7 alert-column"> <div class="span12 height-0">  </div> <div class="span12"> <label class="span5 control-label" for="editCamera__motion_smart_alert"> {{ translateText('Enable AI Filtering') }}: </label> <div class="span1 text-left"> <input type="checkbox" class="smart-alert-active" on-click="save" checked="{{ is_smart_alerts_active }}" twoway="false"/> </div> </div> <div class="span12 css-smart-alert-types"> <label class="span5 control-label"> {{ translateText('Detect') }}: </label> <div class="span5"> <div class="span12 smart-alert-types"> {{#each available_smart_alerts_types}} <label> <input type="checkbox" data-smart-alert-type="{{this.property}}" checked="{{enabled_smart_alerts_types.indexOf(this.property) > -1}}" on-click="save" /> {{ this.label }} </label> {{/each}} </div> </div> </div> {{#each available_smart_alerts_types}} <div class="row-fluid advanced_options"> <div class="span12"> <label class="span5 control-label"> {{ this.label}} {{translateText('Detection Confidence') }}: </label> <div class="span7"> <SmartAlertSlider min="0" max="100" id="{{ this.property }}" roiid="{{roiid}}" step="1"></SmartAlertSlider> </div> </div> </div> {{/each}} </div> {{/if}} </td> </tr> </script>   <script type="text/ractive" id="AnalyticAlertEditor-template"> <tr> <td colspan="{{colspan}}" class="{{active ? 'focus-alert' : 'not-active'}}"> <i on-click="close" style="margin-right: 20px;" class="pull-right icon-chevron-up"></i> <div class="span7 alert-column"> <div class="span12 height-0">  </div> <div class="span12"> <label class="span5 control-label" for="editCamera__analytic_alert"> {{ translateText('Enable Alerts') }}: </label> <div class="span1 text-left"> <input type="checkbox" class="alert-active" on-click="save" checked="{{is_active}}" twoway="false"/> </div> </div> <div class="span12"> <label class="span5 control-label" for=""> {{ translateText('When') }}: </label> <div class="row-fluid control-group span7"> <select class="span12 when" value="{{['*', 'work', 'nonwork'].indexOf(when) > -1 ? when : 'custom'}}" twoway="false"> <option value="*">{{ translateText('24 hours') }}</option> <option value="work">{{ translateText('Work hours')}}({{getWorkHours()}})</option> <option value="nonwork">{{ translateText('Non-work hours') }}</option> <option value="custom">{{ translateText('Custom hours') }}</option> </select> </div> </div> {{#if ['*', 'work', 'nonwork'].indexOf(when) === -1}} <TimeSlider start="{{when_start}}" end="{{when_end}}" on-change="save"></TimeSlider> {{/if}} <div class="span12"> <label class="span5 control-label" for="editCamera__analytic_alert_throttle_none"> {{ translateText('Re-arm') }}: </label> <div class="span7"> <div class="span12"> <div class="span6"> <select class="span12 throttle_type" value="{{throttle_type}}" twoway="true"> <option value="1"> {{ translateText('Immediate') }} </option> <option value="2"> {{ translateText('After') }} </option> <option value="3"> {{ translateText('After quiet for') }} </option> </select> </div> <div class="span6"> <div class="span6"> <input type="number" min="1" style="height:25px;" class="span12 throttle_seconds" maxlength="5" name="{{throttle_type}}" value="{{parseInt(throttle_type) === 1 ? '' : typeof throttle_seconds === 'number' ? throttle_seconds / 60 : 15 }}" twoway="false" {{#if (parseInt(throttle_type) === 1)}}disabled{{/if}}> </div> <div class="span6" style="margin-top:5px">{{ translateText('minutes') }}</div> </div> </div> </div> </div> <div class="span12"> <label class="span5 control-label" for="analytic_alert_throttle_hour_limit"> {{ translateText('Max Per Hour') }}: </label> <div class="span7" style="text-align: left"> <input type="text" style="height: 25px;" class="span3 throttle_hour_limit" maxlength="3" twoway="false"name="editCamera__analytic_alert_throttle_hour_limit" value="{{typeof throttle_hour_limit === 'number' ? throttle_hour_limit: ''}}"> </div> </div> {{#if is_counting}} <div class="span12"> <label class="span3 control-label" for="editCamera__alert_threshold"> {{ translateText('Time Loiter') }}: </label> <div class="span8"> <input type="text" style="height: 25px;" class="span3 threshold_seconds" maxlength="5" value="{{typeof threshold_seconds === 'number'? threshold_seconds / 60 : 15}}" twoway="false"/> </div> </div> <div class="span12"> <label class="span3 control-label" for="editCamera__alert_count"> {{ translateText('Min Count') }}: </label> <div class="span8"> <input type="text" style="height: 29px;" class="span3 count" maxlength="5" value="{{typeof count === 'number'? count / 60 : 15}}" twoway="false"/> </div> </div> {{/if}} {{#if @global.smart_alerts && @global.smart_alerts.isSmartAlertsAvailable(@this.get('smart_alerts_source_alert'))}} <div class="span12"> <label class="span5 control-label"> {{ translateText('Enable AI Filtering') }}: </label> <div class="span1 text-left"> <input type="checkbox" class="smart-alert-active" on-click="save" checked="{{ is_smart_alerts_active }}" twoway="false"/> </div> </div> <div class="span12 css-smart-alert-types"> <label class="span5 control-label"> {{ translateText('Detect') }}: </label> <div class="span5"> <div class="span12 smart-alert-types"> {{#each available_smart_alerts_types}} <label> <input type="checkbox" data-smart-alert-type="{{this.property}}" checked="{{enabled_smart_alerts_types.indexOf(this.property) > -1}}" on-click="save" /> {{ this.label }} </label> {{/each}} </div> </div> </div> {{#each available_smart_alerts_types}} <div class="row-fluid advanced_options"> <div class="span12"> <label class="span5 control-label"> {{ this.label}} {{translateText('Detection Confidence') }}: </label> <div class="span7"> <SmartAlertSlider min="0" max="100" id="{{ this.property }}" roiid="{{roiid}}" step="1"></SmartAlertSlider> </div> </div> </div> {{/each}} {{/if}} </div> <div class="span4 alert-column"> <div class="span12">  </div> <div class="span12 css-motion-alert-who"> <label class="span4 control-label" for="editCamera__analytic_alert_who"> {{ translateText('Who') }}: </label> <div class="span8"> <select class="span12 analytic_alert_who" multiple="multiple"> <option value="select-all-option">{{ translateText('All') }}</option> {{#each users}} <option value="{{ this.get('id') }}">{{this.getDisplayName(true)}}</option> {{/each}} </select> </div> </div> <div class="span12 css-motion-alert-mode"> <label class="span4 control-label" for="analytic_alert_mode"> {{ translateText('Mode') }}: </label> <div class="span8"> <select class="span12 analytic_alert_mode" multiple="multiple"> <option value="select-all-option">{{ translateText('All') }}</option> {{#each account_alert_modes}} <option value="{{ this }}">{{ this }}</option> {{/each}} </select> </div> </div> <div class="span12"> <label class="span4 control-label" for="editCamera__analytic_alert_level"> {{ translateText('Level') }}: </label> <div class="span4"> <select class="span12 level" name="analytic_alert_level" value="{{level}}" twoway="false"> <option value="1">{{ translateText('High') }}</option> <option value="2">{{ translateText('Low') }}</option> </select> </div> </div> {{#if is_show_in_out}} <div class="span12"> <label class="span4 control-label" for="editCamera__alert_on"> {{ translateText('On') }}: </label> <div class="span8"> <div class="span2 dir-container" on-click="toggleAlertOnInOut" data-direction="in" title="{{translateText('on cross in')}}"> <i class="alert-vector-toggle {{alert_on_in ? 'green': 'gray'}} icon-circle-arrow-{{in_vector}}"></i> </div> <div class="span2 dir-container" on-click="toggleAlertOnInOut" data-direction="out" title="{{translateText('on cross out')}}"> <i class="alert-vector-toggle {{alert_on_out ? 'green': 'gray'}} icon-circle-arrow-{{out_vector}}"></i> </div> </div> </div> {{/if}} </div> {{#if is_show_in_out}} {{#if noAlertVectorSet(alert_on_in, alert_on_out)}} <p class="red span12">{{translateText("You must set a direction for line crossing alerts to work.")}}</p> {{/if}} {{/if}} </td> </tr> </script>   <script type="text/ractive" id="EEN-AnnotationsBoxes-template"> {{#each annotations}} {{>box}} {{/each}} {{#partial box}}  <div class="image-annotation-overlay-wrapper" style=" top: {{top}}%; left: {{left}}%; width: {{width}}%; height: {{height}}%; border: {{border_style}};">  {{#label}} <div class="label-wrapper"> {{#label_url}} <a href="{{label_url}}" target="_blank" style="color: {{border_color}};">{{label}}</a> {{/label_url}} {{^label_url}} <p style="color: {{border_color}};">{{label}}</p> {{/label_url}} </div> {{/label}} </div> {{/partial}} </script>   <script type="text/template" id="APIView-template"> <div class="widget"> <header class="widget-title"> <i class="icon-wrench"></i> <%= this.t('API Keys') %> </header> <div class="widget-content clearfix"> <div class="span12" id="video_container"> <table class="table table-striped"> <thead> <th><%= this.t('Status') %></th> <th><%= this.t('App Name') %></th> <th><%= this.t('API Key') %></th> <th><%= this.t('API Secret') %></th> <th><%= this.t('Actions') %></th> </thead> <tbody> <% var self = this %> <% _.each(collection, function(item) { %> <tr> <td><i class="icon-ok-circle green big-icon"></i></td> <td> <li><%- item.get('name') %></li> </td> <td> <li><%- item.get('api_key') %></li> </td> <td> <button class="secret" title="<%= self.t('show API secret') %>"> <i class="icon-lock" data-info="<%= item.get('api_secret') %>"></i> </button> </td> <td> <button class="remove" data-id="<%= item.get('api_key') %>" title="<%= self.t('remove this app') %>"><i class="icon-trash"></i></button> </td> <% }); %> </tbody> </table> <button id="launchAddAPIKeyModal" href="#" class="btn btn-success pull-right" title="<%= this.t('add new app to your account') %>"> <i class="icon-plus-sign"></i> <%= this.t('Get New API Key') %> </button> </div> </div> </div> </script>  <script type="text/template" id="APIWrapView-template"> <div class="container-fluid"> <article class="row-fluid" id="camera-list"> </article> </div> </script>  <script type="text/ractive" id="BandwidthSlider-template"> <div class="row-fluid"> <div class="span6"> <select value="{{curr_mode}}" on-change="setBandwidthMode"> {{#each modes}} <option value="{{value}}">{{translateText(text)}}</option> {{/each}} </select> </div> <div style="display:{{displaySlider(curr_mode)}}"class="span12"> <div class="bw-slider-widget"></div> </div> </div> </script>   <script type="text/ractive" id="BridgeHealth-template"> {{#if show_health && health.message}} <hr class="bridge-health"> <div class="bridge-health"> <i class="icon-exclamation-sign {{icon_class}} big-icon"></i> <div>{{bridge.deviceName}}: {{health.message}}</div> <HelpLink data_link="health_message"/> </div> {{/if}} </script>   <script type="text/template" id="cameraAnalytics-template"> <span class="modal-heading-append"> // <%-model.get('deviceName')%></span> <div class="tab-pane active" id="cameraAnalyticsMotion"> <i class="icon-question-sign help-icon help-icon-activity" data-link="camera_analytics_activity"></i> <i class="icon-refresh chart-refresh"></i> <div id="cameraAnalytics__chart_motion"></div> </div> <div class="tab-pane" id="cameraAnalyticsCounting"> <span class="analytics-legend-button count-in-minus-out" title="<%=utils.t('Difference')%>" > <i class="icon-delta-analytics-button no-border"></i> </span> <span class="analytics-legend-button count-in active" title="<%=utils.t('Count in')%>"> <i class="icon-circle-arrow-right"></i> </span> <span class="analytics-legend-button count-out" title="<%=utils.t('Count Out')%>"> <i class="icon-circle-arrow-left"></i> </span> <i class="icon-question-sign help-icon help-icon-all" data-link="camera_analytics_counting"></i> <div id="cameraAnalytics__chart_counting"></div> </div> <div class="tab-pane" id="cameraAnalyticsCrossing"> <span class="analytics-legend-button count-in-minus-out" title="<%=utils.t('Difference')%>" > <i class="icon-delta-analytics-button no-border"></i> </span> <span class="analytics-legend-button count-in active" title="<%=utils.t('Count in')%>"> <i class="icon-circle-arrow-right"></i> </span> <span class="analytics-legend-button count-out" title="<%=utils.t('Count Out')%>"> <i class="icon-circle-arrow-left"></i> </span> <i class="icon-question-sign help-icon help-icon-all" data-link="camera_analytics_crossing"></i> <div id="cameraAnalytics__chart_crossing"></div> </div> <div class="tab-pane" id="cameraAnalyticsIntrusion"> <i class="icon-question-sign help-icon help-icon-all" data-link="camera_analytics_intrusion"></i> <div id="cameraAnalytics__chart_intrusion"></div> </div> <div class="tab-pane" id="cameraAnalyticsLoitering"> <i class="icon-question-sign help-icon help-icon-all" data-link="camera_analytics_loitering"></i> <div id="cameraAnalytics__chart_loitering"></div> </div> <div class="tab-pane" id="cameraAnalyticsTampering"> <i class="icon-question-sign help-icon help-icon-all" data-link="camera_analytics_tampering"></i> <div id="cameraAnalytics__chart_tampering"></div> </div> </script>   <script type="text/template" id="CameraMapView-template"> <div id="CameraMap__map"></div> </script>  <script type="text/template" id="CameraMapWrapView-template"> <div class="container-fluid"> <article class="row-fluid"> <div id="camera_map_content"> </div> </article> <span class="pull-right" id="map-help" data_link="map_page"> <i class="icon-question-sign een-help-link"></i> </span> </div> </script>  <script type="text/ractive" id="CameraTalkdownUIComponent-template"> <audio id="{{model.id}}-preview-talkdown-audio" autoplay></audio> <div class="icon-container preview-talkdown-icon-container preview-talkdown" id="{{model.id}}-preview-talkdown" style="display: block;" on-click="@this._onTalkdownClick(event)"> <i class="talk-ready fas fa-fw icon-microphone" style="display: none;"></i> <i class="talk-connecting fas fa-fw icon-spinner fa-pulse" style="display: none;"></i> <i class="talk-connected fas fa-fw icon-microphone" style="display: none;"></i> <i class="talk-disconnected fas fa-fw icon-microphone-slash" style="display: none;"></i> </div> <div class="icon-container preview-talkdown-icon-container preview-talkdown-busy" id="{{model.id}}-preview-talkdown-busy" style="display: none;" on-click="@this._onTalkdownBusyClick(event)"> <i class="talk-disconnected fas fa-fw icon-microphone-slash"></i> </div> </script>   <script type="text/template" id="CameraVPNView-template"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3> <% if (model.get('deviceType') === 'speaker') { %> <%= this.t('Launch Speaker Connection') %> <% } else { %> <%= this.t('Launch Camera Connection') %> <% } %> // <%- model.get('deviceName') %> </h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span12"> <p class="help-block"> <% if (model.get('deviceType') === 'speaker') { %> <%= this.t('Please wait while we establish a connection with this speaker') %> <% } else { %> <%= this.t('Please wait while we establish a connection with this camera') %> <% } %> </p> <div class="vpn notes-wrapper"> <label><%=this.t('Notes')%>:</label> <div class="vpn notes-container"></div> </div> <% if(model.get('camera_info') && model.get('camera_info').admin_user ) { %> <p> <dl class="vpn_inline_pairs"><%= this.t('Default Web Username') %>:</dl> <dt class="vpn_inline_pairs"> <%- (model.get('camera_info').admin_user ? model.get('camera_info').admin_user : this.t('not available')) %> </dt> <br> <dl class="vpn_inline_pairs"><%= this.t('Default Web Password') %>:</dl> <dt class="vpn_inline_pairs"> <%- (model.get('camera_info').admin_password ? model.get('camera_info').admin_password : this.t('not available')) %> </dt> </p> <% } %> <% if(model.get('speaker_info') && model.get('speaker_info').admin_user ) { %> <p> <dl class="vpn_inline_pairs"><%= this.t('Default Web Username') %>:</dl> <dt class="vpn_inline_pairs"> <%- (model.get('speaker_info').admin_user ? model.get('speaker_info').admin_user : this.t('not available')) %> </dt> <br> <dl class="vpn_inline_pairs"><%= this.t('Default Web Password') %>:</dl> <dt class="vpn_inline_pairs"> <%- (model.get('speaker_info').admin_password ? model.get('speaker_info').admin_password : this.t('not available')) %> </dt> </p> <% } %> </div> </div> </div> </div> <div class="modal-footer"> <p id="cameraVPNResponse" class="red"></p> <button class="btn btn-warning" data-dismiss="modal">Cancel</button> <button class="btn btn-success" data-dismiss="modal">Close</button> </div> </script>   <script type="text/ractive" id="CameraZoomUIComponent-template"> <i class="zoom-control-toggle icon-resize-vertical {{#if controls_active}}zoom-active{{/if}}" on-click="@this.toggleControls()"></i> {{#if controls_active}} <i class="zoom-control icon-zoom-in" on-click="@this.handleZoomBtns(@event, true)"></i> <div class="zoom-slider"></div> <i class="zoom-control icon-zoom-out" on-click="@this.handleZoomBtns(@event, false)"></i> {{/if}} </script>   <script type="text/template" id="chooseCamerasForLayout-template"> <form class="form-horizontal"> <div class="control-group" id="chooseCameras__list"> <% _.each(collection, function(item) { %> <div class="row-fluid"> <div class="span1 choose-camera-select"> <input type="checkbox" id="checkbox_<%= item.get('deviceID') %>" <%=(!userList.getCurrentUser().checkDeviceRead(item) ? 'disabled' : '')%> /> </div> <div class="span2 choose-camera-image"> <img src="/asset/prev/image.jpeg?id=<%= item.get('deviceID') %>&timestamp=now&asset_class=all" > </div> <div class="span8 choose-camera-filtered" data-is_in_layout="<%=item.get('is_in_layout')%>" data-esn="<%= item.get('deviceID') %>"> <p><%- item.get('deviceName') %></p> <% _.each(item.getCustomTags().sort(), function(tag, index) { %> <%=('<span class="tag"><a>' + _.escape(tag.toLowerCase()) + '</a></span>')%> <% }) %> </div> </div> <% }); %> </div> </form> </script>   <script type="text/ractive" id="NewAddCameras-template"> {{#partial entry}} {{#if !@this.isHidden(this)}} <div class="row-fluid choose-camera" class-choose-camera-in-layout="@this.isHiddenMember(this)" on-click="@this.selectRow(entry_id)"> <div class="span1 choose-camera-select"> <input type="checkbox" value="{{entry_id}}" checked="{{~/selected_cameras[entry_id]}}" {{#if !currentUser().checkDeviceRead(this)}}disabled{{/if}}> </div> <div class="span2 choose-camera-image {{@this.getIconStateClass(~/broken[entry_id], ~/images[entry_id])}}" data-esn="{{entry_id}}"> <img src="{{~/images[entry_id]}}" class="{{#composite_id}}choose-camera-image-{{composite_id}}{{/}} {{#~/images[entry_id]}}active{{/}}" /> <div class="indicator-icon text-warning" title="{{translateText("Unable to load image")}}"> <i class="icon-exclamation-sign"></i> </div> </div> <div class="span8 choose-camera-filtered"> <p>{{#entry_name}}{{entry_name}}{{else}}{{deviceName}}{{/}}</p> {{#each tags}} <span class="tag"><a> {{this.toLowerCase()}} </a></span> {{/each}} </div> </div> {{/if}} {{/partial}} <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{translateText('Filter:')}}</label> <div class="controls"> <input type="text" autocomplete="off" maxlength="100" value="{{filter_search}}" {{^camera_list}}placeholder="No Cameras" disabled{{/}}> </div> </div> <div class="control-group" class-hidden="hideHideCheckbox"> <div class="controls"> <label class="checkbox"> <input type="checkbox" checked="{{hide}}">{{hide_label}} </label> </div> </div> <div class="control-group"> <div class="controls" class-hidden="hideShowComposites"> <label class="checkbox"> <input type="checkbox" checked="{{show_composites}}">{{translateText('Show Viewports Only')}} </label> </div> </div> </form> <div class="choose-camera-select-all"> <a href="#" on-click="select-all">{{translateText('Select All')}}</a> <a href="#" on-click="clear-all">{{translateText('Clear All')}}</a> </div> <div class="een-scroll-box choose-camera-wrapper" as-scrollContainer="'.choose-camera-image', @this.setVisibleCameras, update_sequence"> {{#each lazy_loaded_cameras}} {{#if this.composite}} {{#with [model.deviceID, composite.id].join(':') as entry_id, (model.deviceName + ' (' + ((composite.name) ? composite.name : composite.id) + ')') as entry_name, composite.tags.sort() as tags, composite.id as composite_id}} {{>entry}} {{/with}} {{else}} {{#with deviceID as entry_id, deviceName as entry_name, this.getCustomTags().sort() as tags}} {{>entry}} {{/with}} {{/if}} {{/each}} {{#if cameras && cameras.length > 0 }} {{#if shouldShowFilteredSet()}} {{#if Object.values(filtered_set).length === 0 && !hide }} <div class="empty-set">{{translateText('No Results')}}</div> {{elseif filtered_hidden == true && uiCountValues(hidden_cameras, false) === 0 && hide}} <div class="empty-set">{{translateText('All results hidden')}}</div> {{/if}} {{/if}} {{else}} <div class="empty-set">{{translateText('No cameras')}}</div> {{/if}} <div class="composite-loading {{^dsettings_cnt}}hidden{{/}}"> <img src="/_images/spinning.gif" /> {{translateText('Loading Cameras')}} </div> </div> <div class="choose-camera-summary"> <div class="entry">{{uiCountValues(selected_cameras, true)}} {{translateText('Selected')}}</div> <div class="entry">{{#hide}}{{uiCountValues(hidden_cameras, true)}}{{else}}0{{/}} {{translateText('Hidden')}}</div> <div class="entry">{{#shouldShowFilteredSet()}}{{Object.keys(filtered_set).length}}{{else}}{{cameras.length}}{{/}} {{translateText('Results')}}</div> <div class="entry">{{cameras.length}} Total</div> </div> </script>  <script type="text/template" id="DashWrapView-template"> <div class="container-fluid"> <article class="row-fluid"> <%if (userList.getCurrentUser().get('is_master')) {%> <div id="dashboard-container"> <div class="widget span7" id="translate-accountSummary"> <header class="widget-title"><i class="icon-bar-chart"></i> <span><%=utils.t('Summary')%></span></header> <div class="widget-content clearfix" id="account-summary" style="overflow:hidden"> </div> </div> <div class="widget span5" id="translate-accountNotifications"> <header class="widget-title"><i class="icon-flag"></i> <span> <%=utils.t('System Notifications (last 24 hours)')%></span></header> <div class="widget-content clearfix" id="account-notification"> <div class="account-notification-loading"></div> <table class="table table-striped"> <tbody id='account-notification-rows'> </tbody> </table> </div> </div> </div> <div class="widget" id="translate-accounts"></div> <%} else {%> <div id="sub-account-dash-container"></div> <%if (userList.getCurrentUser().isPaginationEnabled()) {%> <div id="dashboard"></div> <%} else {%> <div id="device-widget-component"></div> <%}%>  <div class="widget" id="translate-addcamera"></div> <div id="shared-cameras-component"></div> <%if(userList.getCurrentUser().checkAddDeleteDevices()){%> <div id="available-cameras-component"></div> <%}%> <div id="switch-list-component"></div> <%}%> </article> </div> </script>  <script id="template-DeleteCamera" type="text/ractive"> <div class="modal-header"> <button type="button" class="close" on-click="close" data-dismiss="modal" aria-hidden="true">×</button> <h3> {{translateText("Delete Camera")}}: {{static_name}} {{#if bridge_name}} {{translateText("on bridge")}} {{bridge_name}}{{/if}} </h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> {{#if !is_proxy}} <p> {{translateText("WARNING: About to delete camera.")}} </p> <p> {{translateText("This will delete the camera completely. No further recordings will be made and ALL video recorded in the cloud and on the local Bridge/CMVR will be deleted. There is NO RECOVERY from this. All the video will be deleted forever.")}} </p> <p> {{translateText("Are you REALLY SURE you want to do this?")}} </p> {{else}} <p>{{translateText("You can delete the shared camera")}} {{static_name}} {{translateText("from your account. You will no longer be able to access it.")}}</p> {{/if}} </div> </div> </div> <div class="modal-footer"> <p class="red">{{delete_camera_response_msg}}</p> <button class="btn btn-warning" on-click="close">{{translateText("Cancel")}}</button> <button class="btn btn-danger" on-click="delete">{{translateText("Delete")}}</button> </div> </script>   <script id="DeleteCameraWarningComposite-template" type="text/ractive"> <div class="row-fluid"> <div class="span12"> <p>{{translateText("WARNING: About to delete camera viewport.")}}</p> <p>{{translateText("You are about to delete a camera viewport. No data will be lost.")}}</p> </div> </div> </script>   <script id="template-DeleteSpeaker" type="text/ractive"> <div class="modal-header"> <button type="button" class="close" on-click="close" data-dismiss="modal" aria-hidden="true">×</button> <h3> {{translateText("Delete Speaker")}}: {{static_name}} {{#if bridge_name}} {{translateText("on bridge")}} {{bridge_name}}{{/if}} </h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> {{#if !is_proxy}} <p> {{translateText("WARNING: About to delete speaker.")}} </p> <p> {{translateText("Are you REALLY SURE you want to do this?")}} </p> {{else}} <p>{{translateText("You can delete the shared speaker")}} {{static_name}} {{translateText("from your account. You will no longer be able to access it.")}}</p> {{/if}} </div> </div> </div> <div class="modal-footer"> <p class="red">{{delete_speaker_response_msg}}</p> <button class="btn btn-warning" on-click="close">{{translateText("Cancel")}}</button> <button class="btn btn-danger" on-click="delete">{{translateText("Delete")}}</button> </div> </script>   <script type="text/ractive" id="DeviceWidgetComponent-template"> <div class="widget devices-list"> <header class="widget-title"> <i class="icon-hdd"></i> {{translateText('Bridges')}} / <i class="icon-facetime-video"></i> {{translateText('Cameras')}} <span>{{ui.count_message}}</span> {{#if add_device_dropdown.show_bridge_option || add_device_dropdown.show_camera_option || add_device_dropdown.show_camera_direct_option || add_device_dropdown.show_mass_edit_option }} <span class="pull-right"> <div class="btn-group device-dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-testid="page-dashboard-header-dropdown-toggle-button-add-devices" > <i class="fas fa-ellipsis-h"></i> </a> <ul class="dropdown-menu pull-right"> {{#if add_device_dropdown.show_bridge_option}} <li on-click="@this.addBridge()" data-testid="page-dashboard-header-dropdown-menu-add-bridge" > <a>{{translateText('Add Bridge')}}</a> </li> {{/if}} {{#if add_device_dropdown.show_camera_option && !ui.loading}} <li on-click="@this.addRtspCamera()" data-testid="page-dashboard-header-dropdown-menu-add-rtsp-camera" > <a>{{translateText('Add Cameras')}}</a> </li> {{/if}} {{#if add_device_dropdown.show_camera_direct_option}} <li on-click="@this.openDirectCameraModal()" data-testid="page-dashboard-header-dropdown-menu-add-direct-camera" > <a>{{translateText('Add Camera Direct')}}</a> </li> {{/if}} {{#if add_device_dropdown.show_mass_edit_option}} <li on-click="@this.goToMassEdit('bridge')"><a>{{translateText('Mass Edit Bridges')}}</a></li> <li on-click="@this.goToMassEdit('camera')"><a>{{translateText('Mass Edit Cameras')}}</a></li> {{/if}} </ul> </div> </span> {{elseif add_device_dropdown.show_bridge_option}} <span class="pull-right"> <i on-click="@this.addBridge()" class="icon-plus-sign add-icon" title="{{translateText('Add Bridge')}}" data-testid="page-dashboard-header-button-add-bridge" ></i> </span> {{/if}} <audio id="talkdown-audio" autoplay></audio> {{#if !ui.no_devices}} <span class="pull-right pagination-bar--wrapper"> <PaginationBar page={{ page }} size={{ size }} quantity={{ flat_devices.length }}/> </span> {{/if}} </header> {{#if ui.no_devices && !ui.loading }} <div class="widget-content"> <div class="row-fluid"> <div class="span6"> <div style="margin-left: 15px;"> <h3>{{translateText('Add Bridge')}}</h3> <p>{{translateText('A Bridge is needed to connect your cameras to a cloud data center.')}}</p> <p>{{translateText('Make sure the WAN port of your Bridge is connected to the internet and then press the Add Bridge button.')}}</p> </div> </div> <div id="wrapper-bridges-img" class="span6"> </div> </div> </div> {{else}} <div class="widget-content"> <table class="table table-striped"> <thead> <tr> <th id='camera-table-status' style="width:5%;">{{translateText('Status')}}</th> <th id='camera-table-status-indent' style="width:5%"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th id='camera-table-name' style="width:25%">{{translateText('Name')}}</th> <th id='camera-table-tags' style="width:25%">{{translateText('Tags')}}</th> <th id='camera-table-location' style="width:20%;"> <span on-click="@this.set('ui.show_location', false)" class="device-location-col {{#if !ui.show_location}}device-location-col-selected{{/if}}"> {{translateText('Location')}} </span> / <span on-click="@this.set('ui.show_location', true)" class="device-location-col {{#if ui.show_location}}device-location-col-selected{{/if}}"> {{translateText('Address')}} </span> </th> <th style="width:20%; min-width: 200px;"> {{translateText('Actions')}} </th> </tr> </thead> <tbody> {{ #if ui.loading }} {{#each ui.loading_row_count}} <tr> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> </tr> {{/each}} {{else}} {{#each current_devices}} {{> device_row}} {{/each}} {{/if}} </tbody> </table> </div> {{/if}} <div id="speakerNotification-component"></div> <footer class="widget-title "> {{#if !ui.no_devices}} <div class="pull-right"> <select id="devices-list--page-size-select" class="page-size-select pull-right" value="{{size}}" > <option>25</option> <option>50</option> <option>100</option> <option>250</option> <option>500</option> </select> <label for="devices-list--page-size-select" class="page-size-select--label pull-left">{{ translateText('Page size') }}:</label> </div> <span class="pull-right pagination-bar--wrapper"> <PaginationBar page={{ page }} size={{ size }} quantity={{ flat_devices.length }}/> </span> {{/if}} </footer> </div> {{#partial device_row}} {{#if this.type_view === "bridge"}} {{#with bridge}} {{> bridge_row}} {{/with}} {{/if}} {{#if this.type_view === "camera" || this.type_view === "child_view_cameras"}} {{#with camera}} {{> camera_row}} {{/with}} {{/if}} {{#if this.type_view === "composite"}} {{#with composite as composite}} {{#with camera as camera}} {{> composite_row}} {{/with}} {{/with}} {{/if}} {{/partial}} {{#partial composite_row}} {{#if (camera.filter_display || camera.hierarchy_display)}} <tr data-esn="{{camera.deviceID}}" data-composite-id="{{composite.id}}"> <td class="offset-cell offset-with-line"></td> <td class="offset-cell"></td> <td class="{{^composite.name}}dim-row{{/}} offset-with-indentation">{{#composite.name}}{{composite.name}}{{else}}(Unnamed - {{composite.id}}){{/}} </td> <td> {{#each composite.tags.sort()}} {{#unless excluded_tags.indexOf(this.toLowerCase()) !== -1}} <span class="tag"><a href="#/layout_tag/{{this.toLowerCase()}}">{{this.toLowerCase()}}</a></span> {{/unless}} {{/each}} </td> <td> {{! LOCATION COL}} {{#if ui.show_location}} {{#if location_grouping}} {{camera.deviceExtra.location_address}} {{else}} {{camera.deviceLocation[4]}} {{/if}} {{else}} {{#if location_grouping}} {{camera.deviceExtra.location_name}} {{else}} {{camera.deviceLocation[6]}} {{! Location name}} {{/if}} {{/if}} </td> <td> {{#if user.checkDeviceRecordedVideoByID(camera.deviceID) && !camera.isLiveViewOnly()}} <button type="button" class="btn" on-click="@this.openHistory(camera, composite.id)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} <button type="button" class="btn" on-click="@this.openCameraCompositeSettings(camera, composite.id)" title="{{translateText('change viewport settings')}}"> <i class="icon-cog"></i> </button> {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCameraComposite(camera, composite.id)" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </tr> {{/if}} {{/partial}} {{#partial camera_row}} {{#if (this.deviceStatus === 'ATTD' && !this.deviceShare) && (this.filter_display || this.hierarchy_display)}} <tr data-esn="{{this.deviceID}}"> {{! TODO: Fix this stupid line logic/css}} {{#if ui.bridges_present || camera.isCloudCamera()}} {{! show connecting line from cameras to bridge }} <td class="offset-cell offset-with-line"></td> {{/if}} <td class="{{#if this.deviceParent}}offset-cell{{/if}}"> {{! STATUS COL }} {{#if !this.deviceParent}} {{! Parent/regular camera }} {{#with this as camera}} {{#if camera.isMCACamera() }} {{> partial-mca-camera-status}} {{elseif camera.isDeviceSpeaker() }} {{> partial-speaker-status}} {{elseif camera.isParentCamera() }} {{> partial-camera-status}} {{else}} <div {{#if ui.show_preview_bubble}} class="status-clickable" on-click="@this.showPreview(camera.deviceID, @node)"{{/if}}> {{> partial-camera-status}} </div> {{/if}} {{/with}} {{/if}} </td> {{#if !ui.bridges_present && !camera.isCloudCamera()}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} {{#if this.deviceParent}} {{! child view camera }} {{#with this as camera}} <span class="table-device-child-camera-status status-clickable" on-click="@this.showPreview(camera.deviceID, @node, true)"> {{> partial-camera-status}} </span> {{/with}} {{this.deviceName}} ({{translateText("View")}}: {{this.deviceChildViewName}}) {{#if this.deviceExtra && this.deviceExtra.associated_speaker}} <i class="icon-volume icon-volume-device device-speaker-icon"></i> {{/if}} {{elseif this.deviceType === 'multiview_camera'}} <strong>{{this.deviceName}}</strong> {{else}} {{this.deviceName}} {{#if this.deviceType === 'camera' && this.deviceExtra && this.deviceExtra.associated_speaker}} <i class="icon-volume icon-volume-device device-speaker-icon"></i> {{/if}} {{/if}} </td> <td> {{! TAGS COL }} {{#each this.deviceTags.sort()}} {{#unless excluded_tags.indexOf(this.toLowerCase()) !== -1}} <span class="tag"><a href="#/layout_tag/{{this.toLowerCase()}}"> {{this.toLowerCase()}}</a></span> {{/unless}} {{/each}} </td> <td> {{! LOCATION COL}} {{#if ui.show_location}} {{#if location_grouping}} {{camera.deviceExtra.location_address}} {{else}} {{camera.deviceLocation[4]}} {{/if}} {{else}} {{#if location_grouping}} {{camera.deviceExtra.location_name}} {{else}} {{camera.deviceLocation[6]}} {{/if}} {{/if}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceRecordedVideoByID(this.deviceID) && this.deviceType != 'multiview_camera' && !this.isLiveViewOnly() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if this.hasEditPermissions() }} {{#if this.isAbleToTalkdown() }} <button type="button" class="btn" on-click="@this.doTalkdown(this)" title="{{translateText('directly talk to speaker')}}"> <i class="icon-microphone" id="{{this.deviceID}}-talkdown-icon" style="display: block;"></i> </button> {{/if}} {{#if this.deviceType === 'multiview_camera' || (user.isCameraDewarpingEnabled() && !!composites && composites.length > 0)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change parent camera settings')}}"> <i class="icon-cogs"></i> </button> {{#if available_child_views}} <button class="btn btn-info btn-small new-child-view-btn" title="{{translateText('New View')}}" on-click="@this.openCameraSettings(camera, 'views')"> <i class="icon-plus"></i> </button> {{/if}} {{elseif this.deviceType === 'speaker' && user.checkSpeakerOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change speaker settings')}}"> <i class="icon-cog"></i> </button> {{elseif user.checkPTZOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change camera settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkDeviceVPN(this) && !this.isCloudCamera() && !this.deviceParent && !this.isAnalog()}} <button type="button" {{#unless this.is_status_cloud_registered}}disabled{{/unless}} on-click="@this.openVPN(this)" {{#if this.deviceType === 'speaker'}} title="{{translateText('open VPN to speaker')}}" {{else}} title="{{translateText('open VPN to camera')}}" {{/if}} > <i class="een-icon-tunnel"></i> </button> {{/if}} {{/if}} {{#if user.checkShowCameraMetricsByID(this.deviceID) && !this.isCloudCamera() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openAnalytics(this)" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} {{#if this.deviceType === 'speaker' && user.checkAddDeleteSpeakers()}} <button type="button" class="btn" on-click="@this.deleteSpeaker(this)" title="{{translateText('remove speaker from account') }}"> <i class="icon-trash"></i> </button> {{else}} <button type="button" class="btn" on-click="@this.deleteCamera(this)" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} {{/if}} </td> </tr> {{/if}} {{/partial}} {{#partial bridge_row}} {{#if this.filter_display || this.hierarchy_display}} <tr data-esn="{{this.deviceID}}"> <td class="table-device-status"> {{! STATUS COL }} {{#if this.device_state}} {{#if this.is_status_cloud_registered}} <i class="icon-ok-circle green big-icon" title="{{translateText('bridge online')}}"></i> {{else}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('internet offline')}}"></i> {{/if}} {{/if}} </td> <td> {{! ICON COL }} {{#if this.health_summary}} <i class="{{ui.bridge_icons[this.health_summary.status]}} icon-large bridge-list-row-icon" title="{{this.health_summary.message}}"></i> {{else}} <i class="far fa-hdd icon-large bridge-list-row-icon"></i> {{/if}} </td> <td> {{! NAME COL }} <strong>{{this.deviceName}}</strong> {{#if !@this.checkIsCameraDirectBridge(this.deviceID)}} ({{this.attached_cameras_message}}{{this.available_cameras_message}}) {{/if}} <div class="red">{{this.new_bridge_warning}}</div> </td> <td> {{! SERIAL COL }} {{this.deviceSerial}} </td> <td> {{! LOCATION COL}} {{#if ui.show_location}} {{#if location_grouping}} {{this.deviceExtra.location_address}} {{else}} {{this.deviceLocation[4]}} {{/if}} {{else}} {{#if location_grouping}} {{this.deviceExtra.location_name}} {{else}} {{this.deviceLocation[6]}} {{! Location name}} {{/if}} {{/if}} </td> <td> {{! ACTIONS COL }} {{#if !@this.checkIsCameraDirectBridge(this.deviceID) && !this.deviceIsAdding}} {{#if user.checkBridgeUpdateByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openBridgeSettings(this)" title="{{translateText('change bridge settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.is_edit_all_and_add && this.isBridgeReplacementAvailable()}} {{! TODO: entire model check }} <button type="button" class="btn" on-click="@this.replaceBridge(this)" title="{{translateText('replace bridge')}}"> <i class="icon-exchange"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteBridge(this)" title="{{translateText('remove bridge from account')}}"> <i class="icon-trash"></i> </button> {{/if}} {{/if}} </td> </tr> {{/if}} {{/partial}} </script>   <script type="text/ractive" id="partial-camera-status"> {{#if camera.device_state}} {{#if camera.deviceType === 'multiview_camera'}} {{! TODO: We need to change this to access the Device and Camera constants instead of string}} {{#if camera.device_state === 'off'}} <i class="icon-ban-circle orange big-icon" title="{{translateText('camera off')}}"> </i> {{elseif camera.device_state === 'online'}} <i class="icon-ok-circle green big-icon" title="{{translateText('camera online')}}"> </i> {{elseif camera.device_state === 'internet offline'}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('internet offline')}}"> </i> {{/if}} {{elseif camera.deviceType === 'cloud_camera'}} {{#if camera.device_state === 'online'}} <i class="icon-ok-circle green big-icon" title="{{translateText('camera online')}}"> </i> {{elseif camera.device_state === 'off'}} <i class="icon-ban-circle orange big-icon" title="{{translateText('camera off')}}"> </i> {{else}} <i class="icon-remove-circle red big-icon" title="{{translateText('offline')}}"> </i> {{/if}} {{else}} {{#if camera.is_status_streaming}} <i class="icon-ok-circle green big-icon" title="{{translateText('camera online')}}"> </i> {{elseif !camera.is_status_on}} {{#if camera.is_status_bad_analog}} <i class="icon-exclamation-sign orange big-icon" title="{{translateText('bad analog signal')}}"> </i> {{else}} <i class="icon-ban-circle orange big-icon" title="{{translateText('camera off')}}"> </i> {{/if}} {{elseif !camera.is_status_cloud_registered}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('internet offline')}}"> </i> {{elseif camera.is_status_password}} <i class="icon-lock red big-icon" title="{{translateText('camera password required')}}"> </i> {{else}} <i class="icon-remove-circle red big-icon" title="{{translateText('camera offline')}}"> </i> {{/if}} {{/if}} {{/if}} </script> <script type="text/ractive" id="partial-mca-camera-status"> {{#if camera.device_state}} {{#if camera.is_mca_camera_mounted}} <i class="icon-bodycam icon-bodycam-orange big-icon" title="{{translateText('wearable camera volume is mounted')}}"> </i> {{elseif camera.is_status_streaming}} <i class="icon-bodycam icon-bodycam-green big-icon" title="{{translateText('connected wearable camera')}}"> </i> {{elseif !camera.is_status_on}}  <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif !camera.is_status_cloud_registered}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif camera.is_status_password}} <i class="icon-lock red big-icon" title="{{translateText('camera password required')}}"> </i> {{else}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{/if}} {{/if}} </script> <script type="text/ractive" id="partial-speaker-status"> {{#if camera.deviceExtra && camera.speaker_status === 'REDY'}} <i class="icon-ok-circle green big-icon" title="{{translateText('speaker connected')}}"> </i> {{elseif camera.deviceExtra && camera.speaker_status === 'PASS'}} <i class="icon-exclamation-sign orange big-icon" title="{{translateText('bad password')}}"> </i> {{elseif camera.deviceExtra && camera.speaker_status === 'BUSY'}} <i class="icon-ban-circle orange big-icon" title="{{translateText('device is busy')}}"> </i> {{else}} <i class="icon-remove-circle red big-icon" title="{{translateText('speaker disconnected')}}"> </i> {{/if}} </script>   <script type="text/template" id="editAccountSettings-template"> <% var user = userList.getCurrentUser(); %> <span class="modal-heading-append"> // <%-this.model.get('name')%> (<%-this.model.get('id')%>)</span> <div class="tab-pane" id="acMain">  <span id="csCamera-help" data_link="account_settings_main" class="pull-right"> <i class="icon-question-sign een-help-link"></i> </span> <% if (user.checkTurnAllCamerasOnOff() || user.checkAccountUpdate(user.account)) { %> <div class="row-fluid" style="margin-bottom:10px;"> <button type="button" class="offset2 span4 btn btn-danger" id="accountSettings__turn_off_cameras_until" data-testid="modal-account-tab-control-button-turn-off-all-cameras" > <%= this.t('Turn off all cameras') %> </button> <button type="button" class="span4 btn btn-success" id="accountSettings__turn_on_cameras" data-testid="modal-account-tab-control-button-turn-on-all-cameras" > <%= this.t('Turn on all cameras') %> </button> </div> <% } %> <div class="row-fluid hide"> <button class="offset2 span4 btn btn-info" id="accountSettings__disable_alerts_until" data-testid="modal-account-tab-control-button-disable-notifications-until" > <%= this.t('Disable Notifications until') %>: </button> <div class="span4"> <div class="input-append bootstrap-timepicker"> <input id="acTimepicker2" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> </div> <% if (user.checkAddAPIKey()) { %> <div class="row-fluid"> <button type="button" class="offset2 span4 btn btn-info" id="jumpToAPIKeys" data-testid="modal-account-tab-control-button-create-api-key" > <%= this.t('Create API Keys') %> </button> </div> <% } %> <br/><br/><br/><br/><br/><br/> </div> <div class="tab-pane" id="acDays" style="min-height:260px;">  <span class="pull-right" id="csCamera-help" data_link="account_settings_days"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-days-input-label-time-zone" > <%= this.t('Time Zone') %>: </label> <div class="controls"> <div class="row-fluid"> <select id="accountSettings__timezone" class="span6"> <% var model = this.model; var user_timezone = model.get('timezone'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(user_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=user_timezone%>" selected><%=user_timezone%></option> <% } %> </select> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-days-input-label-work-days" > <%= this.t('Work days') %>: </label> <div class="controls"> <select id="accountSettings__work_days"> <option value="1111000" <%=(this.model.get('work_days')=='1111000' ? 'selected': '')%> data-testid="modal-account-tab-days-option-label-monday-thursday" ><%= this.t('Monday - Thursday') %></option> <option value="1111100" <%=(this.model.get('work_days')=='1111100' ? 'selected': '')%> data-testid="modal-account-tab-days-option-label-monday-friday" ><%= this.t('Monday - Friday') %></option> <option value="1111110" <%=(this.model.get('work_days')=='1111110' ? 'selected': '')%> data-testid="modal-account-tab-days-option-label-monday-saturday" ><%= this.t('Monday - Saturday') %></option> <option value="1111111" <%=(this.model.get('work_days')=='1111111' ? 'selected': '')%> data-testid="modal-account-tab-days-option-label-7-days" ><%= this.t('7 days/week') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-days-input-label-work-hours" > <%= this.t('Work hours') %>: </label> <div class="controls"> <div class="input-append bootstrap-timepicker"> <input id="accountSettings__work_hours_from" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> To <div class="input-append bootstrap-timepicker"> <input id="accountSettings__work_hours_to" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> </div> <div class="control-group" style="margin-bottom:245px !important;display:none"> <label class="control-label" for="" data-testid="modal-account-tab-days-input-label-holiday-list" > <%= this.t('Holiday list') %>: </label> <div class="controls"> <div class="row-fluid"> <table id="accountSettings__holidays" class="table table-condensed table-bordered table-striped pull-left" style="width:190px;margin-bottom:10px;"> <% _.each(this.model.get('holidays'), function(item) { %> <tr><td><%=item%> <button type="button" class="close">×</button></td></tr> <% }); %> </table> <div class="pull-left" style="margin-left:10px;margin-top:5px;">(<%= this.t("Holidays will be excluded from \"work days\"") %>)</div> </div> <div class="row-fluid"> <div class="pull-left bfh-datepicker" data-format="y-m-d" data-date=""> <div class="input-prepend bfh-datepicker-toggle" data-toggle="bfh-datepicker"> <span class="add-on"><i class="icon-calendar"></i></span> <input id="accountSettings__holiday" type="text" class="input-medium" readonly> </div> <div class="bfh-datepicker-calendar"> <table class="calendar table table-bordered"> <thead> <tr class="months-header"> <th class="month" colspan="4"> <a class="previous" href="#"><i class="icon-chevron-left"></i></a> <span></span> <a class="next" href="#"><i class="icon-chevron-right"></i></a> </th> <th class="year" colspan="3"> <a class="previous" href="#"><i class="icon-chevron-left"></i></a> <span></span> <a class="next" href="#"><i class="icon-chevron-right"></i></a> </th> </tr> <tr class="days-header"> </tr> </thead> <tbody> </tbody> </table> </div> </div> <button class="pull-left btn btn-info" id="accountSettings__add_holiday"><%= this.t('Add Holiday') %></button> </div> </div> </div> </form> </div> <div class="tab-pane" id="acClients"> <ul class="nav nav-tabs"> <li class="active"><a href="#acClients_general" data-toggle="tab"><%=this.t('General')%></a></li> <li class="ana-tab hide" id="acClients_password_management_tab"><a href="#acClients_password_management" data-toggle="tab"><%=this.t('Password')%></a></li> <li class="ana-tab hide" id="acClients_IdentityProvider_tab"><a href="#acClients_IdentityProvider" data-toggle="tab"><%=this.t('Identity Provider')%></a></li> </ul> <div class="tab-content" id="acClients-panes"> <div class="tab-pane active" id="acClients_general">  <span class="pull-right" id="csCamera-help" data_link="account_settings_security"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group hide"> <label class="control-label" for="" data-testid="modal-account-tab-security-input-label-allow-mobile-client-access" > <%= this.t('Allow mobile client access') %>: </label> <div class="controls"> <input id="accountSettings__enable_mobile" type="checkbox" value="1" <%=(this.model.get('enable_mobile')=='1' ? 'checked' : '')%>> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-security-input-label-web-timeout" > <%= this.t('Web Timeout') %>: </label> <div class="controls"> <select id="accountSettings__session_duration" class="span2"> <option value="15" <%=(this.model.get('session_duration')=="15" ? 'selected' : '')%>>15 <%= this.t('minutes') %></option> <option value="60" <%=(this.model.get('session_duration')=="60" ? 'selected' : '')%>>1 <%= this.t('hour') %></option> <option value="240" <%=(this.model.get('session_duration')=="240" ? 'selected' : '')%>>4 <%= this.t('hours') %></option> <option value="480" <%=(this.model.get('session_duration')=="480" ? 'selected' : '')%>>8 <%= this.t('hours') %></option> <option value="720" <%=(this.model.get('session_duration')=="720" ? 'selected' : '')%>>12 <%= this.t('hours') %></option> <option value="1440" <%=(this.model.get('session_duration')=="1440" ? 'selected' : '')%>>24 <%= this.t('hours') %></option> <option value="10080" <%=(this.model.get('session_duration')=="10080" ? 'selected' : '')%>>1 <%= this.t('week') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-security-input-label-inactive-session-timeout" > <%= this.t('Inactive Session Timeout') %>: </label> <div class="controls"> <select id="accountSettings__inactive_session_timeout" class="span2"> <option value="" <%=(this.model.get('inactive_session_timeout')==null ? 'selected' : '')%>><%= this.t('None') %></option> <option value="5" <%=(this.model.get('inactive_session_timeout')=="5" ? 'selected' : '')%>>5 <%= this.t('minutes') %></option> <option value="15" <%=(this.model.get('inactive_session_timeout')=="15" ? 'selected' : '')%>>15 <%= this.t('minutes') %></option> <option value="60" <%=(this.model.get('inactive_session_timeout')=="60" ? 'selected' : '')%>>1 <%= this.t('hour') %></option> <option value="240" <%=(this.model.get('inactive_session_timeout')=="240" ? 'selected' : '')%>>4 <%= this.t('hours') %></option> <option value="480" <%=(this.model.get('inactive_session_timeout')=="480" ? 'selected' : '')%>>8 <%= this.t('hours') %></option> <option value="720" <%=(this.model.get('inactive_session_timeout')=="720" ? 'selected' : '')%>>12 <%= this.t('hours') %></option> <option value="1440" <%=(this.model.get('inactive_session_timeout')=="1440" ? 'selected' : '')%>>24 <%= this.t('hours') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-security-input-label-max-login-attempts" > <%= this.t('Max Login Attempts') %>: </label> <div class="controls"> <input id="accountSettings__login_attempt_limit" type="text" maxlength="2" class="span1" value="<%-(this.model.get('login_attempt_limit'))%>" /> </div> </div> <div class="control-group"> <label class="control-label" data-testid="modal-account-tab-security-input-label-include-picture-in-notifications" > <%= this.t('Include Picture in System Notifications') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="accountSettings__is_system_notification_images_enabled" value="1" <%=(this.model.get('is_system_notification_images_enabled') ? 'checked' : '')%> /> </div> </div> </div> </div> <div class="control-group" style="<% if (user.get('active_brand_subdomain') === 'hkt') { %>display:none<% } %>"> <label class="control-label" data-testid="modal-account-tab-security-input-label-enable-two-factor-for-all-users" > <%= this.t('Enable Two Factor Authentication for all users') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input id="accountSettings__is_two_factor_authentication_forced" type="checkbox" value="1" <%=this.model.get("is_two_factor_authentication_forced") ? "checked" : ""%>/> </div> </div> </div> </div> <div class="control-group hide"> <label class="control-label" for="" data-testid="modal-account-tab-security-input-label-white-list-ips" > <%= this.t('Limit access to following IPs') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input id="accountSettings__enable_ip_restrictions" type="checkbox" value="1" <%=(this.model.get('enable_ip_restrictions')=='1' ? 'checked' : '')%>> </div> <div class="span10"> <input id="accountSettings__ip_address" type="text" class="span5" placeholder="192.168.123.0/24"> <button type="button" class="btn btn-info no-left-margin" id="accountSettings__add_ip_address"><%= this.t('Add IP Range') %></button> <div class="span5 no-left-margin"> <table id="accountSettings__ip_addresses" class="table table-condensed table-bordered table-striped"> <% _.each(this.model.get('allowable_ip_address_range'), function(item) { %> <tr><td><%-item%> <button type="button" class="close">×</button></td></tr> <% }); %> </table> </div> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="acClients_password_management">  <span class="pull-right" id="csCamera-help" data_link="account_settings_security_password"> <i class="icon-question-sign een-help-link"></i> </span> <div id="ac-password-management"></div> </div> <div class="tab-pane" id="acClients_IdentityProvider"> <span class="pull-right"> <a id="csCamera-help" data_link="sub_account_settings_security_idp"> <i class="icon-question-sign icon-question-sign-font-size"></i> </a> </span> <div id="ac-identity-provider"></div> </div> </div> </div> <div class="tab-pane" id="acCamera">  <span class="pull-right" id="csCamera-help" data_link="account_settings_camera"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-camera-input-label-enable-rtsp" > <%= this.t('Enable RTSP cameras') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span2"> <input id="accountSettings__is_rtsp_cameras_enabled" type="checkbox" value="1" <%=(this.model.get('is_rtsp_cameras_enabled')=='1' ? 'checked' : '')%>> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-camera-input-label-standard-camera-logins" ><%= this.t('Standard Camera Logins') %>: <div style="margin-top:10px;font-size:12px" data-testid="modal-account-tab-camera-input-label-enable-rtsp-help-text" > (<%= this.t('If you use a standard account username and password for your onvif login, you can enter it here and you will not have to enter it on each camera.') %>) </div> </label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <input type="text" id="accountSettings__new_username" maxlength="32" class="span5" placeholder="<%= this.t('username') %>"> <input type="text" id="accountSettings__new_password" maxlength="32" class="span5" placeholder="<%= this.t('password') %>"> <button class="btn btn-info" id="accountSettings__add_password"><%= this.t('Add') %></button> <div class="span10 no-left-margin small-right-padding"> <table id="accountSettings__default_camera_passwords" class="table table-condensed table-bordered table-striped"> <%if(this.model.get('default_camera_passwords')){%> <% _.each(this.model.get('default_camera_passwords').split(','), function(item) { %> <tr><td style="width:50%"><%-item.split(' ')[0]%></td><td style="width:50%"><%-item.split(' ')[1]%> <button type="button" class="close">×</button></td></tr> <% }); %> <% } %> </table> </div> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="acAlerts">  <span class="pull-right" id="csCamera-help" data_link="account_settings_alerts"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <label class="control-label" for="" data-testid="modal-account-tab-alerts-input-label-active-alert-mode" > <%= this.t('Active Alert Mode') %>: </label> <div class="controls"> <div class="row-fluid"> <select class="span6" id="accountSettings__active_alert_mode"> <% _.each(this.model.get('alert_modes'), function(item) { %> <option value="<%=item.alert_mode%>" <%=(item.is_active=='1' ? 'selected': '')%>><%-item.alert_mode%></option> <% }); %> </select> <div style="margin-left:0px !important;margin-top:5px;"> <input type="text" id="accountSettings__new_alert_mode" maxlength="32" class="span6" placeholder="<%= this.t('New Alert Mode Name') %>"> <button class="btn btn-info" id="accountSettings__add_alert_mode"><%= this.t('Add Alert Mode') %></button> <div class="span6 no-left-margin"> <table id="accountSettings__alert_modes" class="table table-condensed table-bordered table-striped"> <% _.each(this.model.get('alert_modes'), function(item) { %> <tr><td><%-item.alert_mode%><button type="button" class="close">×</button></td></tr> <% }); %> </table> </div> </div> </div> </div> <%if(user.getAccount().get("is_sureview_enabled")){%> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-alerts-input-label-immix-custom-ip" ><%= this.t('Immix Custom IP') %>:</label> <div class="controls"> <input id="accountSettings__sureview_location_ip" type="text" maxlength="63" class="span3" value="<%-(this.model.get('sureview_location_ip'))%>" /> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-alerts-input-label-immix-custom-port" > <%= this.t('Immix Custom Port') %>: </label> <div class="controls"> <input id="accountSettings__sureview_location_port" type="text" maxlength="8" class="span3" value="<%-(this.model.get('sureview_location_port'))%>" /> </div> </div> <%}%> </form> </div> <div class="tab-pane" id="acNotifications">  <span class="pull-right" id="csCamera-help" data_link="account_settings_notifications"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" style="width:180px" data-testid="modal-account-tab-notifications-input-label-disable-system-notifications" > <%= this.t('Disable System Notifications') %>: </label> <div class="controls" style="margin-left:200px"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="accountSettings__is_system_notifications_disabled" value="1" <%=(this.model.get('is_system_notifications_disabled') ? 'checked' : '')%> /> </div> </div> </div> </div> <%if(user.checkIsAvailableShowHealthStatus() && !user.checkIsSwitchedReseller()){%> <div class="control-group"> <label class="control-label" style="width:180px" data-testid="modal-account-tab-notifications-input-label-disable-bridge-health" > <%= this.t('Disable Bridge Health Display') %>: </label> <div class="controls" style="margin-left:200px"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="accountSettings__is_bridge_health_enabled" value="1" <%=(!user.account.get('is_bridge_health_enabled') ? 'checked' : '')%> /> </div> </div> </div> </div> <%}%> </form> </div> <div class="tab-pane" id="acMasterVideo"> <span class="pull-right" id="csCamera-help" data_link="account_settings_privacy"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group" title="<%=this.t('Only check this box if you are very concerned about privacy.')%>"> <label class="control-label" style="width:180px" data-testid="modal-account-tab-privacy-input-label-video-privacy" > <%= this.t('Video Privacy') %>: </label> <div class="controls" style="margin-left:200px"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="accountSettings__is_master_video_disabled" value="1" <%=((user.isOwnedByMasterAccount() || !this.model.get('is_master_video_disabled_allowed')) ? 'disabled="disabled"' : '')%> <%=(this.model.get('is_master_video_disabled') ? 'checked' : '')%> /> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="acSharing">  <span class="pull-right" id="csCamera-help" data_link="account_settings_sharing"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <div class="row-fluid"> <div class="span5" data-testid="modal-account-tab-sharing-input-label-available-cameras" > <%= this.t('Available Cameras')%> </div> <div class="span5 offset1" data-testid="modal-account-tab-sharing-input-label-cameras-to-share" > <%= this.t('Cameras To Share')%> </div> </div> <div class="row-fluid" id="accountSettings__camera_share_menu"> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-sharing-input-label-permissions" > <%= this.t( 'Permissions' ) %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span4"> <select multiple="multiple" id="accountSettings__camera_share_permissions"> <% _.each(this.model.get('available_share_permissions'), function(item) { %> <option value="<%= item['id'] %>" title="<%= item['title']%>"><%= item['name'] %></option> <% }) %> </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-sharing-input-share-email-addresses" > <%= this.t('Share Email Addresses') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <div class="span9"> <textarea id="accountSettings__camera_share_emails" class="span12" style="height: 70px;" maxlength="2000"></textarea> </div> <div class="span5"> <button style="margin-top:40px" class="span12 btn btn-info" id="accountSettings__add_camera_share" data-testid="modal-account-tab-sharing-button-save-share" > <%= this.t('Save Share') %> </button> </div> </div> </div> </div> </div> <div class="row-fluid"> <h5 data-testid="modal-account-tab-sharing-header-shared-cameras" ><%= this.t('Shared Cameras') %></h5> </div> <div class="row-fluid" style="width:99%"> <table class="table table-condensed table-bordered table-striped" id="accountSettings__camera_shares"> <thead> <tr> <th style="width: 27%" data-testid="modal-account-tab-sharing-table-header-account" > <%= this.t('Account') %> </th> <th style="width: 40%" data-testid="modal-account-tab-sharing-table-header-cameras" > <%= this.t('Cameras') %> </th> <th style="width: 21%" data-testid="modal-account-tab-sharing-table-header-permissions" > <%= this.t('Permissions')%> </th> <th style="width: 12%" data-testid="modal-account-tab-sharing-table-header-actions" > <%= this.t('Actions') %> </th> </tr> </thead> <tfoot> <tr> <td> </td> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <% _.each(this.model.get('shares_by_account'), function(item) { %> <tr id="share_<%=item.email.replace('@', '_').replace('+','_').replace('.', '_')%>" data-email="<%=item.email%>" data-perms="<%=item.perms.join(',')%>" data-cameras="<%=item.cameras.join(',')%>"> <td> <%-item.email + ' (' + item.name + ')'%> </td> <td> <%-item.camera_names.join(', ')%> </td> <td> <%=item.perms_readable.join(', ')%> </td> <td> <button class="edit-camera-share"><i class="icon-pencil"></i></button><button class="remove-camera-share"><i class="icon-trash"></i></button> </td> </tr> <% }) %> </tbody> </table> </div> </form> </div> <div class="tab-pane" id="acResponders">  <span class="pull-right" id="csCamera-help" data_link="account_settings_responder"> <i class="icon-question-sign een-help-link"></i> </span> <div class="row-fluid"> <div class="span5" data-testid="modal-account-tab-responders-input-label-available-cameras" > <%= this.t('Available Cameras')%> </div> <div class="span5 offset1" data-testid="modal-account-tab-responders-input-label-video-responder-cameras" > <%= this.t('Responder Cameras')%> </div> </div> <div id="accounts_settings_responder_menu" style="margin-bottom: 5px;"> </div> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-responders-input-label-email" > <%= this.t('Email') %>: </label> <div class="controls"> <div class="row-fluid control-group"> <input type="text" maxlength="60" id="accountSettings__nominee_responder_email" placeholder="*<%= this.t('Responder Nominee Email')%>"> </div> </div> <label class="control-label" for="" data-testid="modal-account-tab-responders-input-label-first-name" > <%= this.t('First Name') %>: </label> <div class="controls"> <div class="row-fluid control-group"> <input type="text" maxlength="60" id="accountSettings__nominee_responder_f_name" placeholder="<%= this.t('First Name')%>"> </div> </div> <label class="control-label" for="" data-testid="modal-account-tab-responders-input-label-last-name" > <%= this.t('Last Name') %>: </label> <div class="controls"> <div class="row-fluid control-group"> <input type="text" maxlength="60" id="accountSettings__nominee_responder_l_name" placeholder="<%= this.t('Last Name')%>"> </div> </div> <label class="control-label" for="" data-testid="modal-account-tab-responders-input-label-organization" > <%= this.t('Organization') %>: </label> <div class="controls"> <div class="row-fluid control-group"> <input type="text" maxlength="60" id="accountSettings__nominee_responder_org" placeholder="<%= this.t('Organization')%>"> <button class="btn btn-info" id="accountSettings__nominate_responder"><%= this.t('Nominate')%></button> </div> </div> </div> <label for="accountSettings__first_responder_list" data-testid="modal-account-tab-responders-header-first-responder-list" > <%= this.t('First Responders List') %>: </label > <div class="control-group"> <div class="row-fluid"> <table class="table table-condensed table-bordered table-striped" id="accountSettings__first_responder_list"> <tr> <th style="width:21%" data-testid="modal-account-tab-responders-table-header-email" > <%= this.t("Email") %> </th> <th style="width:21%" data-testid="modal-account-tab-responders-table-header-first-name" > <%= this.t("First Name") %> </th> <th style="width:21%" data-testid="modal-account-tab-responders-table-header-last-name" > <%= this.t("Last Name") %> </th> <th style="width:21%" data-testid="modal-account-tab-responders-table-header-organization" > <%= this.t("Organization") %> </th> <th style="width:5%" data-testid="modal-account-tab-responders-table-header-active" > <%= this.t("Active") %> </th> <th style="width:11%" data-testid="modal-account-tab-responders-table-header-action" > <%= this.t("Actions") %> </th> </tr> </table> </div> </div> </form> </div> <div class="tab-pane" id="acDefaults">  <span class="pull-right" id="csCamera-help" data_link="account_settings_retention"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal modal-form-centered"> <h5><%= utils.t('Camera Defaults') %></h5> <div id="ac-default-cloud-preview-only"></div> <div id="ac-default-cloud-retention"></div> <div id="ac-default-min-local-retention"></div> <div id="ac-default-max-local-retention"></div> <div id="ac-default-preview-resolution"></div> <div id="ac-default-full-video-resolution"></div> </form> </div> <div class="tab-pane" id="acEdition"> <form class="form-horizontal"> <div id="acEdition_container"> </div> </form> </div> </script>   <script type="text/template" id="editBridgeMetricsTab-template"> <div class="tab-pane <%=tab_active_class%>" id="editBridge__metrics_<%=metric_id%>"> <i class="chart-update icon-cloud-upload editBridge__metrics__chart_update_icon <%=upload_icon_custom_class%>" title="update bandwidth metrics"></i> <div id="editBridge__metrics_<%=metric_id%>_chart" class="editBridge__metrics__chart"></div> <div id="editBridge__metrics_<%=metric_id%>__big_text" class="editBridge__metrics__big_text"> <h2 id="editBridge__metrics_<%=metric_id%>__big_text_content" class="editBridge-metrics-big-text-content"></h2> <i class="icon-refresh chart-refresh-big icon-3x"></i> </div> </div> </script>  <script type="text/template" id="editBridgeView-template"> <span class="modal-heading-append"> // <%-model.get('deviceName')%></span> <div class="tab-pane active" id="editBridge__bridge"> <div class="pull-right"> <a class="accordion-toggle" id="toggleAdvSettings"> <span data-testid="modal-edit-bridge-tab-bridge-advanced" > <%= this.t('Advanced') %> </span> </a> <span id="csCamera-help" data_link="bridge_settings_main"> <i class="icon-question-sign een-help-link"></i> </span> </div> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-bridge-name" > <%= this.t('Bridge Name') %>: </label> <div class="controls"> <div class="row-fluid"> <input id="editBridge__name" class="span6" type="text" maxlength="45" value="<%- model.get('deviceName') %>"/> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-time-zone" > <%= this.t('Time Zone') %>: </label> <div class="controls"> <div class="row-fluid"> <select id="editBridge__timezone" class="span6"> <% var model = this.model; var device_timezone = model.get('deviceTZ'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(device_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=device_timezone%>" selected><%=device_timezone%></option> <% } %> </select> </div> </div> </div> <%if(model.get("camera_settings").video_standard){%> <div class="control-group" id="editBridge__video_standard_row" style="display: none;"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-video-standard" > <%= this.t('Video Standard') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="camera-setting span4"> <select class="span11" id="editBridge__video_standard"></select> </div> </div> </div> </div> <%}%> <div class="control-group basic-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-upnp-enabled" > <%= this.t('UPNP Enabled') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting"> <input type="checkbox" id="editBridge__upnp_enable" value="1"/> </div> </div> </div> </div> <% if(this.has_ignition_switch) { %> <div class="control-group basic-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-delayed-shutdown" > <%= this.t('Delayed shutdown') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span4 camera-setting"> <select class="span12" id="editBridge__delayed_shutdown__schedule"> <option value="0">0</option> <option value="30">30</option> <option value="60">60</option> <option value="120">120</option> </select> </div> <div class="span4 camera-setting"><%= this.t('minutes') %></div> </div> </div> </div> <% } %> <div class="control-group"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-default-transmit-mode" > <%= this.t('Default Transmit Bandwidth') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span6 camera-setting" id="editBridge__bandwidth_background" style="padding-top: 5px;"> </div> <div class="span6 camera-setting" style="padding-left: 30px" data-testid="modal-edit-bridge-tab-bridge-input-info-current-transmit-bandwidth" > <% if(this.bandwidth_currently_used_text) { %> <div> <%= this.t('Measured') %>: <%= this.bandwidth_currently_used_text %> <% if(this.is_bandwidth_limit_exceeded) { %> <i class="icon-question-sign een-help-link" title="<%= this.is_bandwidth_limit_exceeded_title %>"></i> <% } %> </div> <% } %> <% if(this.bandwidth_allocated_text) { %> <div><%= this.t('Allocated') %>: <%= this.bandwidth_allocated_text %></div> <% } %> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-scheduled-transmit-mode" > <%= this.t('Scheduled Transmit Bandwidth') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span4 camera-setting"> <select class="span12" id="editBridge__bandwidth_background__schedule"> <option value=""><%=this.t('None')%></option> <option value="work"><%= this.t('Work hours') %> (<%=model.get('camera_work_hours')%>)</option> <option value="nonwork"><%= this.t('Non-work hours') %></option> <option value="custom"><%= this.t('Custom') %></option> </select> </div> <div class="span4 camera-setting"> <div class="span11" id="editBridge__bandwidth_background__scheduled"></div> </div> </div> <div class="row-fluid"> <div class="span4 camera-setting"> <div id="editBridge__bandwidth_background__schedule__custom"></div> </div> </div> </div> </div> <% if (userList.getCurrentUser().checkFeatureFlag('media_shortcut')) { %> <div class="control-group basic-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-media-shortcut-enabled" > <%= this.t('Media Shortcut Enabled') %>: </label> <div class="controls"> <div class="row-fluid shortcut-setting"> <div class="span1 camera-setting"> <input type="checkbox" id="editBridge__shortcut_enable" /> </div> </div> </div> </div> <div class="control-group basic-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-media-shortcut-override" > <%= this.t('Media Shortcut Override') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting"> <input type="text" id="editBridge__local_ipaddr_template" value="<%=model.get('camera_settings').local_ipaddr_template%>" maxlength="54"/> </div> </div> </div> </div> <% } %> <div class="control-group"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-bridge-input-label-bridge-information" > <%= this.t('Bridge Information') %>: </label> <div class="controls"> <div id="editBridge__device_info" class="info-box"> <%if(model.get('camera_info')){%> <div class="row-fluid tech-details"> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-firmware" > <%= this.t('Firmware') %>: </div> <div class="span7"> <%-model.get('camera_info').version%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-ssn" > <%= this.t('SSN') %>: </div> <div class="span7"> <%-model.get('camera_info').ssn%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-ip-address" > <%= this.t('IP Address') %>: </div> <div class="span7"> <%if(model.get('camera_info').ipaddr && model.get('camera_settings').http_local_enable){%> <a href="https://<%-model.get('camera_info').ipaddr%>" target="_blank" title="<%this.t('Open local display')%>"><%-model.get('camera_info').ipaddr%></a> <%}else{%> <%-(model.get('camera_info').ipaddr || 'not available')%> <%}%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-esn" > <%= this.t('ESN') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceID') : this.t('not available')) %> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-guid" > <%= this.t('GUID') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceGUID') : this.t('not available')) %> </div> </div> <div class="row-fluid bridge-rtsp-row hide"> <div> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-rtsp-stream" > <%= this.t('QL Stream (RTSP)') %>: </div> <div class="span7"> <img src="/_images/spinning.gif" class="rtsp-loader" alt=""> <span class="rtsp-data"> <span id="rtsp-url-placeholder"></span> <i class="rtsp-copy-el icon icon-copy" title="<%= this.t('Copy to clipboard') %>"></i> </span> </div> </div> <div class="bridge-rtsp-auth-data hide "> <div class="no-rtsp-auth-info hide row-fluid text-center" data-testid="modal-edit-bridge-tab-bridge-information-stream-info-text" > <%= this.t('QL Stream (RTSP) is secured, contact account user for stream credentials') %> </div> <div class="rtsp-auth-info"> <div> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-rtsp-username" > <%= this.t('QL Stream Username') %>: </div> <div class="span7"> <img src="/_images/spinning.gif" class="rtsp-loader" alt=""> <span class="rtsp-data"> <span id="rtsp-auth-username-placeholder"></span> <i class="rtsp-copy-el icon icon-copy" title="<%= this.t('Copy to clipboard') %>"></i> </span> </div> </div> <div> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-rtsp-password" > <%= this.t('QL Stream Password') %>: </div> <div class="span7"> <img src="/_images/spinning.gif" class="rtsp-loader" alt=""> <span class="rtsp-data"> <span id="rtsp-auth-password-placeholder"></span> <i class="rtsp-copy-el icon icon-copy" title="<%= this.t('Copy to clipboard') %>"></i> </span> </div> </div> </div> </div> </div> <%}else{%> <div class="row-fluid"> <div class="span11 text-center" data-testid="modal-edit-bridge-tab-bridge-information-not-available" > <%= this.t('Not available at this time') %> </div> </div> <%}%> <%if(model.get('WAN')){%> <div class="row-fluid"> <%var wan = model.get('WAN') || {};%> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-wan" > <%= this.t('WAN') %>: </div> <div class="span7"> <%= this.getSpeedMessage(wan) %><br /> </div> </div> <%}%> <%if(model.get('CamLAN')){%> <div class="row-fluid"> <%var cam_lan = model.get('CamLAN') || {};%> <div class="span4 text-right" data-testid="modal-edit-bridge-tab-bridge-information-cam-lan" > <%= this.t('CamLan') %>: </div> <div class="span7"> <%= this.getSpeedMessage(cam_lan) %><br /> </div> </div> <%}%> <%var can_see_restart_bridge = can_restart_bridge && (userList.getCurrentUser().checkIsSwitchedReseller() || debug_mode_enabled || utils.isRestartBridgeButtonVisible());%> <div class="row-fluid restart-bridge-row <%= can_see_restart_bridge ? '' : 'hidden' %>"> <button id="editBridge__restart" class="btn btn-mini btn-info span2" data-testid="modal-edit-bridge-tab-bridge-button-restart" > <%=this.t('Restart')%> </button> </div> </div> </div> </div> </form> <% if(userList.getCurrentUser().checkAddDeleteDevices()) { %> <button class="ignore btn btn-inverse" style="margin-bottom: 8px; margin-left: 200px;" data-id="<%= model.get('deviceID') %>" title="<%= this.t('remove bridge from account') %>" data-testid="modal-edit-bridge-tab-bridge-button-delete-bridge" > <%=this.t("Delete Bridge")%> </button> <% } %> <% if(userList.getCurrentUser().checkTurnCameraOnOff(model)){%> <button type="button" class="btn btn-danger" style="margin-bottom: 8px;" id="editBridge__allOff" title="<%= this.t('Turn Off All Cameras') %>" data-testid="modal-edit-bridge-tab-bridge-button-turn-off-cameras" > <%=this.t("Turn Off Cameras")%> </button> <button type="button" class="btn btn-success" style="margin-bottom: 8px;" id="editBridge__allOn" title="<%= this.t('Turn On All Cameras') %>" data-testid="modal-edit-bridge-tab-bridge-button-turn-on-cameras" > <%=this.t("Turn On Cameras")%> </button> <%}%> </div> <div class="tab-pane" id="editBridge__location"> <span class="pull-right" id="csCamera-help" data_link="bridge_location"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-location-name" > <%= this.t('Location Name') %>: </label> <div class="controls"> <div class="row-fluid"> <% if(this.is_location_feature_enabled) { %> <div id="editBridgeModal_location_select" class="span9"></div> <% if(this.is_edit_location_permission) { %> <div id="editBridgeModal_location_add_button"></div> <% } %> <% } else { %> <input class="span9" type="text" id="editBridge__site_name" maxlength="255" placeholder="" value="<%- model.get('site_name') %>"/> <% } %> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-street-address" > <%= this.t('Street Address') %>: </label> <div class="controls"> <div class="row-fluid"> <input class="span9 input-xlarge" type="text" <% if(this.is_location_feature_enabled) { %> disabled <% } %> id="editBridge__street_address" maxlength="255" placeholder="" value="<%- model.get('street_address') %>"/> <% if(!userList.getCurrentUser().checkFeatureFlag('location_groups') || !userList.getCurrentUser().checkEditLocationGroup()) { %> (<%= this.t('street, city, state, zip') %>) <% } %> </div> </div> </div> <% if(this.is_location_feature_enabled) { %> <div class="control-group camera-setting"> <div class="controls"> <div class="row-fluid"> <input class="span9 input-xlarge" type="text" disabled id="editBridge__street_address_2" maxlength="255" placeholder="" value="<%- model.get('street_address_2') %>" /> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-city" > <%= this.t('City') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3"> <input class="input-mini span10" type="text" disabled id="editBridge__city" maxlength="255" placeholder="" value="<%- model.get('city') %>"/> </div> <label class="control-label span4" for="" data-testid="modal-edit-bridge-tab-location-input-label-region" > <%= this.t('State / Province / Region') %>: </label> <div class="span2"> <input class="input-mini span12" type="text" disabled id="editBridge__region" maxlength="255" placeholder="" value="<%- model.get('state') %>"/> </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-country" > <%= this.t('Country') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3"> <input class="input-mini span10" type="text" disabled id="editBridge__country" maxlength="255" placeholder="" value="<%- model.get('country') %>"/> </div> <label class="control-label span4" for="" data-testid="modal-edit-bridge-tab-location-input-label-postal-code" > <%= this.t('ZIP / Postal Code') %>: </label> <div class="span2"> <input class="input-mini span12" type="text" disabled id="editBridge__zip_code" maxlength="255" placeholder="" value="<%- model.get('zip_code') %>"/> </div> </div> </div> </div> <% } %> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-type" > <%= this.t('Location Type') %>: </label> <div class="controls"> <div class="row-fluid"> <select class="span9" id="editBridge__location_type"> <option value="" disabled="disabled" selected="selected"><%= this.t('Please select location type of the bridge') %></option> <option value="bank"><%= this.t('Bank') %></option> <option value="body_camera"><%= this.t('Body Camera') %></option> <option value="car_repair"><%= this.t('Car Repair') %></option> <option value="clinic"><%= this.t('Clinic') %></option> <option value="convenience_store"><%= this.t('Convenience Store') %></option> <option value="freeway"><%= this.t('Freeway') %></option> <option value="gas_station"><%= this.t('Gas Station') %></option> <option value="health_club"><%= this.t('Health Club') %></option> <option value="hospital"><%= this.t('Hospital') %></option> <option value="house"><%= this.t('House') %></option> <option value="library"><%= this.t('Library') %></option> <option value="manufacturing"><%= this.t('Manufacturing') %></option> <option value="multi-tenant_dwelling"><%= this.t('Multi-Tenant Dwelling') %></option> <option value="office"><%= this.t('Office') %></option> <option value="parking_garage"><%= this.t('Parking Garage') %></option> <option value="police_station"><%= this.t('Police Station') %></option> <option value="quick_serve_restaurant"><%= this.t('Quick Serve Restaurant') %></option> <option value="restaurant"><%= this.t('Restaurant') %></option> <option value="retail"><%= this.t('Retail') %></option> <option value="service_yard"><%= this.t('Service Yard') %></option> <option value="street"><%= this.t('Street') %></option> <option value="toll_booth"><%= this.t('Toll Booth') %></option> <option value="train_station"><%= this.t('Train Station') %></option> <option value="vehicle"><%= this.t('Vehicle') %></option> <option value="warehouse"><%= this.t('Warehouse') %></option> </select> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-latitude" > <%= this.t('Latitude') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input class="span7" type="text" id="editBridge__latitude" maxlength="13" placeholder="" value="<%- model.get('latitude') %>"/> (-90.0—90.0) </div> <label class="control-label" style="width:80px" data-testid="modal-edit-bridge-tab-location-input-label-longitude" > <%= this.t('Longitude') %>: </label> <div class="span5"> <input class="span7" type="text" id="editBridge__longitude" maxlength="14" placeholder="" value="<%- model.get('longitude') %>"/> (-180.0—180.0) </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-floor" > <%= this.t('Floor') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input class="span5" type="text" id="editBridge__floor" maxlength="6" placeholder="" value="<%- model.get('floor') %>"/> (<%= this.t('number') %>) </div> </div> </div> </div> <% if(this.is_location_feature_enabled) { %> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-location-input-label-notes" > <%= this.t('Notes') %>: </label> <div class="controls"> <div class="row-fluid"> <input class="span9" type="text" id="editBridge__location_notes_location" maxlength="255" placeholder="" value="<%- model.get('notes') %>"/> </div> </div> </div> <%}%> </form> </div> <div class="tab-pane" id="editBridge__metrics"> <span class="pull-right" id="csCamera-help" data_link="bridge_settings_metrics"> <i class="icon-question-sign een-help-link"></i> </span> <ul class="nav nav-tabs"> <li class="active" id="editBridge__tab__metrics_streamed"> <a href="#editBridge__metrics_streamed" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-cloud-bw" > <%= this.t('Cloud BW') %> </a> </li> <li id="editBridge__tab__metrics_bandwidth"> <a href="#editBridge__metrics_bandwidth" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-cloud-bw-measured" > <%= this.t('Cloud BW Measured') %> </a> </li> <li id="editBridge__tab__metrics_available"> <a href="#editBridge__metrics_available" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-storage" > <%= this.t('Storage') %> </a> </li> <li id="editBridge__tab__metrics_delta_storage"> <a href="#editBridge__metrics_delta_storage" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-storage-delta" > <span><i class="icon-caret-up" style="font-size:1.5em;"></i><%= this.t('Storage') %></span></a> </li> <li id="editBridge__tab__metrics_camera_cloud_bw"> <a href="#editBridge__metrics_camera_cloud_bw" data-toggle="tab"> <%= this.t('Cam Cloud BW') %> </a> </li> <li id="editBridge__tab__metrics_camera_kbytesondisk"> <a href="#editBridge__metrics_camera_kbytesondisk" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-cam-storage" > <%= this.t('Cam Storage') %> </a> </li> <li id="editBridge__tab__metrics_camera_delta"> <a href="#editBridge__metrics_camera_delta" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-cam-storage-delta" > <span><i class="icon-caret-up" style="font-size:1.5em;"></i><%= this.t('Cam Storage') %></span> </a> </li> <li id="editBridge__tab__metrics_stored" style="display:none"> <a href="#editBridge__metrics_stored" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-stored" > <%= this.t('Stored') %> </a> </li> <li id="editBridge__tab__metrics_freed" style="display:none"> <a href="#editBridge__metrics_freed" data-toggle="tab" data-testid="modal-edit-bridge-tab-metrics-tab-label-freed" > <%= this.t('Freed') %> </a> </li> </ul> <i class="icon-refresh chart-refresh" id="editBridge__chart_refresh_small"></i> <i class="icon-caret-right legend-toggle" data-toggle="true"></i> <div class="tab-content" id="editBridge__tab_content"> </div> </div> <div class="tab-pane" id="editBridge__analog"> <div style="height:250px;"> <span class="pull-right" id="csCamera-help" data_link="bridge_settings_analog"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group camera-setting"> <div class="row-fluid"> <div class="span8"> <label class="control-label" for="editBridgeModal__analog_inputs" data-testid="modal-edit-bridge-tab-analog-input-label-available-inputs" > <%= this.t('Available inputs') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span12 camera-setting"> <select class="pull-right span10" multiple="multiple" id="editBridgeModal__analog_inputs"></select> </div> </div> </div> </div> </div> </div> </div> </form> </div> </div> <div class="tab-pane" id="editBridge__notes"> <form class="form-horizontal editBridge__notes_form"> <div class="control-group"> <label for="" data-testid="modal-edit-bridge-tab-notes-input-label-available-notes" > <%= this.t('Notes') %>: </label> <div class="row-fluid"> <textarea id="editBridge__notes_textarea" class="span10 editBridge__notes_textarea" maxlength="2000"><%-model.get('notes')%></textarea> </div> </div> </form> </div> <div class="tab-pane" id="editBridge__local"> <span class="pull-right" id="csCamera-help" data_link="bridge_settings_local_display"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group camera-setting rtsp-enable-checkbox hidden"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-local-display-input-label-enable-bridge-rtsp" > <%= this.t('Enable QL Stream (RTSP)') %>: </label> <div class="controls"> <div class="row-fluid" title="<%=this.t('RTSP Stream can only be enabled by account user')%>"> <div class="camera-setting span2"> <input type="checkbox" id="editBridge__local_bridge_rtsp_enable"/> </div> <div class="bridge-rtsp-download-csv camera-setting hidden"> </div> </div> </div> </div> <div class="control-group camera-setting rtsp-auth-checkbox hidden"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-local-display-input-label-enable-bridge-rtsp-auth" > <%= this.t('Enable QL Stream Auth') %>: </label> <div class="controls"> <div class="row-fluid" title="<%=this.t('RTSP Auth can only be enabled by account user')%>"> <div class="camera-setting span1"> <input type="checkbox" id="editBridge__local_bridge_rtsp_auth"/> </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-local-display-input-label-local-display-via-browser" > <%= this.t('Local Display via Browser') %>: </label> <div class="controls"> <div class="row-fluid" title="<%=this.t('Enables live video over Local Area Network')%>"> <div class="camera-setting span1"> <input type="checkbox" id="editBridge__http_local_enable" value="1"/> </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-local-display-input-label-local-display-via-monitor" > <%= this.t('Local Display via Monitor') %>: </label> <div class="controls"> <div class="row-fluid" title="<%=this.t('Enables live video on local monitor')%>"> <div class="camera-setting span1"> <input type="checkbox" id="editBridge__local_display_enable" value="1"/> </div> </div> </div> </div> <div id="editBridge__loading_layouts"> <div style="text-align:center;"><%= this.t('Loading layout list... Please wait') %></div> <img src="_images/spinning.gif" style="width: 25px; margin-left: 49%;"> </div> <div class="control-group" id="editBridge__local_layouts_container" style="display:none;"> <div class="row-fluid"> <div class="span5" data-testid="modal-edit-bridge-tab-local-display-input-label-layouts-available" > <%= this.t('Layouts Available') %>: </div> <div class="span5 offset1" data-testid="modal-edit-bridge-tab-local-display-input-label-layouts-on-display" > <%= this.t('Layouts on Display') %>: </div> </div> <div id="editBridge__layouts_menu" class="row-fluid"> </div> </div> </form> </div> <%var interfaces = model.get("camera_settings").interface_info ? model.get("camera_settings").interface_info : {};%> <%if(interfaces && Object.keys(interfaces).length > 0 && (interfaces["wifi-dis-ap"] || interfaces["wifi-sec-ap"])){%> <div class="tab-pane" id="editBridge__interfaces"> <form class="form-horizontal"> <div class="control-group camera-settings"> <%var self = this;%> <div class="control-label" data-testid="modal-edit-bridge-tab-interfaces-input-label-operating-modes" > <%=self.t("Operating Modes")%>: </div> <div class="controls row-fluid"> <div class="span1 interface-check-container"> <div class="span1"><input type="checkbox" class="interfaceToggle pull-left" data-id="wifi-dis-ap" <%=interfaces["wifi-dis-ap"] && interfaces["wifi-dis-ap"].state === 100 ? "checked":""%>></div> </div> <div class="span2 interface-check-container" style="margin-left: -20px;" data-testid="modal-edit-bridge-tab-interfaces-input-label-discovery" > <%=self.t("Discovery")%> </div> <div class="span1 interface-check-container"> <input type="checkbox" class="interfaceToggle pull-left" data-id="wifi-sec-ap" <%=interfaces["wifi-sec-ap"] && interfaces["wifi-sec-ap"].state === 100 ? "checked":""%>> </div> <div class="span2 interface-check-container" style="margin-left: -20px;" data-testid="modal-edit-bridge-tab-interfaces-input-label-secure" > <%=self.t("Secure")%> </div> </div> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-interfaces-input-label-discovery-ssid" > <%= self.t('Discovery SSID') %>: </label> <div class="controls"> <div class="row-fluid"> <p class="span5" style="padding: 5px;"><%-(interfaces['wifi-dis-ap'] && interfaces['wifi-dis-ap'].settings ? atob(interfaces['wifi-dis-ap'].settings.ssid) : self.t("None"))%></p> </div> </div> <label class="control-label" style="margin-top: 4px;" for="" data-testid="modal-edit-bridge-tab-interfaces-input-label-secure-ssid" > <%=self.t('Secure SSID') %>: </label> <div class="controls" style="margin-top: 4px;" > <div class="row-fluid"> <p class="span5" style="padding: 5px;"> <%-(interfaces['wifi-sec-ap'] && interfaces['wifi-sec-ap'].settings ? atob(interfaces['wifi-sec-ap'].settings.ssid) : self.t("None"))%> </p> </div> </div> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-interfaces-input-label-channel" > <%= self.t('Channel') %>: </label> <div class="controls"> <div class="row-fluid"> <p class="span5" style="padding: 5px;">1</p> </div> </div> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-interfaces-input-label-password" > <%= self.t('Password') %>: </label> <div class="controls"> <div class="row-fluid"> <p class="span5" style="padding: 5px;"><%- (interfaces['wifi-sec-ap'] && interfaces['wifi-sec-ap'].settings && interfaces['wifi-sec-ap'].settings.security ? interfaces['wifi-sec-ap'].settings.security.psk : self.t("None"))%></p> </div> </div> <label class="control-label" for="" data-testid="modal-edit-bridge-tab-interfaces-input-label-protocol" > <%= self.t('Protocol') %>: </label> <div class="controls"> <div class="row-fluid"> <p class="span5" style="padding: 5px;"><%=self.t('WPA2')%></p> </div> </div> </div> </form> </div> <%}%> <div id="bridge-health"></div> </script> <style> #small_input { display: inline; width: 10px; } .advanced_options { display: none; } .show_advanced_options .advanced_options { display: block; } </style>  <script type="text/template" id="editCameraModal-template"> <span class="modal-heading-append"> // <%-model.get("deviceName") ? model.get('deviceName') : ''%><% if (model.isAnalog() || model.get('is_status_bad_analog')) { %>, <%= this.t('Analog Input') + ' ' + this.model.getAnalogInputNumber() %><% } %></span> <div class="tab-pane active" id="csCamera">  <span class="pull-right" id="csCamera-help" data_link="<%= model.isMCACamera() ? 'camera_settings_mca_camera' : 'camera_settings_camera' %>"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <%if(!model.get('deviceShare') && !model.isMCACamera()){%> <div class="control-group camera-setting" data-camera-setting="camera_on" style="margin-top:20px;"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-on" > <%= this.t('On') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting"> <div> <input type="checkbox" id="editCamera__camera_on" value="1"/> </div> </div> <%if(!model.isCloudCamera()){%> <div class="span4"> <select class="span11" id="editCamera__operating_hours"> <option value="*"><%= this.t('24 hours') %></option> <option value="work"><%= this.t('Work hours') %> (<%=model.get('camera_work_hours')%>)</option> <option value="nonwork"><%= this.t('Non-work hours') %></option> <option value="custom"><%= this.t('Custom hours') %></option> </select> </div> <div id="editCamera__operating_hours_custom" class="span7 hide"> <div class="input-append bootstrap-timepicker"> <input id="editCamera__operating_hours_custom_start" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> To <div class="input-append bootstrap-timepicker"> <input id="editCamera__operating_hours_custom_end" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> <%}%> </div> </div> </div> <%}%> <% if (model.isAnalog() || model.get('is_status_bad_analog')) { %> <div class="control-group"> <label class="control-label" data-testid="modal-camera-settings-tab-camera-input-label-bad-signal-protection" > <%= this.t('Bad Signal Protection') %>: </label> <div class="controls"> <input type="checkbox" class="ignore-analog" <%= !model.get('ignore_bad_signal_schedule_set') ? 'checked' : '' %> title="<%= this.t('Protects against video loss on other inputs by watching for bad analog signal') %>"> <% if (model.get('is_status_bad_analog') && !model.get('ignore_bad_signal_schedule_set')) {%> <button type="button" class="reset-analog btn btn-danger" title="<%= this.t('Reset bad analog signal') %>"> <%= this.t('Reset Bad Signal') %> </button> <% } %> <span id="bad-analog-action-message"></span> </div> </div> <% } %> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-name" > <%= this.t('Name') %>: </label> <div class="controls"> <div class="row-fluid"> <input id="editCamera__name" class="span6" type="text" maxlength="45" value="<%- this.getFilteredDeviceName() %>" pattern='[^"]*' title="<%- this.t('Please do not use any special characters like quotes etc.') %>"/> </div> </div> </div> <%if(!model.isAnalog() && !model.isChildCamera() && !model.get('deviceShare') && !model.isCloudCamera()){%> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-login" > <%(!model.isRtsp() ? this.t('ONVIF') : '')%> <%= this.t('Login') %>: </label> <div class="controls"> <div class="row-fluid"> <%/* Safari is aggressive with autopopulating username/password fields, so these bogus fields are needed in order to fool Safari into using them instead of the real fields. */%> <div style="position: fixed;width: 1px;left: -100vw;"> <input type="text" tabindex="-1" id="bogus_username" style="width:1%"/> <input type="password" tabindex="-1" id="bogus_password" style="width:1%"/> </div> <input id="editCamera__onvifu" class="span6" type="text" maxlength="40" placeholder="<%= this.t('Username') %>" autocomplete="off" value="<%- model.get('cameraUsername') %>"/> <input id="editCamera__onvifp" class="span6 input-password" type="text" maxlength="40" placeholder="<%= this.t('Password') %>" autocomplete="off" value="<%- model.get('cameraPassword') %>"/> </div> </div> </div> <%}%> <%if(model.get('accountImmixEnabled')){%> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-immix-email" > <%= this.t('Immix Email') %>: </label> <div class="controls"> <div class="row-fluid"> <input id="editCamera__sureview_email" class="span6" type="text" maxlength="300" placeholder="<%= this.t('Immix Email') %>" autocomplete="off" value="<%- model.get('cameraImmixEmail') %>" /> <input id="editCamera__sureview_checkbox" type="checkbox" class="sureview-checkbox" /> </div> </div> </div> <%}%> <%if(model.isRtsp()){%> <%if(model.isRtspStatic()){%> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-rtsp-ip-address" > <%= this.t('RTSP IP Address') %>: </label> <div class="controls"> <div class="row-fluid"> <input type="text" class="span4" maxlength="15" id="editCamera__rtsp_ip_address" placeholder="<%= this.t('IP Address') %>" value="<%-model.get('rtsp_ip_address')%>"/> </div> </div> </div> <%}%> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-rtsp-video-resource" > <%= this.t('RTSP Video Resource') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span4"> <input type="text" class="span12" maxlength="200" id="editCamera__rtsp_video_resource" placeholder="<%= this.t('Video Resource (H264)') %>" value="<%-model.get('rtsp_video_resource')%>"/> </div> <label id="editCamera__rtsp_preview_resource_label" class="control-label" for=""><%= this.t('RTSP Preview Resource') %>:</label> <div class="span4"> <input type="text" class="span12" maxlength="200" id="editCamera__rtsp_preview_resource" placeholder="<%= this.t('Preview Resource (MJPEG)') %>" value="<%-model.get('rtsp_preview_resource')%>"/> </div> </div> </div> </div> <%}%> <%if(!model.get('deviceShare')){%> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-time-zone" > <%= this.t('Time Zone') %>: </label> <div class="controls"> <div class="row-fluid"> <select id="editCamera__timezone" class="span6"> <% var model = this.model; var device_timezone = model.get('deviceTZ'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(device_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=device_timezone%>" selected><%=device_timezone%></option> <% } %> </select> </div> </div> </div> <%}%> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-tags" > <%= this.t('Tags') %>: </label> <div class="controls"> <div class="row-fluid"> <input name="tags" class="span8" id="editCamera__tags" value="<%- model.getCustomTags().join(',') %>" /> </div> </div> </div>  <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-notes" > <%= this.t('Notes') %>: </label> <div class="controls"> <div class="row-fluid"> <textarea id="editCamera__notes" class="span12" style="height: 70px;" maxlength="2000"><%-model.get('notes')%></textarea> </div> </div> </div> <% if(model.is911Visible()) { %> <div class="control-group" data-camera-setting="camera_911"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-911" > <%= this.t('911 Camera Sharing') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting"> <% var title = this.model.is911Available() && !this.model.isLatAndLongSet() ? utils.t('WARNING: To use 911 Camera Sharing, a US-based coordinate (Latitude and Longitude) must be provided in the location tab.') : ''; var checked = this.model.get('e911') ? 'checked' : ''; var enabled = this.model.is911Available() && this.model.isLatAndLongSet() ? '' : 'disabled'; %> <input type="checkbox" id="editCamera__e911" title="<%=title%>" <%=checked%> <%=enabled%> /> </div> </div> </div> </div> <% } %> <div class="control-group cs_advanced_camera_info"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-camera-input-label-info" > <%= this.t('Information') %>: </label> <div class="controls"> <div id="editCamera__device_info" class="info-box"> <%if(model.get('camera_info')){%> <% if(!model.isAnalog() && !model.isRtsp()) { %> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-manufacturer" > <%= this.t('Manufacturer') %>: </div> <div class="span7"> <%-model.get('camera_info').make%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-model" > <%= this.t('Model') %>: </div> <div class="span7"> <%-model.get('camera_info').model%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-firmware" > <%= this.t('Firmware') %>: </div> <div class="span7"> <%-model.get('camera_info').version%> </div> </div> <% } %> <% if(model.isAnalog()) { %> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-analog-input" > <%= this.t('Analog Input') %>: </div> <div class="span7"> <%-model.getAnalogInputNumber()%> </div> </div> <% } else { %> <% if(model.get('camera_info').mac){%> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-mac-address" > <%= this.t('MAC Address') %>: </div> <div class="span7"> <%-model.get('camera_info').mac%> </div> </div> <% } %> <% if(model.get('deviceIPAddress')) { %> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-ip-address" > <%= this.t('IP Address') %>: </div> <div class="span7"> <a id="editCamera__vpn" href="http://<%=model.get('deviceIPAddress')%>"> </a> </div> </div> <% } %> <% } %> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-esn" > <%= this.t('ESN') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceID') : 'not available') %> </div> </div> <% if(!model.isCloudCamera()) {%> <div class="row-fluid tech-details"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-guid" > <%= this.t('GUID') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceGUID') : 'not available') %> </div> </div> <% } %> <%if(model.get('mca_device_freespace') && !model.isCloudCamera()){%> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-free-space" > <%= this.t('Free space') %>: </div> <div class="span7"> <%- model.get('mca_device_freespace') %> </div> </div> <% } %> <%if(model.get('deviceBridge') && bridgeList.findByDeviceID(model.get('deviceBridge')) && !model.isCloudCamera()){%> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-bridge" > <%= this.t('Bridge') %>: </div> <div class="span7"> <%-bridgeList.findByDeviceID(model.get('deviceBridge')).get('deviceName') + ' (ESN: ' + model.get('deviceBridge') + ')'%> </div> </div> <% } %> <%if(model.get('camera_info').admin_user){%> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-default-web-username" > <%= this.t('Default Web Username') %>: </div> <div class="span7"> <%-model.get('camera_info').admin_user%> </div> </div> <%}%> <%if(model.get('camera_info').admin_password){%> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-default-web-password" > <%= this.t('Default Web Password') %>: </div> <div class="span7"> <%-model.get('camera_info').admin_password%> </div> </div> <%}%> <%if(model.get('camera_settings').driver_info && !model.isCloudCamera()){%> <div class="row-fluid tech-details"> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-driver-descriptor" > <%= this.t('Driver Descriptor') %>: </div> <div class="span7"> <%-model.get('camera_settings').driver_info.descriptor%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-driver-descriptor-version" > <%= this.t('Driver Descriptor Version') %>: </div> <div class="span7"> <%-model.get('camera_settings').driver_info.descriptor_version%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-driver-local" > <%= this.t('Driver Local') %>: </div> <div class="span7"> <%-model.get('camera_settings').driver_info.local%> </div> </div> <div class="row-fluid"> <div class="span4 text-right" data-testid="modal-camera-settings-tab-camera-label-info-driver-version" > <%= this.t('Driver Version') %>: </div> <div class="span7"> <%-(model.get('camera_settings').driver_info.version ? model.get('camera_settings').driver_info.version : 'not available')%> </div> </div> <div class="row-fluid"> <button id="editCamera__getRTSPinfo" class="btn-mini btn-info span2" data-testid="modal-camera-settings-tab-camera-button-get-rtsp-info" > <%=this.t('Get RTSP Info')%> </button> </div> </div> <%}%> <%} else {%> <div class="row-fluid"> <div class="span11 text-center" data-testid="modal-camera-settings-tab-camera-info-not-available" > <%= this.t('Not available at this time') %> </div> </div> <%}%> </div> </div> </div> <div class="controls"> <% if(userList.getCurrentUser().checkAddDeleteDevices()) { %> <button type="button" class="ignore btn btn-inverse" data-id="<%= model.get('deviceID') %>" title="<%= this.t('remove camera from account') %>" data-testid="modal-camera-settings-tab-camera-button-delete-camera" > <%=this.t("Delete Camera")%> </button> <% } %> </div> </form> </div> <div class="tab-pane" id="csRetention">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_retention"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group camera-setting" data-camera-setting="cloud_retention_days"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-retention-input-label-cloud-retention" > <%= this.t('Cloud Retention') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5 camera-setting"> <% var cloud_retention_days = model.get('camera_settings').cloud_retention_days %> <select class="span11 billing" id="editCamera__cloud_retention_days"> <option value="1"> <%= this._getM10LabelText() %> </option> <option value="2" <%=(cloud_retention_days == '2' ? 'selected' : '')%>>2 <%= this.t('days') %></option> <option value="3" <%=(cloud_retention_days == '3' ? 'selected' : '')%>>3 <%= this.t('days') %></option> <option value="5" <%=(cloud_retention_days == '5' ? 'selected' : '')%>>5 <%= this.t('days') %></option> <option value="7" <%=(cloud_retention_days === undefined || cloud_retention_days == '7' ? 'selected' : '')%>>7 <%= this.t('days') %></option> <option value="14" <%=(cloud_retention_days == '14' ? 'selected' : '')%>>14 <%= this.t('days') %></option> <option value="20" <%=(cloud_retention_days == '20' ? 'selected' : '')%>>20 <%= this.t('days') %></option> <option value="28" <%=(cloud_retention_days == '28' ? 'selected' : '')%>>28 <%= this.t('days') %></option> <option value="30" <%=(cloud_retention_days == '30' ? 'selected' : '')%>>30 <%= this.t('days') %></option> <option value="31" <%=(cloud_retention_days == '31' ? 'selected' : '')%>>31 <%= this.t('days') %></option> <option value="60" <%=(cloud_retention_days == '60' ? 'selected' : '')%>>60 <%= this.t('days') %></option> <option value="90" <%=(cloud_retention_days == '90' ? 'selected' : '')%>>90 <%= this.t('days') %></option> <option value="180" <%=(cloud_retention_days == '180' ? 'selected' : '')%>>180 <%= this.t('days') %></option> <option value="365" <%=(cloud_retention_days == '365' ? 'selected' : '')%>>1 <%= this.t('Year') %></option> <option value="730" <%=(cloud_retention_days == '730' ? 'selected' : '')%>>2 <%= this.t('Years') %></option> <option value="1095" <%=(cloud_retention_days == '1095' ? 'selected' : '')%>>3 <%= this.t('Years') %></option> <option value="1825" <%=(cloud_retention_days == '1825' ? 'selected' : '')%>>5 <%= this.t('Years') %></option> </select> </div> <% if(this.deviceBridge && this.deviceBridge.isCMVR && this.deviceBridge.isCMVR()) { %> <div class="camera-setting span6" data-camera-setting="preview_only_cloud_retention"> <div class="row-fluid"> <div class="span2 camera-setting"> <input type="checkbox" class="billing" id="editCamera__preview_only_cloud_retention"/> </div> <label class="span6" style="padding: 3px 0px 0px 0px;" data-testid="modal-camera-settings-tab-retention-input-label-cloud-preview-only" > <%= this.t('Cloud Preview Only (PR1)') %> </label> </div> </div> <% } %> </div> </div> </div> <% if(this.deviceBridge && this.deviceBridge.isCMVR && this.deviceBridge.isCMVR()) { %> <div class="control-group"> <label class="control-label" data-testid="modal-camera-settings-tab-retention-input-label-minimum-on-premise-retention" > <%= this.t('Minimum On Premise Retention') %>: </label> <div class="controls"> <% var bridge_target_days = model.get('camera_settings').bridge_target_days %> <select id="editCamera__bridge_target_days">  <option value="-1" <%=(!bridge_target_days || bridge_target_days === -1 ? 'selected' : '')%>><%=this.t('None') %></option> <option value="1" <%=(bridge_target_days === 1 ? 'selected' : '')%>>1 <%= this.t('day') %></option> <option value="2" <%=(bridge_target_days === 2 ? 'selected' : '')%>>2 <%= this.t('days') %></option> <option value="3" <%=(bridge_target_days === 3 ? 'selected' : '')%>>3 <%= this.t('days') %></option> <option value="5" <%=(bridge_target_days == '5' ? 'selected' : '')%>>5 <%= this.t('days') %></option> <option value="7" <%=(bridge_target_days === 7 ? 'selected' : '')%>>7 <%= this.t('days') %></option> <option value="14" <%=(bridge_target_days === 14 ? 'selected' : '')%>>14 <%= this.t('days') %></option> <option value="20" <%=(bridge_target_days === 20 ? 'selected' : '')%>>20 <%= this.t('days') %></option> <option value="28" <%=(bridge_target_days === 28 ? 'selected' : '')%>>28 <%= this.t('days') %></option> <option value="30" <%=(bridge_target_days === 30 ? 'selected' : '')%>>30 <%= this.t('days') %></option> <option value="31" <%=(bridge_target_days === 31 ? 'selected' : '')%>>31 <%= this.t('days') %></option> <option value="45" <%=(bridge_target_days === 45 ? 'selected' : '')%>>45 <%= this.t('days') %></option> <option value="60" <%=(bridge_target_days === 60 ? 'selected' : '')%>>60 <%= this.t('days') %></option> <option value="90" <%=(bridge_target_days === 90 ? 'selected' : '')%>>90 <%= this.t('days') %></option> <option value="180" <%=(bridge_target_days === 180 ? 'selected' : '')%>>180 <%= this.t('days') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" data-testid="modal-camera-settings-tab-retention-input-label-maximum-on-premise-retention" > <%= this.t('Maximum On Premise Retention') %>: </label> <div class="controls"> <% var local_retention_days = model.get('camera_settings').local_retention_days %> <select id="editCamera__local_retention_days"> <option value="-1" <%=(local_retention_days == '-1' ? 'selected' : '')%>><%= this.t('None') %></option> <option value="1" <%=(local_retention_days == '1' ? 'selected' : '')%>>1 <%= this.t('day') %></option> <option value="2" <%=(local_retention_days == '2' ? 'selected' : '')%>>2 <%= this.t('days') %></option> <option value="3" <%=(local_retention_days == '3' ? 'selected' : '')%>>3 <%= this.t('days') %></option> <option value="5" <%=(local_retention_days == '5' ? 'selected' : '')%>>5 <%= this.t('days') %></option> <option value="7" <%=(local_retention_days == '7' ? 'selected' : '')%>>7 <%= this.t('days') %></option> <option value="14" <%=(local_retention_days == '14' ? 'selected' : '')%>>14 <%= this.t('days') %></option> <option value="20" <%=(local_retention_days == '20' ? 'selected' : '')%>>20 <%= this.t('days') %></option> <option value="28" <%=(local_retention_days == '28' ? 'selected' : '')%>>28 <%= this.t('days') %></option> <option value="30" <%=(local_retention_days == '30' ? 'selected' : '')%>>30 <%= this.t('days') %></option> <option value="31" <%=(local_retention_days == '31' ? 'selected' : '')%>>31 <%= this.t('days') %></option> <option value="45" <%=(local_retention_days == '45' ? 'selected' : '')%>>45 <%= this.t('days') %></option> <option value="60" <%=(!local_retention_days || local_retention_days == '60' ? 'selected' : '')%>>60 <%= this.t('days') %></option> <option value="90" <%=(local_retention_days == '90' ? 'selected' : '')%>>90 <%= this.t('days') %></option> <option value="180" <%=(local_retention_days == '180' ? 'selected' : '')%>>180 <%= this.t('days') %></option> <option value="365" <%=(local_retention_days == '365' ? 'selected' : '')%>>1 <%= this.t('Year') %></option> </select> </div> </div> <% } %> <p class="red new-line" id="editCamera_retention_msg">  </p> </form> </div> <div class="tab-pane" id="csResolution">  <span class="pull-right move_down_ten" id="csCamera-help" data_link="<%= model.isMCACamera() ? 'camera_settings_mca_resolution' : 'camera_settings_resolution' %>"> <i class="icon-question-sign een-help-link"></i> </span> <div class="tab-pane-note" style="<%=(!model.isResolutionConfigurable()?'display:block !important':'')%>" data-testid="modal-camera-settings-tab-resolution-note" > <%if(model.isRtsp()){%> *<%= this.t("*NOTE: Resolution/quality/bit-rate only editable via camera's own configuration interface") %> <%} else {%> *<%= this.t("this setting only editable via camera's own configuration interface") %> <%}%> </div> <form class="form-horizontal"> <%if(model.get("camera_settings").video_standard){%> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-video-standard" > <%= this.t('Video Standard') %>: </label> <div class="controls"> <div class="row-fluid"> <div style="margin-left: 0px !important" class="span3 camera-setting"> <select class="span11" id="editCamera__video_standard"></select> </div> </div> </div> </div> <%}%> <%if(!model.isCloudCamera()){%> <div class="row-fluid"> <div class="span4"> <h5 data-testid="modal-camera-settings-tab-resolution-header-preview-video" > <%= this.t('Preview Video') %> </h5> </div> <div class="span7"> <% if (this.getPreviewBandwidthText()) {%> <span class="small_font move_down_ten" style="float: right;" data-testid="modal-camera-settings-tab-resolution-input-label-estimated-preview-video" > <%= this.t('Estimated preview video for this camera')%> <%= this.getPreviewBandwidthText()%> </span> <%}%> </div> </div> <div class="control-group" style="<%=(model.isRtsp()?'display:none':'')%>"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-resolution" > <%= this.t('Resolution') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <%=(!model.isResolutionConfigurable()?'<em>' + this.t('unknown') + '*</em>':'')%> <select class="span11" id="editCamera__preview_resolution" style="<%=(!model.isResolutionConfigurable()?'display:none':'')%>"></select> </div> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-quality" > <%= this.t('Quality') %>: </label> <div class="span2 camera-setting"> <%=(!model.isResolutionConfigurable()?'<em>' + this.t('unknown') + '*</em>':'')%> <select class="span10" id="editCamera__preview_quality" style="<%=(!model.isResolutionConfigurable()?'display:none':'')%>"></select> </div> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-update-rate" > <%= this.t('Update Rate') %>: </label> <div class="span2 camera-setting"> <select class="span10" id="editCamera__preview_interval_ms"></select> </div> </div> </div> </div> <%}%> <% if (!model.isMCACamera() && !model.isCloudCamera()) { %> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-transmit-mode" > <%= this.t('Transmit Mode') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <select class="span11" id="editCamera__preview_transmit_mode"></select> </div> <div class="advanced_transmit advanced_transmit_hidden"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-max-bandwidth" > <%= this.t('Max Bandwidth') %>: </label> <div class="span3 camera-setting"> <select class="span11" id="editCamera__preview_realtime_bandwidth" een-default="1000000"> </select> </div> </div> <label class="control-label" for="editCamera__original_aspect_ratio" data-testid="modal-camera-settings-tab-resolution-input-label-original-aspect-ratio" > <%= this.t('Original Aspect Ratio') %>: </label> <div class="span2 camera-setting"> <input type="checkbox" name="" id="editCamera__original_aspect_ratio" checked> </div> </div> <span class="red small_font advanced_transmit_hidden" id="preview_bandwidth_msg"><%= model.get('preview_msg') %></span> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-input-label-aspect-ratio" > <%= this.t('Aspect ratio') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <select class="span11" id="editCamera__preview_aspect_ratio"></select> </div> </div> </div> </div> <% } %> <div class="row-fluid"> <h5 data-testid="modal-camera-settings-tab-resolution-header-full-video-recording" > <%= this.t('Full Video Recording') %> </h5> </div> <div class="control-group" style="<%=(model.isRtsp()?'display:none':'')%>"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-resolution" > <%= this.t('Resolution') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <%=(!model.isResolutionConfigurable()?'<em>' + this.t('unknown') + '*</em>':'')%> <select class="span11 billing" id="editCamera__video_resolution" style="<%=(!model.isResolutionConfigurable()?'display:none':'')%>"></select> </div> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-quality" > <%= this.t('Quality') %>: </label> <div class="span2 camera-setting"> <%=(!model.isResolutionConfigurable()?'<em>' + this.t('unknown') + '*</em>':'')%> <select class="span10" id="editCamera__video_quality" style="<%=(!model.isResolutionConfigurable()?'display:none':'')%>"></select> </div> <div id="video_bandwidth_wrapper" style="<%=(!model.isCloudCamera() ? 'display:none' : '')%>" > <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-bit-rate" > <%= this.t('Bit Rate') %>: </label> <div class="span3 camera-setting"> <%=(!model.isResolutionConfigurable()?'<em>' + this.t('unknown') + '*</em>':'')%> <select class="span11" id="editCamera__video_bandwidth_factor" style="<%=(!model.isResolutionConfigurable() ? 'display:none' : '')%>" ></select> </div> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-transmit-mode" > <%= this.t('Transmit Mode') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <% if (!model.isCloudCamera()) { %> <select class="span11" id="editCamera__video_transmit_mode"></select> <%} else {%> <select class="span11" disabled> <option>always</option> </select> <% } %> </div> <% if (!model.isMCACamera()) { %> <label class="control-label" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-record-when" > <%= this.t('Record When') %>: </label> <div class="span2 camera-setting"> <select class="span10" id="editCamera__video_capture_mode"></select> </div> <% } %> <% if(model.get('camera_settings').local_retention_days && model.get('camera_settings').local_retention_days !== -1) { %> <label class="control-label always_retention_days" style="display: <%=model.get('camera_settings').video_capture_mode ==='always' ? 'block' : 'none'%>" for="" data-testid="modal-camera-settings-tab-resolution-full-video-input-label-for" > <%= this.t('For') %>: </label> <div class="span2 camera-setting always_retention_days" style="display: <%=model.get('camera_settings').video_capture_mode ==='always' ? 'block' : 'none'%>"> <%var always_value = model.get("always_retention_days") ? model.get("always_retention_days") : 0;%> <select class="span10" id="editCamera__always_retention_days"> <option value="0" <%=always_value === 0 ? "selected" : ""%>><%=this.t("default")%></option> <option value="1" <%=always_value === 1 ? "selected" : ""%>>1 <%=this.t("days")%></option> <option value="2" <%=always_value === 2 ? "selected" : ""%>>2 <%=this.t("days")%></option> <option value="3" <%=always_value === 3 ? "selected" : ""%>>3 <%=this.t("days")%></option> <option value="4" <%=always_value === 4 ? "selected" : ""%>>4 <%=this.t("days")%></option> <option value="5" <%=always_value === 5 ? "selected" : ""%>>5 <%=this.t("days")%></option> </select> </div> <% } %> </div> </div> </div> </form> <p class="red new-line" id="editCamera_resolution_msg">  </p> </div>  <div class="tab-pane" id="csDewarping"></div>   <div class="tab-pane" id="csIO"> <ul class="nav nav-tabs io-tabs hide"> <li class="active"> <a href="#csIO-input" data-toggle="tab" data-testid="modal-camera-settings-tab-io-label-input" > <%=this.t('Input')%> </a> </li> <li class=""> <a href="#csIO-output" data-toggle="tab" data-testid="modal-camera-settings-tab-io-label-output" > <%=this.t('Output')%> </a> </li> </ul> <div class="tab-content io-tabs-content hide" id="csIO-panes"> <div class="tab-pane active" id="csIO-input"></div> <div class="tab-pane" id="csIO-output"></div> </div> <div class="io-old-bridge-outer hide"> <span class="io-old-bridge-inner" data-testid="modal-camera-settings-tab-io-warning-old-bridge" > <%=this.t('{{bridge_name}} must be updated before you can use camera inputs and outputs. Please contact {{support_link}} to arrange for an update.')%> </span> </div> </div>  <div class="tab-pane" id="csptz">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_ptz"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="row-fluid"> <div class="span1 control-label" style="width: 103px;" data-testid="modal-camera-settings-tab-ptz-input-label-mode" > <%=this.t('Mode')%>: </div> <div class="span3"> <%var currSetting = this.model.get('all_camera_settings').active_settings; var ptzSetting = currSetting.ptz_active_tours && Object.keys(currSetting.ptz_active_tours.v).length > 0 ? "tour" : "manual"; var isHome = ptzSetting === "tour" && Object.keys(currSetting.ptz_active_tours.v).length === 1 && "default" in currSetting.ptz_active_tours.v ? true : false; var isCont = ptzSetting === "tour" && Object.keys(currSetting.ptz_active_tours.v).length >= 1 && "continuous" in currSetting.ptz_active_tours.v ? true : false; var finalSetting = isHome ? "home" : (isCont ? "continuous" : ptzSetting);%> <select style="width:100%" id="camera_settings_ptz_mode"> <option value="manual" <%=(finalSetting === "manual" ? "selected" : "")%>>Manual Only</option> <option value="home" style="display:none;" id="return_home" <%=(finalSetting === "home" ? "selected" : "")%>>Home Return</option> <option value="continuous" <%=(finalSetting === "continuous" ? "selected" : "")%>>Tour</option> <option style="display:none;" id="camera_settings_ptz_single_tour" value="tour" <%=(finalSetting === "tour" ? "selected" : "")%>>Single Tour</option> </select> </div> <div class="span1 control-label" style="width: 60px;" data-testid="modal-camera-settings-tab-ptz-input-label-after" > <%=this.t('After')%>: </div> <div class="span3"> <input style="width:100%" min="30" value="30" type="number" id="camera_settings_ptz_delay"> </div> <div class="span1" style="padding-top: 5px;" data-testid="modal-camera-settings-tab-ptz-input-label-seconds" > <%=this.t('seconds')%>: </div> </div> <div class="roi-container"> </div> <div class="row-fluid" style="width:98%"> <div class="row-fluid" id="editCamera__ptz_stations"> <div class="row-fluid" style="width:98%"> <div class="span2" style ="padding-top: 10px;padding-left: 5px;" data-testid="modal-camera-settings-tab-ptz-input-label-stations" > <%=this.t('Stations')%> </div> <button type="button" class="span2 btn-small btn-info" id="camera_settings_addNewStation" style="margin-top: 2px;margin-bottom: 2px;" data-testid="modal-camera-settings-tab-ptz-button-label-add-new-stations" > <%=this.t('Add New Station')%> </button> </div> <div style="height: 250px; overflow-y: scroll;"> <table class="table table-condensed table-bordered table-striped" id="ptzTable"> <thead> <tr> <th style="width:5%" data-testid="modal-camera-settings-tab-ptz-table-header-order" > <%= this.t('Order') %> </th> <th style="width:20%" data-testid="modal-camera-settings-tab-ptz-table-header-name" > <%= this.t('Name') %> </th> <th style="width:10%" data-testid="modal-camera-settings-tab-ptz-table-header-set-home" > <%= this.t('Set Home') %> </th> <th style="width:10%" data-testid="modal-camera-settings-tab-ptz-table-header-time-at-station" > <%= this.t('Time At Station') %> </th> <th style="width:10%" data-testid="modal-camera-settings-tab-ptz-table-header-options" > <%= this.t('Options') %> </th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody id="ptzTableBody"> <% if(this.model.get('camera_settings').ptz_stations) {%> <% _.each(Object.getOwnPropertyNames(this.model.get('camera_settings').ptz_stations), function(item){ %> <tr class="camera_settings_ptz_row" id="<%=item%>"> <td> <div class="span11"> <a href="#" class="station_up"><i class="icon-arrow-up"></i></a> <a href="#" class="station_down"><i class="icon-arrow-down"></i></a> </div> </td> <td> <%-item%> </td> <td> <input type="checkbox" class="selected-home"> </td> <td> <input min="5" value="30" type="number" style="width:85%" class="dwell-time"> </td> <td> <button class="goto-ptz-station"><i class="icon-arrow-right"></i></button><button class="edit-ptz-station"><i class="icon-pencil"></i></button><button class="remove-ptz-station"><i class="icon-trash"></i></button> </td> </tr> <% }); %> <%}%> </tbody> </table> </div> </div> </div> <div id="camera_settings_newPtzStation" style="display:none;"> <input id="camera_settings_newPtzName" type="text"> <div class="btn-group" style="margin-top: 10px;margin-bottom: 2px;"> <button class="btn-small btn-info" id="camera_settings_confNewStation" data-testid="modal-camera-settings-tab-ptz-footer-save" > <%= this.t('Save') %> </button> <button class="btn-small btn-warning" id="camera_settings_cancelNewStation" data-testid="modal-camera-settings-tab-ptz-footer-cancel" > <%= this.t('Cancel') %> </button> </div> </div> </form> </div> <div class="tab-pane" id="csAnalytics">  <ul class="nav nav-tabs"> <li id="csAnalytics_master_tab" class="active"> <a href="#csAnalytics_master" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-enable" > <%=this.t('Enable')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_object_counting" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-counting" > <%=this.t('Counting')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_line_crossing" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-line-crossing" > <%=this.t('Line Crossing')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_intrusion" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-intrusion" > <%=this.t('Intrusion')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_loitering" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-loitering" > <%=this.t('Loitering')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_tampering" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-tampering" > <%=this.t('Tampering')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_lpr" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-vsp" > <%=this.t('VSP')%> </a> </li> <li class="ana-tab"> <a href="#csAnalytics_uncanny_lpr" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-label-lpr" > <%=this.t('LPR')%> </a> </li> </ul> <div class="tab-content" id="csAnalytics-panes"> <div class="tab-pane active" id="csAnalytics_master"> <span class="pull-right help-link" data_link="camera_settings_analytics_enable_analytics"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div id="cs_analytics_sub_menu"> <div class="container-fluid"> <div class="row-fluid"> <div class="span2 editCamera-analytics-message" data-testid="modal-camera-settings-tab-analytics-header-label-enable-analytics" > <%= this.t('Enable Analytics') %> </div> <div class="span9"> <p class="red" id="analytics-billing-message" data-testid="modal-camera-settings-tab-analytics-warning-additional-fee" > <%= this.t('Turning on analytics may use additional resources.') %> </p> <p class="red" id="analytics-application-limit-message" data-testid="modal-camera-settings-tab-analytics-warning-not-able-to-enable-both-analytics" > <%= this.t('You can not enable both device analytics and VMS analytics. Please choose one option to continue.') %> </p> <p class="green" id="editCamera__analytics-quality-message" data-testid="modal-camera-settings-tab-analytics-info-set-preview-quality" > <%= this.t('We have set Preview Quality to analytics for you.') %> <a class="green editCamera__analytics-quality-see-link" href="#">See or revert.</a> </p> </div> </div> </div> <div class="control-group control-group-counting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-analytics-input-label-counting" > <%= this.t('Counting') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_object_counting" type="checkbox" id="editCamera__object_counting_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-counting" > <span> <%=this.t("Object counting is used to count the number of objects crossing over a line. This can be used for counting cars, people, or other objects. Total count per day is maintained. Graphs are available.") %> </span> </div> </div> </div> </div> <div class="control-group control-group-line-crossing"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-analytics-input-label-line-crossing" > <%= this.t('Line Crossing') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_line_crossing" type="checkbox" id="editCamera__line_crossing_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-line-crossing" > <span> <%=this.t("Detects when an object crosses a line. Direction may be specified and Notifications may be generated") %> </span> </div> </div> </div> </div> <div class="control-group control-group-intrusion-detection"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-analytics-input-label-intrusion-detection" > <%= this.t('Intrusion Detection') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_intrusion" type="checkbox" id="editCamera__intrusion_detection_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-line-crossing" > <span> <%=this.t("Intrusion detection is used to generate an alert when an object enters a forbidden area. The forbidden area may be any size and shape. Notifications may be sent.") %> </span> </div> </div> </div> </div> <% if(userList.getCurrentUser().checkFeatureFlag('loitering_analytics')) { %> <div class="control-group control-group-loitering-analytics"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-analytics-input-label-loitering" > <%= this.t('Loitering') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_loitering" type="checkbox" id="editCamera__loitering_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-loitering" > <span> <%=this.t("Loitering detection is used to generate an alert when a moving object remains in a predefined area for a specific amount of time. Notifications may be sent.") %> </span> </div> </div> </div> </div> <% } %> <% if(userList.getCurrentUser().checkFeatureFlag('tampering_analytics')) { %> <div class="control-group control-group-tampering-analytics"> <label class="control-label" for="editCamera__tampering_enabled" data-testid="modal-camera-settings-tab-analytics-input-label-tampering" > <%= this.t('Tampering') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_tampering" type="checkbox" id="editCamera__tampering_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-tampering" > <span> <%=this.t("Tampering detection is used to generate an alert when someone is trying to block the camera's view or the image is greatly altered.") %> </span> </div> </div> </div> </div> <% } %> <% if(userList.getCurrentUser().checkFeatureFlag('lpr') && this._LPRSupport()) { %> <div class="control-group control-group-lpr"> <label class="control-label" for="editCamera__object_lpr_enabled" data-testid="modal-camera-settings-tab-analytics-input-label-vsp" > <%= this.t('VSP(Vehicle Surveillance Package)') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_lpr" type="checkbox" id="editCamera__object_lpr_enabled" value="true" /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-vsp" > <span> <%=this.t("is used to read and record vehicle license plates entering or exiting a facility and to create alerts and notifications for a vehicle allowed, denied, or out of area for specified periods of time.") %> </span> </div> </div> </div> </div> <% } %> <% if(this._checkExtensionSupport(this._getCapabilityUncannyLPR())) { %> <div class="control-group control-group-uncanny-lpr"> <label class="control-label" for="editCamera__object_uncanny_lpr_apply_enabled" data-testid="modal-camera-settings-tab-analytics-input-label-lpr" > <%= this.t('License Plate Recognition(LPR)') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_uncanny_lpr" type="checkbox" id="editCamera__object_uncanny_lpr_apply_enabled" value="true" /> </div> <div class="span9 analytics-description"> <div class="row-fluid" data-testid="modal-camera-settings-tab-analytics-input-info-lpr" > <span> <%=this.t("License Plate Recognition/ Number Plate Recognition is used to read the license plate of the vehicle. Database functionality is available which allows to have alert for a specific license plates.") %> </span> </div> <div class="row-fluid" style="margin-top: 4px;" data-testid="modal-camera-settings-tab-analytics-input-label-lpr-add-on-features" > <b><%= this.t("LPR Add-On Features")%></b> </div> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="analytic-enable-check" data-ana="csAnalytics_uncanny_lpr_access_control" type="checkbox" value="true" /> </div> <div class="span11 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-lpr-add-on-features" > <b><%= this.t("Local ID")%></b> <span> - <%=this.t("Enable LPR system to integrate with external access control system using locally stored license plate information.") %> </span> </div> </div> </div> </div> </div> </div> <% } %> <% if(userList.getCurrentUser().checkFeatureFlag('video_search_ga')) { %> <div class="control-group control-group-scene-analysis"> <label class="control-label" for="editCamera__scene_analysis_enabled" data-testid="modal-camera-settings-tab-analytics-input-label-scene_analysis" > <%= this.t('Scene Analysis') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <% var checked = this.model.get('scene_analysis') ? 'checked' : ''; %> <input class="analytic-enable-check" data-ana="csAnalytics_scene_analysis" type="checkbox" id="editCamera__scene_analysis_enabled" value="true" <%=checked%> /> </div> <div class="span9 analytics-description" data-testid="modal-camera-settings-tab-analytics-input-info-scene_analysis" > <span> <%=this.t("Enabling Scene analysis will help capture events in Video Search including backpacks, bicycles, people and vehicles.") %> </span> </div> </div> </div> </div> <% } %> </div> </form> <div class="editCamera__analytics_warning_container"> <p class="from-motion-warning" data-testid="modal-camera-settings-tab-analytics-warning-container" > <%=this.t("Zero sensitivity motion regions are applied to the analytics.") %> </p> </div> </div> <div class="tab-pane" id="csAnalytics_line_crossing"> <span class="pull-right help-link" data_link="camera_settings_analytics_line_crossing"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-line-crossing-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_line_crossing_container"> </div> </form> </div> <div class="tab-pane" id="csAnalytics_object_counting"> <span class="pull-right help-link" data_link="camera_settings_analytics_counting"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-counting-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_object_counting_container"> </div> </form> </div> <div class="tab-pane" id="csAnalytics_intrusion"> <span class="pull-right help-link" data_link="camera_settings_analytics_intrusion"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-intrusion-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_intrusion_regions_container"> </div> </form> </div> <div class="tab-pane" id="csAnalytics_loitering"> <span class="pull-right help-link" data_link="camera_settings_analytics_loitering"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-loitering-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_loitering_container"> </div> </form> </div> <div class="tab-pane" id="csAnalytics_tampering"> <span class="pull-right help-link" data_link="camera_settings_analytics_tampering"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-tampering-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_tampering_regions_container"></div> </form> </div> <div class="tab-pane" id="csAnalytics_lpr"> <span class="pull-right help-link" data_link="camera_settings_analytics_lpr"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-lpr-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_lpr_container"></div> </form> </div> <div class="tab-pane" id="csAnalytics_uncanny_lpr"> <span class="pull-right help-link" data_link="camera_settings_analytics_lpr_new"> <i class="icon-question-sign een-help-link"></i> </span> <br> <div class="well csAnalytics_cam_compatible_msg_wrapper" data-testid="modal-camera-settings-tab-analytics-lpr-new-warning" > <span class="red"><i class="icon-remove-circle"></i> <%= this.t("This camera is not optimized for analytics.")%></span> </div> <form class="form-horizontal"> <div id="csAnalytics_uncanny_lpr_container"></div> </form> </div> </div> </div> <% var device_analytics = this.model.device_analytics; %> <div class="tab-pane" id="csDeviceAnalytics"> <ul class="nav nav-tabs"> <li id="csDeviceAnalytics_master_tab" class="active"> <a href="#csDeviceAnalytics_master" data-toggle="tab" data-testid="modal-camera-settings-tab-analytics-tab-label-enable" > <%=this.t('Enable')%> </a> </li> <% _.each(device_analytics, function(device_analytic) { %> <li class="device-ana-tab"> <a href="<%=`#csDeviceAnalytics_${device_analytic.provider}`%>" data-toggle="tab" > <%=device_analytic.schema.title%> </a> </li> <% }) %> </ul> <div class="tab-content" id="csDeviceAnalytics-panes"> <div class="tab-pane active" id="csDeviceAnalytics_master"> <span class="pull-right help-link" data_link="camera_settings_device_analytics_enable_analytics"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div id="cs_device_analytics_sub_menu"> <div class="container-fluid"> <div class="row-fluid"> <div class="span2 editCamera-analytics-message"><%= this.t('Enable Analytics') %></div> <div class="span9"> <p class="red"> <% if(this.model.attributes.settings.extra.make === 'Bosch') { %> <%= this.t('On camera analytics must be configured via the') %> <a href="https://commerce.boschsecurity.com/pl/en/Configuration-Manager/p/F.01U.360.102/" target="_blank" > <%= this.t('Bosch Configuration Manager.') %> </a> <% } else { %> <%= this.t('On camera analytics must be configured via the web interface of the camera.') %> </p> <% } %> <p class="red" id="device-analytics-application-limit-message" > <%= this.t('You can not enable both device analytics and VMS analytics. Please choose one option to continue.') %> </p> </div> </div> </div> <% _.each(device_analytics, function(device_analytic) { %> <div class="control-group"> <label class="control-label"><%=device_analytic.schema.title%></label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting analytic-check"> <input class="device-analytic-enable-check" id="<%=`device-analytic-${device_analytic.provider}-checkbox`%>" data-ana="<%=`csDeviceAnalytics_${device_analytic.provider}`%>" type="checkbox" value="true" /> </div> <div class="span9 analytics-description"> <span> <%=device_analytic.schema.description%> </span> </div> </div> </div> </div> <% }) %> </div> </form> </div> <% _.each(device_analytics, function(device_analytic) { %> <div class="tab-pane" id="<%=`csDeviceAnalytics_${device_analytic.provider}`%>"> </div> <% }) %> </div> </div> <div class="tab-pane" id="csThermal"></div> <div class="tab-pane" id="csMobotixMotion"></div> <div class="tab-pane" id="csMobotixMotionMessage"></div> <div class="tab-pane" id="csAIFiltering"> Coming soon </div> <div class="tab-pane" id="csMotion">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_motion"> <i class="icon-question-sign een-help-link"></i> </span> <br> <form class="form-horizontal"> <input type="hidden" id="editCamera__motion_zone"/> <div class="row-fluid control-group camera-setting" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc"> <label class="span3" for="editCamera__motion_sensitivity" style="text-align:right" title="Sensitivity defines how much a block has to differe for the previous frame/background, to be consdered in motion. It is current defined as max(1,500(1-x)), and is compared againts the abs of the coefficient differences within the block dct. Under most conditions sensitivity between .8 and .95 work well, with sensitivity in the 0.01 range doing well as a motion mask. It is heavily influenced by the weight matrix and the noise filter" data-testid="modal-camera-settings-tab-motion-master-motion-sensitivity" > <%= this.t('Master Motion Sensitivity') %>: </label> <div class="span4 een-slider-container"> <div id="editCamera__motion_sensitivity" class="een-slider"></div> </div> <label class="span3" for="editCamera__motion_size_ratio" style="text-align:right" title="Motion size ratio is the percentage of the entire screen that must be in motion to start/continue a motion event" data-testid="modal-camera-settings-tab-motion-master-motion-object-size" > <%= this.t('Master Motion Object Size') %>: </label> <div class="span2"> <select class="span10" id="editCamera__motion_size_ratio"> <option value="0.001"><%= this.t('Small') %></option> <option value="0.01"><%= this.t('Medium') %></option> <option value="0.1"><%= this.t('Large') %></option> </select> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="Motion noise filter reduces the number of dct bands to process for motion detection. It is currently defined as max(1,min(16(1-x),8)), where 1 dc only and 16 is the entire 8x8 dct block. Note this impacts snesitivity. Increase this to reduce trees waving in the wind triggering motion., decrease it to track very small items."> <label class="span3" for="editCamera__motion_noise_filter" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-noise-filter" > <%= this.t('Master Noise Filter') %>: </label> <div class="span4 een-slider-container"> <div id="editCamera__motion_noise_filter" class="een-slider" style="width: 205px;"></div> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="Hold off defines how long an object must remain in motion before a motion event is started"> <label class="span3" for="editCamera__motion_event_holdoff_ms" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-event-hold-off" > <%= this.t('Master Event Hold Off (ms)') %>: </label> <div class="span4 een-slider-container"> <div id="editCamera__motion_event_holdoff_ms" class="een-slider" style="width: 205px;"></div> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="Hold on defines how long to wait stopping a motion event. If new motion occurs within the interval the event will be extended. Note we currently run motion detection at 250ms (max), so anything smaller result in no object tracking"> <label class="span3" for="editCamera__motion_event_holdon_ms" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-event-hold-on" > <%= this.t('Master Event Hold On (ms)') %>: </label> <div class="span4 een-slider-container"> <div id="editCamera__motion_event_holdon_ms" class="een-slider" style="width: 205px;"></div> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="Foreground hold defines how long a block must see no change before it is committed to the backgound"> <label class="span3" for="editCamera__motion_hold_interval" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-foreground-hold" > <%= this.t('Master Foreground Hold (seconds)') %>: </label> <div class="span4 camera-setting"> <select class="span10" id="editCamera__motion_hold_interval"></select> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="Object expand ratio defines the amount an object bounding box should be expanded to search for motion block in subsequent frames to link to the same object. Increase this to better track fast moving objects, decrease this if dealing with large crowds and close moving objects."> <label class="span3" for="editCamera__motion_expand_ratio" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-object-search-expand-ratio" > <%= this.t('Master Object Search Expand Ratio') %>: </label> <div class="span4 camera-setting"> <select class="span10" id="editCamera__motion_expand_ratio"></select> </div> </div> <div class="row-fluid control-group camera-setting advanced_options" style="padding-bottom: 5px; border-bottom: 1px dotted #ccc;" title="The weights vector defines the relative weighting of the frequency bands of the dct. The first entry is the DC coefficient, the next the 0.5, etc. Note that for each increase in frequency there is inherently an additional coefficient - so a flat freqeuncy weight is 8 4 3 2 2 1 1 1. Decrease the first two coefficient to ignore large lighting changes (lights on/off), Increase the first few coefficients to reduce sensitivity to small changes."> <label class="span3" for="editCamera__motion_weights" style="text-align:right" data-testid="modal-camera-settings-tab-motion-master-weights" > <%= this.t('Master Weights') %>: </label> <div class="span4"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_0" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_1" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_2" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_3" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_4" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_5" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_6" maxlength="1"> <input style="width: 10px;" type="text" id="editCamera__motion_weights_7" maxlength="1"> </div> </div> <div id="editCamera__motion_container"> </div> </form> </div> <div class="tab-pane" id="csPrivacy">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_privacy"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div id="editCamera__privacy_management"> <input type="hidden" id="editCamera__privacy_zone"/> <div class="row-fluid" style="margin-bottom: 10px"> <div class="roi-container"> <div id="editCamera__roi_image"></div> <canvas id="editCamera__privacy_image" width="640" height="360"></canvas> <canvas id="editCamera__privacy_boxes" class="camera-rois" width="640" height="360"></canvas> </div> <input type="hidden" id="editCamera__privacy_id"/> </div> <div class="row-fluid" id="editCamera__edit_privacy_region" style="display:none; margin-bottom: 60px;"> <div class="row-fluid span6"> <div class="row-fluid control-group span12" style="margin-left:0px;"> <div class="span10"> <input class="span12" type="text" id="editCamera__privacy_name" placeholder="<%= this.t('Region Name') %>"/> </div> </div> </div> <div class="row-fluid span12"> <div class="span4"> <button class="btn-small btn-info" id="editCamera__cancel_privacy_zone" data-testid="modal-camera-settings-tab-privacy-button-cancel-region" > <%= this.t('Cancel Region') %> </button> <button class="btn-small btn-info" id="editCamera__add_privacy_zone" data-testid="modal-camera-settings-tab-privacy-button-save-region" > <%= this.t('Save Region') %> </button> </div> <div class="span8 red" id="editCameraModal__privacy_msg"></div> </div> </div> <div class="row-fluid" id="editCamera__privacy_regions"> <div class="row-fluid span12"> <div class="span2"> <h5 data-testid="modal-camera-settings-tab-privacy-header-privacy-regions" ><%= this.t('Privacy Regions') %></h5> </div> <div class="span10"> <button class="btn-small btn-info" id="editCamera__new_privacy_zone" data-testid="modal-camera-settings-tab-privacy-button-new-region" > <%= this.t('New Region') %> </button> </div> </div> <div class="row-fluid" style="width:98%"> <table class="table table-condensed table-bordered table-striped" id="editCamera__privacy_zones"> <thead> <tr> <th style="width:7%" data-testid="modal-camera-settings-tab-privacy-table-header-order" > <%= this.t('Order') %> </th> <th style="width:83%" data-testid="modal-camera-settings-tab-privacy-table-header-name" > <%= this.t('Name') %> </th> <th style="width:10%" data-testid="modal-camera-settings-tab-privacy-table-header-actions" > <%= this.t('Actions') %> </th> </tr> </thead> <tfoot> <tr> <td> </td> <td></td> <td></td> </tr> </tfoot> <tbody> <% _.each(model.get('privacy'), function(item) { %> <tr id="<%=item.id%>" data-roiid="<%=item.roiid%>" data-name="<%=item.name%>" data-roi_name="<%=item.roi_name%>" data-roi="<%=item.roi%>" data-priority="<%=item.priority%>" data-color="<%=item.color%>"> <td style="background-color:#<%=item.color%>"> <i class="icon-arrow-up"></i> <i class="icon-arrow-down"></i> <span><%-item.priority_text%></span> </td> <td> <%-item.name%> </td> <td> <button class="edit-privacy-zone"><i class="icon-pencil"></i></button><button class="remove-privacy-zone"><i class="icon-trash"></i></button> </td> </tr> <% }) %> </tbody> </table> </div> </div> </div> </form> </div> <div class="tab-pane" id="csAudio">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_audio"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group" style="<%=(this.model.get('camera_settings')['audio_enable'] === null ? 'display: none;' : '')%>"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-audio-enabled" > <%= this.t('Audio Enabled') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span1 camera-setting"> <input type="checkbox" id="editCamera__audio_enable" value="true"/> </div>  </div> </div> </div> <% var source_camera = cameraList.findByDeviceID(model.get('camera_settings')['audio_clone_source']); var show_copy_from = !model.get('camera_settings')['audio_enable'] && source_camera ? true : false; var bridge_id = model.deviceBridge(); var bridge_cameras = bridge_id && cameraList.filterBridge(bridge_id) || null; var show_copy_to = !show_copy_from && model.get('camera_settings')['audio_enable'] != null && bridge_cameras && bridge_cameras.length>1 ? true : false; %> <div class="control-group" style="<%=(!show_copy_from?'display:none':'')%>"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-copy-audio-from" > <%=this.t('Copy Audio From')%>: </label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="editCamera__audio_clone_source_id" value="1" <%=(source_camera?'checked':'')%> /> <%-(source_camera && source_camera.get('deviceName') || '')%> </label> </div> </div> <div class="control-group css-audio-copy-to" style="<%=(!show_copy_to?'display:none':'')%>"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-copy-audio-to" > <%=this.t('Copy Audio To')%>: </label> <div class="controls"> <div class="row-fluid"> <div class="span6 camera-setting"> <select class="span12" multiple="multiple" id="editCamera__audio_clone_target_ids"> <% _.each(bridge_cameras, function(item) { %> <% if(item.get('deviceType') !== 'speaker') { %> <%if(item.get('deviceID') !== model.get('deviceID')){%> <option value="<%=item.get('deviceID')%>" <%=($.inArray(item.get('deviceID'), model.get('camera_settings')['audio_clone_targets'])>=0 ? 'selected' : '')%>><%-item.get('deviceName')%></option> <%}%> <% } %> <% }) %> </select> </div> </div> </div> </div> <div style="display:none"> <div class="control-group camera-setting" data-camera-setting="audio_sensitivity"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-audio-sensitivity" > <%=this.t('Audio Sensitivity')%>: </label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__audio_sensitivity"></div> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-audio-trigger-recording" > <%=this.t('Audio Trigger Recording')%>: </label> <div class="controls"> <div class="row-fluid control-group camera-setting"> <div class="span1"> <input type="checkbox" id="editCamera__audio_event_enable" value="true"/> </div> <div class="span4"> <select class="span12" id="editCamera__audio_record_when"> <option value="all"><%=this.t('24 hours')%></option> <option value="work"><%=this.t('Work hours')%> (<%=model.get('camera_work_hours')%>)</option> <option value="nonwork"><%=this.t('Non-work hours')%></option> <option value="custom"><%=this.t('Custom hours')%></option> </select> </div> <div class="span7 hide"> <div id="editCamera__audio_record_when_custom"></div> </div> </div> </div> </div> <div class="control-group" style="margin-bottom: 110px !important"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-alert-when-audio" > <%=this.t('Alert When Audio')%>: </label> <div class="controls"> <div class="row-fluid control-group"> <div class="span1"> <input type="checkbox" value="1" /> </div> <div class="span4"><select id="editCamera__audio_alert_when" class="span12"> <option value="all"><%=this.t('24 hours')%></option> <option value="work"><%=this.t('Work hours')%> (<%=model.get('camera_work_hours')%>)</option> <option value="nonwork"><%=this.t('Non-work hours')%></option> <option value="custom"><%=this.t('Custom hours')%></option> </select></div> <div class="span7 hide"> <div id="editCamera__audio_alert_when_custom"></div> </div> </div> <div class="row-fluid control-group"> <label class="control-label" style="width:90px !important" for="" data-testid="modal-camera-settings-tab-audio-input-label-alert-mode" > <%=this.t('Alert Mode')%>: </label> <div class="span3"> <select class="span12" multiple="multiple" id="editCamera__audio_alert_mode"> <option value="select-all-option"><%=this.t('All')%></option> <% _.each(model.get('account_alert_modes'), function(item) { %> <option value="<%= item %>"><%- item %></option> <% }) %> </select> </div> <label class="control-label" style="width:85px !important" for="" data-testid="modal-camera-settings-tab-audio-input-label-alert-level" > <%=this.t('Alert Level')%>: </label> <div class="span3"> <select class="span12" multiple="multiple" id="editCamera__audio_alert_level"> <option value="select-all-option"><%=this.t('All')%></option> <option value="1">1</option> <option value="2">2</option> </select> </div> </div> <div class="row-fluid control-group"> <label class="control-label" style="width:90px !important" for="" data-testid="modal-camera-settings-tab-audio-input-label-alert-who" > <%=this.t('Alert Who')%>: </label> <div class="span8"> <select class="span12" multiple="multiple" id="editCamera__audio_alert_who"> <option value="select-all-option"><%=this.t('All')%></option> <% _.each(model.get('users'), function(item) { %> <option value="<%= item.get('id') %>"><%= item.getDisplayName() %></option> <% }) %> </select> </div> </div> </div> </div> </div> <%if(model.get('camera_settings').sip_config && !model.isProxy()){%> <div class="row-fluid"> <h5 data-testid="modal-camera-settings-tab-audio-header-2-way-audio-settings" > <%= this.t('2-Way Audio Settings') %> </h5> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-audio-mode" > <%=this.t('Audio Mode')%>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <select class="span11" id="editCamera__two_way_audio_mode"> <option value="disabled" <%=(model.get('two_way_audio_mode') == 'disabled' ? 'selected' : '')%>><%= this.t('Disabled') %></option> <option value="half_duplex" <%=(model.get('two_way_audio_mode') == 'half_duplex' ? 'selected' : '')%>><%= this.t('Talk Down') %></option> <option value="full_duplex" <%=(model.get('two_way_audio_mode') == 'full_duplex' ? 'selected' : '')%>><%= this.t('2-Way Audio') %></option> </select> </div> </div> </div> <span class="audio-mode-msg red" id="editCameraModal_audio_mode_msg" style="display: none;"></span> </div> <div id="editCameraModal_sip_config"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-audio-input-label-audio-sip-username-password" > <%= this.t('SIP Username/Password') %>: </label> <div class="controls"> <div class="row-fluid"> <input id="editCamera__sipu" class="span5" type="text" maxlength="40" placeholder="<%= this.t('SIP Username') %>" autocomplete="off" value="<%- model.get('sipUsername') %>"/> <input id="editCamera__sipp" class="span5 input-password" type="text" maxlength="40" placeholder="<%= this.t('SIP Password') %>" autocomplete="off" value="<%- model.get('sipPassword') %>"/> </div> </div> </div> <div class="row-fluid"> <p data-testid="modal-camera-settings-tab-audio-input-label-audio-link-the-speaker-to-camera" > <%=this.t("Link the speaker to a camera or cameras.")%> </p> </div> <div class="row-fluid"> <div class="offset1 span10"> <div class="span5" data-testid="modal-camera-settings-tab-audio-input-label-audio-unlinked" > <%=this.t("Unlinked")%> </div> <div class="span5 offset1" data-testid="modal-camera-settings-tab-audio-input-label-audio-linked" > <%=this.t("Linked")%> </div> </div> </div> <div class="row-fluid"> <div class="offset1 span10" id="editCamera__associate_camera_menu"></div> </div> </div> <% } %> </form> </div> <div class="tab-pane" id="csImage">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_image"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group camera-setting" data-camera-setting="image_brightness" style="margin-top:20px"> <label class="control-label" for="">Brightness:</label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__image_brightness"></div> </div> </div> </div> </div> <div class="control-group camera-setting" data-camera-setting="image_contrast"> <label class="control-label" for="">Contrast:</label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__image_contrast"></div> </div> </div> </div> </div> <div class="control-group camera-setting" data-camera-setting="image_sharpness"> <label class="control-label" for="">Sharpness:</label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__image_sharpness"></div> </div> </div> </div> </div> <div class="control-group camera-setting" data-camera-setting="image_hue"> <label class="control-label" for="">Hue:</label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__image_hue"></div> </div> </div> </div> </div> <div class="control-group camera-setting" data-camera-setting="image_saturation"> <label class="control-label" for="">Saturation:</label> <div class="controls"> <div class="row-fluid"> <div class="span11"> <div id="editCamera__image_saturation"></div> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="csLocation">  <span class="pull-right" id="csCamera-help" data_link="<%= model.isMCACamera() ? 'camera_settings_mca_location' : 'camera_settings_location' %>"> <i class="icon-question-sign een-help-link"></i> </span> <br> <form class="form-horizontal"> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-name" > <%= this.t('Location Name') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <% if(this.is_location_feature_enabled && !model.get('deviceShare')) { %> <div id="editCameraModal_location_select" class="span9"></div> <% if(this.is_edit_location_permission) { %> <div id="editCameraModal_location_add_button"></div> <% } %> <% } else { %> <input class="span9" type="text" id="editCamera__site_name" maxlength="255" placeholder="" value="<%- model.get('site_name') %>" /> <% } %> </div> </div> </div> </div> <%if(!model.isMCACamera()){%> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-street-address" > <%= this.t('Street Address') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <input class="span9 input-xlarge" type="text" <% if(this.is_location_feature_enabled && !model.get('deviceShare')) { %> disabled <% } %> id="editCamera__street_address" maxlength="255" placeholder="" value="<%- model.get('street_address') %>" /> <% if(!this.is_location_feature_enabled) { %> <span data-testid="modal-camera-settings-tab-location-input-info-street-address" > (<%= this.t('street, city, state, zip') %>) </span> <% } %> </div> </div> </div> </div> <% if(this.is_location_feature_enabled && !model.get('deviceShare')) { %> <div class="control-group camera-setting"> <div class="controls"> <div class="row-fluid"> <input class="span9 input-xlarge" type="text" disabled id="editCamera__street_address_2" maxlength="255" placeholder="" value="<%- model.get('street_address_2') %>" /> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-city" > <%= this.t('City') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3"> <input class="input-mini span10" type="text" disabled id="editCamera__city" maxlength="255" placeholder="" value="<%- model.get('city') %>"/> </div> <label class="control-label span4" for="" data-testid="modal-camera-settings-tab-location-input-label-region" > <%= this.t('State / Province / Region') %>: </label> <div class="span2"> <input class="input-mini span12" type="text" disabled id="editCamera__region" maxlength="255" placeholder="" value="<%- model.get('state') %>"/> </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-country" > <%= this.t('Country') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span3"> <input class="input-mini span10" type="text" disabled id="editCamera__country" maxlength="255" placeholder="" value="<%- model.get('country') %>"/> </div> <label class="control-label span4" for="" data-testid="modal-camera-settings-tab-location-input-label-postal-code" > <%= this.t('ZIP / Postal Code') %>: </label> <div class="span2"> <input class="input-mini span12" type="text" disabled id="editCamera__zip_code" maxlength="255" placeholder="" value="<%- model.get('zip_code') %>"/> </div> </div> </div> </div> <% } %> <div id="cs-scene"></div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-latitude" > <%= this.t('Latitude') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input class="span7" type="text" id="editCamera__latitude" maxlength="13" placeholder="" value="<%- model.get('latitude') %>"/> (-90.0—90.0) </div> <label class="control-label" style="width:80px" data-testid="modal-camera-settings-tab-location-input-label-longtitude" > <%= this.t('Longitude') %>: </label> <div class="span5"> <input class="span7" type="text" id="editCamera__longitude" maxlength="14" placeholder="" value="<%- model.get('longitude') %>"/> (-180.0—180.0) </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-azimuth" > <%= this.t('Azimuth') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input class="span5" type="text" id="editCamera__azimuth" maxlength="14" placeholder="" value="<%- model.get('azimuth') %>"/> (0.0—360.0; 0.0=<%= this.t('North') %>) </div> <label class="control-label" style="width:80px" data-testid="modal-camera-settings-tab-location-input-label-range" > <%= this.t('Range') %>: </label> <div class="span5"> <input class="span5" type="text" id="editCamera__range" maxlength="8" placeholder="" value="<%- model.get('range') %>"/> (<%= this.t('feet') %>) </div> </div> </div> </div> <div class="control-group camera-setting"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-floor" > <%= this.t('Floor') %>: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input class="span5" type="text" id="editCamera__floor" maxlength="6" placeholder="" value="<%- model.get('floor') %>"/> (<%= this.t('number') %>) </div> </div> </div> </div> <% if(this.is_location_feature_enabled && !model.get('deviceShare')) { %> <div class="control-group camera"> <label class="control-label" for="" data-testid="modal-camera-settings-tab-location-input-label-notes" > <%= this.t('Notes') %>: </label> <div class="controls"> <div class="row-fluid"> <input id="editCamera__notes_location" class="span9" type="text" value="<%-model.get('notes')%>" /> </div> </div> </div> <%}%> <%}%> </form> </div> <div class="tab-pane" id="editCamera__metrics">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_metrics"> <i class="icon-question-sign een-help-link"></i> </span> <ul class="nav nav-tabs"> <li class="active" id="editCamera__tab__metrics_streamed"> <a href="#editCamera__metrics_streamed" data-toggle="tab" data-testid="modal-camera-settings-tab-metrics-tab-cloud-bw-label" > <%= this.t('Cloud BW') %> </a> </li> <li id="editCamera__tab__metrics_camera_bandwidth"> <a href="#editCamera__metrics_camera_bandwidth" data-toggle="tab" data-testid="modal-camera-settings-tab-metrics-tab-camera-bw-label" > <%= this.t('Camera BW') %> </a> </li> <li id="editCamera__tab__metrics_storage"> <a href="#editCamera__metrics_storage" data-toggle="tab" data-testid="modal-camera-settings-tab-metrics-tab-storage-label" > <%= this.t('Storage') %> </a> </li> <li id="editCamera__tab__metrics_delta_stored"> <a href="#editCamera__metrics_delta_stored" data-toggle="tab" data-testid="modal-camera-settings-tab-metrics-tab-delta-storage-label" > <span><i class="icon-caret-up" style="font-size:1.5em;"></i><%= this.t('Storage') %></span> </a> </li> <li id="editCamera__tab__metrics_freed" style="display:none;"> <a href="#editCamera__metrics_freed" data-toggle="tab" data-testid="modal-camera-settings-tab-metrics-tab-freed-label" > <%= this.t('Freed') %> </a> </li> </ul> <i class="icon-refresh chart-refresh"></i> <div class="tab-content"> <div class="tab-pane active" id="editCamera__metrics_streamed"> <div id="editCamera__metrics_streamed_chart" style="height: 350px;width:730px;"></div> </div> <div class="tab-pane" id="editCamera__metrics_delta_stored"> <div id="editCamera__metrics_delta_stored_chart" style="height: 350px;width:730px;"></div> </div> <div class="tab-pane" id="editCamera__metrics_storage"> <div id="editCamera__metrics_storage_chart" style="height: 350px;width:730px;"></div> </div> <div class="tab-pane" id="editCamera__metrics_camera_bandwidth"> <div id="editCamera__metrics_camera_bandwidth_chart" style="height: 350px;width:730px;"></div> </div> <div class="tab-pane" id="editCamera__metrics_freed"> <div id="editCamera__metrics_freed_chart" style="height: 350px;width:730px;"></div> </div> </div> </div> <div class="tab-pane" id="csMaintenance">  <span class="pull-right" id="csCamera-help" data_link="camera_settings_maintenance"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div id="editCamera__maintenance"> <div class="row-fluid buttons-all"> <p class="span10 offset1" id="csCamera-switchInfo" data-testid="modal-camera-settings-tab-maintenance-switch-info" > <%=this.t("This camera is on a supported switch and can be power cycled using the managed switch {{switch_name}} (port {{port_num}}).")%> </p> </div> <div class="row-fluid buttons-all"> <button class="btn btn-success span3 offset1" id="csCameraPowerCycle" title="<%=this.t('Power cycle camera')%>" data-testid="modal-camera-settings-tab-maintenance-button-power-cycle-camera" > <%=this.t("Power Cycle Camera")%> </button> </div> </div> </form> </div> <div id="cs-bridge-health"></div> </script>   <script type="text/ractive" id="EditDistributorUser-template"> <ul class="nav nav-tabs"> {{#nav_tabs}} <li class="{{#if active_id===id}}active{{/if}}"> <a href="#{{id}}" data-toggle="tab" on-click="@this.set('active_id', id)"> {{{label}}} </a> </li> {{/nav_tabs}} </ul> <div class="tab-content"> <TabPane id="editDistributorUser-access-tab" active_id="{{active_id}}"> <DistributorUserAccess user_model={{user_model}}> </TabPane> </div> </script>   <script type="text/template" id="editMasterAccountSettings-template"> <div class="tab-pane active" id="masterAccountSettingsBranding"> <span class="pull-right" id="csCamera-help" data_link="account_settings_branding"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Branding Enabled') %>:</label> <div class="controls"> <input type="checkbox" id="editMasterAccountSettings__is_custom_brand" value="1" <%=(model.get('is_custom_brand') ? 'checked' : '')%>/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Company Name') %>:</label> <div class="controls"> <input type="text" maxlength="100" id="editMasterAccountSettings__brand_name" value="<%-model.get('brand_name')%>"/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Support Email') %>:</label> <div class="controls"> <input type="text" maxlength="100" id="editMasterAccountSettings__brand_support_email" value="<%-model.get('brand_support_email')%>"/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Support Phone') %>:</label> <div class="controls"> <input type="text" maxlength="100" id="editMasterAccountSettings__brand_support_phone" value="<%-model.get('brand_support_phone')%>"/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Sub domain') %>:</label> <div class="controls"> <input type="text" maxlength="63" id="editMasterAccountSettings__brand_subdomain" value="<%- brand_subdomain %>" required/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Small Logo') %>:<br/>PNG, 160x52, <%= this.t('transparent background') %></label> <div class="controls master-brand-logo-small-upload"> <input type="file" id="editMasterAccountSettings__brand_logo_small_upload"/> <div> <div> <img src="<%=(model.get('brand_logo_small') ? 'data:image/png;base64,'+model.get('brand_logo_small'): '')%>" id="editMasterAccountSettings__brand_logo_small" <%=(model.get('brand_logo_small') ? '' : 'style="display:none"')%> /> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Large Logo') %>:<br/>PNG, 460x184, <%= this.t('white background') %></label> <div class="controls master-brand-logo-large-upload"> <input type="file" id="editMasterAccountSettings__brand_logo_large_upload"/> <div> <div> <img src="<%=(model.get('brand_logo_large') ? 'data:image/png;base64,'+model.get('brand_logo_large'): '')%>" id="editMasterAccountSettings__brand_logo_large" <%=(model.get('brand_logo_large') ? '' : 'style="display:none"')%> /> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="masterAccountDefaults">  <span class="pull-right" id="csCamera-help" data_link="master_account_settings_retention"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal modal-form-centered"> <h5><%= utils.t('Camera Defaults') %></h5> <div id="master-default-cloud-preview-only"></div> <div id="master-default-cloud-retention"></div> <div id="master-default-min-local-retention"></div> <div id="master-default-max-local-retention"></div> <div id="master-default-preview-resolution"></div> <div id="master-default-full-video-resolution"></div> <h5><%= utils.t('Account Defaults') %></h5> <div id="master-disable-billing-changes"></div> </form> </div> <div class="tab-pane" id="masterAccountDays" style="min-height:260px;">  <span class="pull-right" id="csCamera-help" data_link="account_settings_days"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-account-tab-days-input-label-time-zone" > <%= this.t('Time Zone') %>: </label> <div class="controls"> <div class="row-fluid"> <select id="masterAccountSettings__timezone" class="span6"> <% var model = this.model; var user_timezone = model.get('timezone'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(user_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=user_timezone%>" selected><%=user_timezone%></option> <% } %> </select> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-master-account-tab-days-input-label-work-days" > <%= this.t('Work days') %>: </label> <div class="controls"> <select id="masterAccountSettings__work_days"> <option value="1111000" <%=(this.model.get('work_days')=='1111000' ? 'selected': '')%> data-testid="modal-master-account-tab-days-option-label-monday-thursday" ><%= this.t('Monday - Thursday') %></option> <option value="1111100" <%=(this.model.get('work_days')=='1111100' ? 'selected': '')%> data-testid="modal-master-account-tab-days-option-label-monday-friday" ><%= this.t('Monday - Friday') %></option> <option value="1111110" <%=(this.model.get('work_days')=='1111110' ? 'selected': '')%> data-testid="modal-master-account-tab-days-option-label-monday-saturday" ><%= this.t('Monday - Saturday') %></option> <option value="1111111" <%=(this.model.get('work_days')=='1111111' ? 'selected': '')%> data-testid="modal-master-account-tab-days-option-label-7-days" ><%= this.t('7 days/week') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-master-account-tab-days-input-label-work-hours" > <%= this.t('Work hours') %>: </label> <div class="controls"> <div class="input-append bootstrap-timepicker"> <input id="masterAccountSettings__work_hours_from" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> To <div class="input-append bootstrap-timepicker"> <input id="masterAccountSettings__work_hours_to" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> </div> </form> </div> <% if(me.checkEditToS()) { %> <div class="tab-pane" id="masterAccountSettingsTOS"> <form class="form-horizontal"> <% if (me.get('is_superuser')) { %> <div class="control-group"> <label class="control-label" for="editMasterAccountSettings__tos_disable">Disable TOS:</label> <div class="controls"> <input id="editMasterAccountSettings__tos_disable" type="checkbox" value="1"> </div> </div> <% } %> <div class="control-group"> <label class="control-label" for="editMasterAccountSettings__tos_required"><%= this.t('Required') %>:</label> <div class="controls"> <select type="text" id="editMasterAccountSettings__tos_required"> <option value="is_admin_required,is_user_required"><%= this.t('Admins and Users') %></option> <option value="is_admin_required"><%= this.t('Admins') %></option> <option value="is_user_required"><%= this.t('Users') %></option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="editMasterAccountSettings__tos_text"><%= this.t('Text') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <textarea id="editMasterAccountSettings__tos_text" class="span12" style="height:200px;resize:none" autofocus></textarea> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="editMasterAccountSettings__save_terms">   </label> <div class="controls"> <button class="btn btn-success pull-right" id="editMasterAccountSettings__save_terms"><%=this.t('Save New Terms')%></button> <p id="editMasterAccountSettings__terms_msg" class="red pull-right" style="margin-right:10px"></p> <button class="btn btn-info pull-right" id="editMasterAccountSettings__confirm_terms" style="display:none"><%=this.t('Confirm')%></button> </div> </div> </form> </div> <% } %> <div class="tab-pane" id="masterAccountSecurity"> <ul id="masterAccountSecurity_nav" class="nav nav-tabs"> <li id="masterAccountSecurity_general_tab" class="active"><a href="#masterAccountSecurity_general" data-toggle="tab"><%=this.t('General')%></a></li> <li id="masterAccountSecurity_password_tab" class="hide"><a href="#masterAccountSecurity_password" data-toggle="tab"><%=this.t('Password')%></a></li> <li id="masterAccountSecurity_IdentityProvider_tab" class="hide"><a href="#masterAccountSecurity_IdentityProvider" data-toggle="tab"><%=this.t('Identity Provider')%></a></li> </ul> <div class="tab-content" id="masterAccountSecurity-panes"> <div class="tab-pane active" id="masterAccountSecurity_general"> <span class="pull-right" id="csCamera-help" data_link="master_account_settings_security"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-master-account-tab-security-input-label-web-timeout" > <%= this.t('Web Timeout') %>: </label> <div class="controls"> <select id="editMasterAccountSettings__session_duration" class="span2"> <option value="15" <%=(this.model.get('session_duration')=="15" ? 'selected' : '')%>>15 <%= this.t('minutes') %></option> <option value="60" <%=(this.model.get('session_duration')=="60" ? 'selected' : '')%>>1 <%= this.t('hour') %></option> <option value="240" <%=(this.model.get('session_duration')=="240" ? 'selected' : '')%>>4 <%= this.t('hours') %></option> <option value="480" <%=(this.model.get('session_duration')=="480" ? 'selected' : '')%>>8 <%= this.t('hours') %></option> <option value="720" <%=(this.model.get('session_duration')=="720" ? 'selected' : '')%>>12 <%= this.t('hours') %></option> <option value="1440" <%=(this.model.get('session_duration')=="1440" ? 'selected' : '')%>>24 <%= this.t('hours') %></option> <option value="10080" <%=(this.model.get('session_duration')=="10080" ? 'selected' : '')%>>1 <%= this.t('week') %></option> </select> <p><%= this.t('To apply this setting, please sign in again') %></p> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-master-account-tab-security-input-label-inactive-session-timeout" > <%= this.t('Inactive Session Timeout') %>: </label> <div class="controls"> <select id="editMasterAccountSettings__inactive_session_timeout" class="span2"> <option value="" <%=(this.model.get('inactive_session_timeout')==null ? 'selected' : '')%>><%= this.t('None') %></option> <option value="5" <%=(this.model.get('inactive_session_timeout')=="5" ? 'selected' : '')%>>5 <%= this.t('minutes') %></option> <option value="15" <%=(this.model.get('inactive_session_timeout')=="15" ? 'selected' : '')%>>15 <%= this.t('minutes') %></option> <option value="60" <%=(this.model.get('inactive_session_timeout')=="60" ? 'selected' : '')%>>1 <%= this.t('hour') %></option> <option value="240" <%=(this.model.get('inactive_session_timeout')=="240" ? 'selected' : '')%>>4 <%= this.t('hours') %></option> <option value="480" <%=(this.model.get('inactive_session_timeout')=="480" ? 'selected' : '')%>>8 <%= this.t('hours') %></option> <option value="720" <%=(this.model.get('inactive_session_timeout')=="720" ? 'selected' : '')%>>12 <%= this.t('hours') %></option> <option value="1440" <%=(this.model.get('inactive_session_timeout')=="1440" ? 'selected' : '')%>>24 <%= this.t('hours') %></option> </select> </div> </div> </form> </div> <div class="tab-pane" id="masterAccountSecurity_password"> <span class="pull-right" id="csCamera-help" data_link="account_settings_security_password"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal modal-form-centered"> <div id="master-password-management"></div> </form> </div> <div class="tab-pane" id="masterAccountSecurity_IdentityProvider"> <span class="pull-right"> <a id="csCamera-help" data_link="master_account_settings_security_idp"> <i class="icon-question-sign een-help-link"></i> </a> </span> <div id="master-identity-provider"></div> </div> </div> </div> </script>   <script type="text/template" id="editParentCameraView-template"> <span class="modal-heading-append"> // <%-model.get('deviceName')%></span> <div class="tab-pane active" id="csParentCamera"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Name') %>:</label> <div class="controls"> <div class="row-fluid"> <input id="editParentCamera__name" class="span6" type="text" maxlength="45" value="<%= model.get('deviceName') %>"/> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%(!model.isRtsp() ? this.t('ONVIF') : '')%> <%= this.t('Login') %>:</label> <div class="controls"> <div class="row-fluid"> <%/* Safari is aggressive with autopopulating username/password fields, so these bogus fields are needed in order to fool Safari into using them instead of the real fields. */%> <div style="position: fixed;width: 1px;left: -100vw;"> <input type="text" tabindex="-1" id="bogus_username" style="width:1%"/> <input type="password" tabindex="-1" id="bogus_password" style="width:1%"/> </div> <input id="editParentCamera__onvifu" class="span6" type="text" maxlength="40" placeholder="<%= this.t('Username') %>" autocomplete="off" value="<%- model.get('cameraUsername') %>"/> <input id="editParentCamera__onvifp" class="span6" type="password" maxlength="40" placeholder="<%= this.t('Password') %>" autocomplete="off" value="<%- model.get('cameraPassword') %>"/> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Time Zone') %>:</label> <div class="controls"> <div class="row-fluid"> <select id="editParentCamera__timezone" class="span6"> <% var model = this.model; var device_timezone = model.get('deviceTZ'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(device_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=device_timezone%>" selected><%=device_timezone%></option> <% } %> </select> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Notes') %>:</label> <div class="controls"> <div class="row-fluid"> <textarea id="editParentCamera__notes" class="span12" style="height: 70px;" maxlength="2000"><%=model.get('notes')%></textarea> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Information') %>:</label> <div class="controls"> <div id="editParentCamera__device_info" class="info-box"> <%if(model.get('camera_info')){%> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('Manufacturer') %>: </div> <div class="span7"> <%=model.get('camera_info').make%> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('Model') %>: </div> <div class="span7"> <%=model.get('camera_info').model%> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('Firmware') %>: </div> <div class="span7"> <%=model.get('camera_info').version%> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('MAC Address') %>: </div> <div class="span7"> <%=model.get('camera_info').mac%> </div> </div> <% if(model.get('deviceIPAddress')) { %> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('IP Address') %>: </div> <div class="span7"> <%=model.get('deviceIPAddress')%> </div> </div> <% } %> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('ESN') %>: </div> <div class="span7"> <%= (model.get('deviceID') ? model.get('deviceID') : 'not available') %> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('GUID') %>: </div> <div class="span8"> <%= (model.get('deviceID') ? model.get('deviceGUID') : 'not available') %> </div> </div> <%}else{%> <div class="row-fluid"> <div class="span11 text-center"> <%= this.t('Not available at this time') %> </div> </div> <%}%> </div> </div> </div> </form> </div> <div class="tab-pane" id="csParentCameraViews"> <div class="controls"> <p id="editParentCamera__views_info"><%= this.t('There are no views to add.') %></p> <input type="checkbox" name="Select All" id="editParentCamera__all_channels"> <p class="editParentCamera_channel_label" id="editParentCamera__all_channels_label"><%= this.t('Select All') %></p> <hr id="editParentCamera__channel_sep_line"> <div id="editParentCamera__first_channel_col" class="editParentCamera__channel_column"> </div> <div id="editParentCamera__second_channel_col" class="editParentCamera__channel_column"> </div> </div> </div> </script>   <script type="text/template" id="editSpeakerView-template"> <span class="modal-heading-append"> // <%-model.get('deviceName')%></span> <div class="tab-pane active" id="editSpeaker__speaker"> <div class="pull-right"> <span id="csSpeaker-help" data_link="speaker_settings_main"> <i class="icon-question-sign een-help-link"></i> </span> </div> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Speaker Name') %>:</label> <div class="controls"> <div class="row-fluid"> <input id="editSpeaker__name" class="span6" type="text" maxlength="45" value="<%- model.get('deviceName') %>"/> </div> </div> </div> <div class="control-group"> <label class="control-label muted" for=""><%= this.t('Connect to Bridge') %>:</label> <div class="controls"> <div class="row-fluid"> <select id="addSpeakerToBridge" class="span6" disabled> <option value=""><%- bridgeList.findByDeviceID(model.get('deviceBridge')).get('deviceName') %></option> </select> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Notes') %>:</label> <div class="controls"> <div class="row-fluid"> <textarea id="editSpeaker__notes" class="span12" style="height: 70px;" maxlength="2000"><%-model.get('notes')%></textarea> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Speaker Information') %>:</label> <div class="controls"> <div id="editSpeaker__device_info" class="info-box"> <%if(model.get('speaker_info')){%> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('Manufacturer') %>: </div> <div class="span7"> <%-model.get('speaker_info').make%> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('Model') %>: </div> <div class="span7"> <%-model.get('speaker_info').model%> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('IP Address') %>: </div> <div class="span7"> <a id="editSpeaker__vpn" href="http://<%=model.get('deviceIPAddress')%>"> </a> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('ESN') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceID') : this.t('not available')) %> </div> </div> <div class="row-fluid"> <div class="span4 text-right"> <%= this.t('GUID') %>: </div> <div class="span7"> <%- (model.get('deviceID') ? model.get('deviceGUID') : this.t('not available')) %> </div> </div> <%}else{%> <div class="row-fluid"> <div class="span11 text-center"> <%= this.t('Not available at this time') %> </div> </div> <%}%> </div> </div> </div> <% if(userList.getCurrentUser().checkAddDeleteDevices()) { %> <div class="controls"> <button class="ignore btn btn-inverse" data-id="<%= model.get('deviceID') %>" title="<%= this.t('remove speaker from account') %>"><%=this.t("Delete Speaker")%></button> </div> <% } %> </form> </div> <div class="tab-pane" id="editSpeaker__cameras"> <span class="pull-right" id="csSpeaker-help" data_link="speaker_settings_association"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%=this.t('Audio Mode')%>:</label> <div class="controls"> <div class="row-fluid"> <div class="span3 camera-setting"> <select class="span11" id="editSpeaker__two_way_audio_mode"> <option value="disabled" <%=(model.get('two_way_audio_mode') == 'disabled' ? 'selected' : '')%>><%= this.t('Disabled') %></option> <option value="half_duplex" <%=(model.get('two_way_audio_mode') == 'half_duplex' ? 'selected' : '')%>><%= this.t('Talk Down') %></option> <option value="full_duplex" <%=(model.get('two_way_audio_mode') == 'full_duplex' ? 'selected' : '')%>><%= this.t('2-Way Audio') %></option> </select> </div> </div> </div> <span class="audio-mode-msg red" id="editSpeaker_audio_mode_msg" style="display: none;"></span> </div> <div id="editSpeaker_sip_config"> <div class="control-group"> <label class="control-label" for=""><%= this.t('SIP Username/Password') %>:</label> <div class="controls"> <div class="row-fluid"> <input id="editSpeaker__sipu" class="span5" type="text" maxlength="40" placeholder="<%= this.t('SIP Username') %>" autocomplete="off" value="<%- model.get('sipUsername') %>"/> <input id="editSpeaker__sipp" class="span5 input-password" type="text" maxlength="40" placeholder="<%= this.t('SIP Password') %>" autocomplete="off" value="<%- model.get('sipPassword') %>"/> </div> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Speaker Login') %>:</label> <div class="controls"> <div class="row-fluid"> <input id="editSpeaker__onvifu" class="span5" type="text" maxlength="40" placeholder="<%= this.t('Username') %>" autocomplete="off" value="<%- model.get('speakerUsername') %>"/> <input id="editSpeaker__onvifp" class="span5 input-password" type="text" maxlength="40" placeholder="<%= this.t('Password') %>" autocomplete="off" value="<%- model.get('speakerPassword') %>"/> </div> </div> </div> <div class="row-fluid"> <p><%=this.t("Link the speaker to a camera or cameras.")%></p> </div> <div class="row-fluid"> <div class="offset1 span10"> <div class="span5"><%=this.t("Unlinked")%></div> <div class="span5 offset1"><%=this.t("Linked")%></div> </div> </div> <div class="row-fluid"> <div class="offset1 span10" id="associate_camera_menu"></div> </div> </div> </form> </div> </script>   <script type="text/template" id="editSubAccountSettings-template"> <div class="tab-pane active" id="subAccountSettingsStatus"> <span class="pull-right" id="csCamera-help" data_link="account_settings_status"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Name') %>:</label> <div class="controls"> <input type="text" title="<%=this.t('Name of the end user account')%>" id="editSubAccountSettings__name" required value="<%-model.get('name')%>" maxlength="255"/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Customer ID') %>:</label> <div class="controls"> <input type="text" title="<%=this.t('Optional text that is searchable from the Reseller Dashboard')%>" id="editSubAccountSettings__customer_id" value="<%-model.get('customer_id')%>" maxlength="100"/> </div> </div> <div class="control-group"> <label class="control-label" for=""><%= this.t('Status') %>:</label> <div class="controls"> <div class="row-fluid"> <select type="text" title="<%=this.t('Current status of this end user account.')%>" id="editSubAccountSettings__status"> <option value="active" title="<%=this.t('The default is enabled.')%>" <%=(model.get('is_active') ? 'selected' : '')%>><%= this.t('Enabled') %></option> <option value="inactive" title="<%=this.t('No login is allowed for end user accounts, but cameras continue to record.')%>" <%=(model.get('is_inactive') ? 'selected' : '')%>><%= this.t('Login Disabled') %></option> <option value="suspended" title="<%=this.t('All cameras are turned off and no login is allowed for end user accounts.')%>" <%=(model.get('is_suspended') ? 'selected' : '')%>><%= this.t('Account Disabled') %></option> </select> </div> </div> </div> <% if (this.model.get('is_reject')) { %> <p class= "red new-line edition-error"><%= this.t('An error occurred while fetching available Editions. Please try again or contact support.')%></p> <% } %> <% var available_editions_to_show = this.getAvailableEditionToShow(); var current_user = userList.getCurrentUser(); if (current_user.checkEditionsIsEnabled() && available_editions_to_show && available_editions_to_show.length > 0 && current_user.checkUpgradeEditionbyId(model.get('id'))) { %> <div class="control-group"> <label class="control-label" for=""><%= this.t('Edition') %>:</label> <div class="controls"> <div class="row-fluid"> <select type="text" id="editSubAccountSettings__edition" value="<%-String(model.get('extras').account_edition_id)%>" > <% _.each(available_editions_to_show, function(edition) { %> <option value="<%=edition.id%>"> <%=edition.name%> </option> <% }) %> </select> </div> </div> </div> <p class= "hidden red new-line edition-warning"><%= this.t('WARNING: Changing the Edition will incur additional charges.Do you want to continue?') %></p> <% } %> <%if(userList.getCurrentUser().checkAccountAddDelete()){%> <button class="account-delete btn btn-inverse" style="margin-left:181px;" data-id="<%= model.get('id') %>" title="<%=this.t('remove end user account')%>"><%=this.t('Delete Account')%></button> <%}%> </form> </div> <div class="tab-pane" id="subAccountSettingsNotifications"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Notify Reseller Account') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__notify_camera_on"/> </div> <div class="span11"> <label for="editSubAccountSettings__notify_camera_on"><%= this.t('Camera On/Off') %></label> </div> </div> </div> <div class="row-fluid"> <div class="span12"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__notify_camera_online"/> </div> <div class="span11"> <label for="editSubAccountSettings__notify_camera_online"><%= this.t('Camera Online/Offline') %></label> </div> </div> </div> <div class="row-fluid"> <div class="span12"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__notify_alert_level_one"/> </div> <div class="span11"> <label for="editSubAccountSettings__notify_alert_level_one"><%= this.t('Alert Level One') %></label> </div> </div> </div> <div class="row-fluid"> <div class="span12"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__notify_alert_level_two"/> </div> <div class="span11"> <label for="editSubAccountSettings__notify_alert_level_two"><%= this.t('Alert Level Two') %></label> </div> </div> </div> </div> </div> <div class="control-group" style="margin-bottom:100px !important"> <label class="control-label"><%= this.t('Notify Who') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <div class="span6"> <select class="span12" multiple="multiple" id="editSubAccountSettings__notify_who"> <option value="select-all-option" selected><%= this.t('All') %></option> <% _.each(model.get('users'), function(item) { %> <option value="<%= item.get('id') %>"><%- item.getDisplayName() %></option> <% }) %> </select> </div> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="subAccountSettingsAdmin"> <span class="pull-right" id="csCamera-help" data_link="account_settings_permissions"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal" style="margin-left: 145px;"> <div class="control-group" title="<%= this.t('Prevent any settings changes that can affect performance or billing.') %>"> <label class="control-label"><%= this.t('Disable Advanced Functions') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_advanced_disabled" <%=(model.get('is_advanced_disabled') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> <div class="control-group" title="<%= this.t('Disable system notification e-mails.') %>"> <label class="control-label"><%= this.t('Disable System Notifications') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_system_notifications_disabled" value="1" <%=(model.get('is_system_notifications_disabled') ? 'checked' : '')%> /> </div> </div> </div> </div> <div class="control-group" title="<%= this.t('Disable any settings changes that can affect billing.') %>"> <label class="control-label"><%= this.t('Disable Billing Changes') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_billing_disabled" value="1" <%=(model.get('is_billing_disabled') ? 'checked' : '')%> /> </div> </div> </div> </div> <div class="control-group" title="<%= this.t('Disable adding or deleting bridges and cameras.') %>"> <label class="control-label"><%= this.t('Disable Add and Delete') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_add_delete_disabled" <%=(model.get('is_add_delete_disabled') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> <div class="control-group" title="<%= this.t('Disable all bridge and camera settings. Disable account settings.') %>"> <label class="control-label"><%= this.t('Disable All Settings') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_disable_all_settings" value="1" <%=(model.get('is_disable_all_settings') ? 'checked' : '')%> /> </div> </div> </div> </div> <% if(current_user.get('is_account_superuser')) { %> <div class="control-group" title="<%= this.t('End User Account Admin can toggle bridge health status visibility') %>"> <label class="control-label"><%= this.t('Disable Bridge Health Display') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_bridge_health_available" <%=(!model.get('is_bridge_health_available') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> <% } %> <div class="control-group" title="<%= this.t('End User Account Admin can block images/video from cameras to master reseller.') %>"> <label class="control-label"><%= this.t('Enable Privacy') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_master_video_disabled_allowed" <%=(model.get('is_master_video_disabled_allowed') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> <div class="control-group" title="<%= this.t('Enable two factor authentication via text or email in end user account.') %>"> <label class="control-label"><%= this.t('Two Factor Authentication') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_two_factor_authentication_forced" <%=(model.get('is_two_factor_authentication_forced') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> <div class="control-group" style="display:none;" title="<%= this.t('Convert end user account to contract recording type.') %>"> <label class="control-label"><%= this.t('Contract Recording') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span1"> <input type="checkbox" id="editSubAccountSettings__is_contract_recording" <%=(model.get('is_contract_recording') ? 'checked' : '')%> value="1"/> </div> </div> </div> </div> </form> </div> <div class="tab-pane" id="subAccountSettingsContact"> <form class="form-horizontal" style="margin-left: -110px;"> <div class="control-group"> <label class="control-label" for=""><%= this.t('Contact') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <div class="span12"> <input class="span12" type="email" maxlength="60" id="editSubAccountSettings__contact_email" placeholder="<%= this.t('Email') %>*" required value="<%-model.get('contact_email')%>"> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" id="editSubAccountSettings__contact_first_name" placeholder="<%= this.t('First Name') %>*" required value="<%-model.get('contact_first_name')%>"> </div> <div class="span6"> <input type="text" class="span12" maxlength="60" id="editSubAccountSettings__contact_last_name" placeholder="<%= this.t('Last Name') %>*" required value="<%-model.get('contact_last_name')%>"> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input id="editSubAccountSettings__contact_street" class="span12" type="text" maxlength="60" placeholder="<%= this.t('Address') %>1" value="<%-model.get('contact_street')%>"/> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input id="editSubAccountSettings__contact_street2" class="span12" type="text" maxlength="60" placeholder="<%= this.t('Address') %>2" value="<%-model.get('contact_street2')%>"/> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input id="editSubAccountSettings__contact_city" class="span12" type="text" maxlength="60" placeholder="<%= this.t('City') %>" value="<%-model.get('contact_city')%>"/> </div> <div class="span6"> <div class="span12 bfh-selectbox bfh-states" data-country="editSubAccountSettings__countries_states2" data-state="<%-model.get('contact_state')%>"> <input id="editSubAccountSettings__contact_state" type="hidden" value=""> <a class="bfh-selectbox-toggle span12" style="margin-left:0px" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="<%-model.get('contact_state')%>"></span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input id="editSubAccountSettings__contact_postal_code" class="span12" type="text" maxlength="60" placeholder="<%= this.t('ZIP / Postal Code') %>" value="<%-model.get('contact_postal_code')%>"/> </div> <div class="span6"> <div id="editSubAccountSettings__countries_states2" class="span12 bfh-selectbox bfh-countries" data-country="<%-model.get('contact_country')%>"> <input id="editSubAccountSettings__contact_country" type="hidden" value=""> <a class="span12 bfh-selectbox-toggle" style="margin-left:0px" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="<%-model.get('contact_country')%>"></span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </form> </div> </script>   <script type="text/template" id="editUserProfile-template"> <div class="tab-pane active" id="usLogin"> <span class="pull-right" id="csCamera-help" data_link="my_profile_login"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-email"><%= this.t('Login (email)') %>:</label> <div class="controls"> <input type="email" maxlength="60" id="userSettings_email" class="settings span4" placeholder="<%= this.t('Email') %>" value="<%- this.model.get('email') %>"> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-name"><%= this.t('Name') %>:</label> <div class="controls"> <div class="row-fluid"> <input type="text" id="userSettings_first_name" maxlength="60" class="span5" placeholder="<%= this.t('First Name') %>" value="<%- this.model.get('first_name') %>"> <input type="text" id="userSettings_last_name" maxlength="60" class="span5 offset1" placeholder="<%= this.t('Last Name') %>" value="<%- this.model.get('last_name') %>"> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-language"><%= this.t('Language') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <select class="span6" id="userSettings__language"> <option value="en-us" <%=(this.model.get('language')=='en-us' ? 'selected': '')%>>English</option> <option value="ja-jp" <%=(this.model.get('language')=='ja-jp' ? 'selected': '')%>>日本語</option> <option value="de-de" <%=(this.model.get('language')=='de-de' ? 'selected': '')%>>Deutsch</option> <option value="es-es" <%=(this.model.get('language')=='es-es' ? 'selected': '')%>>Español</option> <option value="fr-fr" <%=(this.model.get('language')=='fr-fr' ? 'selected': '')%>>Français</option> <option value="it-it" <%=(this.model.get('language')=='it-it' ? 'selected': '')%>>Italiano</option> <option value="nl-nl" <%=(this.model.get('language')=='nl-nl' ? 'selected': '')%>>Nederlands</option> <option value="pl-pl" <%=(this.model.get('language')=='pl-pl' ? 'selected': '')%>>Polski</option> <option value="pt-pt" <%=(this.model.get('language')=='pt-pt' ? 'selected': '')%>>Português(Portugal) </option> <option value="pt-br" <%=(this.model.get('language')=='pt-br' ? 'selected': '')%>>Português(Brasil) </option> <option value="sv-se" <%=(this.model.get('language')=='sv-se' ? 'selected': '')%>>Svenska</option> <option value="tr-tr" <%=(this.model.get('language')=='tr-tr' ? 'selected': '')%>>Türkçe</option> </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-password"><%= this.t('Password') %>: </label> <div class="controls"> <div class="row-fluid"> <button id="userSettings__change_password" class="btn btn-info" data-testid="modal-my-profile-tab-login-button-label-change-password"><%= this.t('Change Password') %></button> <input id="userSettings__current_password" class="span4 hide" type="password" placeholder="<%= this.t('old password') %>" value=""/> <input id="userSettings__password" class="span4 hide" type="password" placeholder="<%= this.t('new password') %>" value=""/> <input id="userSettings__password_confirm" class="span4 hide" type="password" placeholder="<%= this.t('new password') %>" value=""/> <span class="red"></span> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-alternate-email"><%= this.t('Alternate email') %>:</label> <div class="controls"> <input type="email" id="userSettings_alternateEmail" class="settings span4" maxlength="60" placeholder="<%= this.t('Alternate email') %>" value="<%- this.model.get('alternate_email') %>"> <% if (!(userList.getCurrentUser().checkFeatureFlag('distributor_dashboard') && userList.getCurrentUser().get('is_distributor'))) { %> (<span data-testid="modal-my-profile-tab-login-input-label-for-alerts"><%= this.t('for alerts') %></span>) <% } %> </div> </div> <div class="control-group" style="<% if (userList.getCurrentUser().get('active_brand_subdomain') === 'hkt') { %>display:none<% } %>"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-two-factor-auth"><%= this.t('Two Factor Authentication') %>:</label> <div class="controls" style="padding: 2px;" title="<%= this.t('Enable Two Factor Authentication') %>"> <input type="checkbox" id="userSettings_is_two_factor_authentication_enabled" class="settings"> </div> </div> <div class="control-group" style="<% if (userList.getCurrentUser().get('active_brand_subdomain') === 'hkt') { %>display:none<% } %>"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-sms-phone"><%= this.t('SMS Phone') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span6"> <select class="span4" id="userSettings_countryCode"> <% var self = this; %> <% var keys = Object.keys(COUNTRY_CODES).sort(); %> <option value=""></option> <% for(var i = 0; i < keys.length; i++){%> <option value="<%=keys[i]%>" <%=(keys[i] === self.model.get("country") ? "selected" : "")%>><%=keys[i]%></option> <% } %> </select> <input type="text" id="userSettings_smsPhone" class="settings span8" maxlength="60" placeholder="<%= this.t('SMS Phone') %>" value="<%- this.model.get('sms_phone') %>"> <p class="span12"> (<span data-testid="modal-my-profile-tab-login-input-label-for-authentication"><%= this.t('for authentication') %></span>) </p> </div> </div> </div> </div> <div class="control-group" style="display:none"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-mms-messages"><%= this.t('Use MMS Messages') %>:</label> <div class="controls"> <input type="checkbox" id="userSettings_smsIncludePicture" class="settings" <% (this.model.get('is_sms_include_picture')) ? print('checked') : print('') %> > </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-login-input-label-support-pin"><%= this.t('Support Pin') %>:</label> <div class="controls"> <input type="text" id="userSettings_user_pin" class="settings" maxlength="6" placeholder="<%= this.t('Support Pin') %>" value="<%- this.model.get('user_pin') %>"> </div> </div> </form> </div> <div class="tab-pane" id="usAlerts"> <span class="pull-right" id="csCamera-help" data_link="my_profile_notifications"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-notifications-input-label-notify-on-alerts"><%= this.t('Notify on Alerts') %>:</label> <% if (this.model.get('admin')) { %> <div class="controls"> <label class="checkbox" for="userSettings__notify_levels_system"> <span data-testid="modal-my-profile-tab-notifications-input-label-notify-on-alerts-all"><%= this.t('System All') %></span> <input type="checkbox" id="userSettings__notify_levels_system" <%=($.inArray(3, this.model.get('json_obj').een.notify_levels) >= 0 ? 'checked' : '')%> /> </label> </div> <% } %> <% if (userList.getCurrentUser().checkFeatureFlag('location_groups')) { %> <div class="controls"> <label class="checkbox" for="userSettings__notify_levels_system_location"> <span data-testid="modal-my-profile-tab-notifications-input-label-notify-on-alerts-location"><%= this.t('System Location Specific') %></span> <input type="checkbox" id="userSettings__notify_levels_system_location" <%=($.inArray(4, this.model.get('json_obj').een.notify_levels) >= 0 ? 'checked' : '')%> /> </label> </div> <% } %> <div class="controls"> <label class="checkbox" for="userSettings__notify_levels_high"> <span data-testid="modal-my-profile-tab-notifications-input-label-notify-on-alerts-high"><%= this.t('High') %></span> <input type="checkbox" id="userSettings__notify_levels_high" <%=($.inArray(1, this.model.get('json_obj').een.notify_levels) >= 0 ? 'checked' : '')%> /> </label> </div> <div class="controls"> <label class="checkbox" for="userSettings__notify_levels_low"> <span data-testid="modal-my-profile-tab-notifications-input-label-notify-on-alerts-low"><%= this.t('Low') %></span> <input type="checkbox" id="userSettings__notify_levels_low" <%=($.inArray(2, this.model.get('json_obj').een.notify_levels)>= 0 ? 'checked' : '')%> /> </label> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-notifications-input-label-when"><%= this.t('When') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span12"> <select class="span8" id="userSettings__notify_time"> <option value="all" <%=(this.model.get('notify_time')=='all' ? 'selected': '')%>><%= this.t('24 hours') %></option> <option value="work" <%=(this.model.get('notify_time')=='work' ? 'selected': '')%>><%= this.t('Work hours') %> (<%=this.model.get('work_hours')%>)</option> <option value="nonwork" <%=(this.model.get('notify_time')=='nonwork' ? 'selected': '')%>><%= this.t('Non-Work hours') %></option> <option value="custom" <%=(this.model.get('notify_time')=='custom' ? 'selected': '')%>><%= this.t('Custom') %></option> </select> </div> <div id="userSettings__notify_time_custom" style="margin-left:0px !important;" class="span12 <%=(this.model.get('notify_time')=='custom' ? '' : 'hide')%>"> <div class="input-append bootstrap-timepicker"> <input id="userSettings__notify_time_custom_from" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> To <div class="input-append bootstrap-timepicker"> <input id="userSettings__notify_time_custom_to" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-notifications-input-label-email"><%= this.t('Email Notifications') %>:</label> <div class="controls"> <div class="row-fluid"> <input type="checkbox" id="userSettings__notify_rule_email" <%=($.inArray('email', this.model.get('notify_rule_methods'))>=0 ? 'checked' : '')%>> </div> </div> <label class="control-label" for="" data-testid="modal-my-profile-tab-notifications-input-label-push"><%= this.t('Push Notifications') %>:</label> <div class="controls"> <div class="row-fluid"> <input type="checkbox" id="userSettings__notify_rule_push" <%=($.inArray('push', this.model.get('notify_rule_methods'))>=0 ? 'checked' : '')%>> </div> </div> </div>  </form> </div> <div class="tab-pane" id="usTime"> <span class="pull-right" id="csCamera-help" data_link="my_profile_time"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-time-input-label-time-zone"><%= this.t('Time Zone') %>:</label> <div class="controls"> <div class="row-fluid"> <select id="userSettings__timezone" class="span6"> <% var model = this.model; var user_timezone = model.get('timezone'); var is_in_timezones_array = false; _.each(TIME_ZONES, function(timezone){ var is_selected = ''; var timezone_name = timezone.name; if(user_timezone==timezone_name) { is_in_timezones_array = true; is_selected = 'selected'; } %> <option value="<%=timezone_name%>" <%=is_selected%>><%=timezone_name%></option> <%})%> <% if(!is_in_timezones_array) { %> <option value="<%=user_timezone%>" selected><%=user_timezone%></option> <% } %> </select> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-time-input-label-24-clock"><%= this.t('24 Hour Clock') %>:</label> <div class="controls"> <input type="checkbox" id="userSettings_json_show_AMPM" class="" <%=(this.model.get('json_obj').een.show_AMPM ? '' : 'checked')%>> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-time-input-label-show-milliseconds"><%= this.t('Millisecond Display') %>:</label> <div class="controls"> <input type="checkbox" id="userSettings_json_milliseconds_display" class="" <%=(this.model.get('json_obj').een.milliseconds_display ? 'checked' : '')%>> </div> </div> </form> </div> <div class="tab-pane" id="usLayouts"> <span class="pull-right" id="csCamera-help" data_link="my_profile_layouts"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal clearfix"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-layouts-input-label-rotation-interval"><%= this.t('Layout Rotation Interval') %>:</label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <%var rotation_setting = this.model.getLayoutRotationSeconds();%> <select class="span12" id="userSettings_json_layout_rotation_seconds" <%=(layoutLinkList.models.length <= 1 && rotation_setting === null ? 'disabled title="' + utils.t('You must have more than 1 layout to enable') + '\"' : '')%>> <option value="" <%=rotation_setting === null ? "selected" : ""%>><%= this.t('Disabled') %></option> <%if($.inArray(rotation_setting, [5,10,15,30,60,120,300])===-1 && rotation_setting !== null){%> <option value="<%=rotation_setting%>" selected><%=rotation_setting%> <%= this.t('seconds') %></option> <%}%> <option value="5" <%=(rotation_setting==5?'selected':'')%>>5 <%= this.t('seconds') %></option> <option value="10" <%=(rotation_setting==10?'selected':'')%>>10 <%= this.t('seconds') %></option> <option value="15" <%=(rotation_setting==15?'selected':'')%>>15 <%= this.t('seconds') %></option> <option value="30" <%=(rotation_setting==30?'selected':'')%>>30 <%= this.t('seconds') %></option> <option value="60" <%=(rotation_setting==60?'selected':'')%>>1 <%= this.t('minute') %></option> <option value="120" <%=(rotation_setting==120?'selected':'')%>>2 <%= this.t('minutes') %></option> <option value="300" <%=(rotation_setting==300?'selected':'')%>>5 <%= this.t('minutes') %></option> </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-layouts-input-label-alphabetize"><%= this.t('Alphabetize Layouts') %>:</label> <div class="controls"> <label class="checkbox" for="userSettings_layout_alphabetize"> <input type="checkbox" id="userSettings_layout_alphabetize" /> </label> </div> </div> <label class="control-label pull-left" for="" data-testid="modal-my-profile-tab-layouts-input-label-order"><%=this.t('Layout Order')%>: </label> <div> <ul title="" id="userSettings_layout_order" class="span3" style="float:left; margin-left: 3.5%;"> </ul> </div> </form> </div> <div class="tab-pane" id="usPreviews"> <span class="pull-right" id="csCamera-help" data_link="my_profile_previews"> <i class="icon-question-sign een-help-link"></i> </span> <form class="form-horizontal"> <% if (userList.getCurrentUser().checkFeatureFlag('media_shortcut')) { %> <div id="userSettings-media-shortcut" class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-previews-input-label-media-shortcut"><%= this.t('Enable Media Shortcut') %>:</label> <div class="controls"> <input type="checkbox" id="userSettings_json_media_shortcut" class="" <%=(this.model.get('json_obj').een.media_shortcut ? 'checked' : '')%>> </div> </div> <% } %> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-previews-input-label-motion-boxes"><%= this.t('Show Motion Boxes') %>:</label> <div class="controls"> <input type="checkbox" id="userSettings_json_motion_boxes" class="" <%=(this.model.get('json_obj').een.motion_boxes ? 'checked' : '')%>> </div> </div> <div class="control-group"> <label class="control-label" data-testid="modal-my-profile-tab-previews-input-label-show-analytics"><%= this.t("Show Analytics") %></label> <div class="controls"> <input type="checkbox" class="showAnalytics" value="analytics" <%=(this.model.isShowAnalytics() ? "checked" : "")%>> </div> </div> <div class="control-group"> <label class="control-label" for="userSettings_json_show_plugins_extensions" data-testid="modal-my-profile-tab-previews-input-label-show-plugins"> <%= this.t('Show Plugins and Extensions') %>: </label> <div class="controls"> <input type="checkbox" id="userSettings_json_show_plugins_extensions" <%= (this.model.isShowPluginsNExtensions() ? 'checked' : '') %>> </div> </div> <div class="control-group"> <label class="control-label" for="userSettings_show_original_aspect_ratio" data-testid="modal-my-profile-tab-previews-input-label-original-aspect-ratio"> <%= this.t('Show original aspect ratio') %>: </label> <div class="controls"> <input type="checkbox" id="userSettings_show_original_aspect_ratio" /> </div> </div> </form> </div> <div class="tab-pane" id="usDevices"> <% var devices = this.model.get("user_authenticated_clients") || {}; var device_keys = Object.keys(devices); var self = this; if (device_keys.length === 0) {%> <p class="red span4"> <%= this.t('No trusted devices found.')%> </p> <%} else {%> <form class="form-horizontal"> <div class="row-fluid"> <ul class="span12 trusted-device-list"> <% _.each(device_keys, function(key) { var device = devices[key]; %> <li class="trusted-device-entry span12" id="<%=key%>" data-id="<%=key%>"> <div class="span1"> <i class="icon-large device-icon <%=device.client_is_pc ? 'icon-laptop' : (device.client_is_mobile ? 'icon-mobile-phone' : 'icon-tablet')%>"></i> </div> <div class="span8"> <p class="span12"> <%=self.t("Info:")%> <%-device.client_type ? device.client_type : ""%> </p> <p class="span12"> <%=self.t("IP Address:")%> <%-device.client_ip ? device.client_ip : ""%> </p> <p class="span12"> <%=self.t("Last Login:")%> <%-device.last_login ? new Date(device.last_login * 1000).toString() : ""%> </p> </div> <div class="span2 offset1"> <button data-id="<%=key%>" class="btn forget-client" title="<%=self.t('Remove this device from trusted list.')%>"><i class="icon-trash"></i></button> </div> </li> <%});%> </ul> </div> </form> <button class="btn btn-inverse forget-all"><%=self.t("Remove All")%></button> <%}%> </div> <div class="tab-pane" id="usReports"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="" data-testid="modal-my-profile-tab-reports-input-label-weekly-summary"><%= this.t('Cloud Video Surveillance Weekly Summary') %>:</label> <div class="controls"> <div class="row-fluid"> <input type="checkbox" id="userSettings_weekly_newsletter" class="settings" <% (this.model.get('weekly_newsletter')) ? print('checked') : print('') %> > </div> </div> </div> </form> </div> </script>   <script type="text/template" id="editUserView-template"> <span class="modal-heading-append"> // <%-this.model.get('first_name')%> <%-this.model.get('last_name')%></span> <div class="tab-pane active" id="editUserModal__tab_permissions"> <div class="row-fluid"> <div id="editUserModal__permissions_manager"></div> </div> </div> <div class="tab-pane" id="editUserModal__tab_user_settings"> <div id="editUserModal__general_access"></div> </div> <div class="tab-pane" id="editUserModal__tab_accounts"> <div class="row-fluid"> <div id="editUserModal__account_access"></div> </div> </div> <%if(userList.getCurrentUser().get('is_account_superuser') && userList.getCurrentUser().checkFeatureFlag('location_groups')){%> <div class="tab-pane" id="editUserModal__tab_locations"> <div class="row-fluid"> <div id="editUserModal__locations_manager"></div> </div> </div> <%}%> <div class="tab-pane" id="editUserModal__tab_cameras"> <div class="row-fluid"> <div id="editUserModal__camera_access"></div> </div> </div> <div class="tab-pane" id="editUserModal__tab_layouts"> <div class="row-fluid"> <div id="editUserModal__layout_access"></div> </div> </div> </script>  <script type="text/template" id="ExportsV3WrapView-template"> <div class="container-fluid"> {{#if is_no_data}} <h3>{{translateText("There are currently no downloads.")}}</h3> {{else}} <div id="jobs__content" class="downloads-page"> <JobsView/> </div> <div id="exports__content" class="downloads-page"> <ExportsView/> </div> {{/if}} </div> </script>  <script type="text/template" id="ExportsView-template"> {{#if items.length}} <article class="row-fluid"> <div class="widget"> <header class="widget-title"><i class="icon-flag"></i> {{translateText('Downloads')}} {{#if pagination.total > pagination.page_size}} <div class="pull-right pagination-bar"> <p class="pag-num-text pull-right">{{pagination.pagination_range}}</p> <div class="pull-right btn-group pagination-buttons"> <button class="btn btn-info btn-mini first-btn" on-click="paginate(event, 'prev')" > <i class=" icon-chevron-left"></i> </button> <button class="btn btn-info btn-mini last-btn" on-click="paginate(event, 'next')" > <i class=" icon-chevron-right"></i> </button> </div> </div> {{/if}} </header> <div class="widget-content clearfix"> <div class="row"> <div class="red notifications-error" id="notifications__error"></div> </div> <table class="table table-striped"> <thead> <tr> <th style="width:20%">{{translateText('Download Availability')}}</th> <th style="width:65%">{{translateText('Details')}}</th> <th style="width:15%; min-width: 125px;">{{translateText('Action')}}</th> </tr> </thead> <tbody id='downloads__rows'> {{#each items}} {{> downloads__row}} {{/each}} </tbody> </table> </div> </div> </article> {{/if}} {{#partial downloads__row}} <tr data-id="{{id}}"> <td class-red="expired">{{ expired ? translateText("Expired") : translateText("Expires")}} {{expire_formatted_date}}</td>  <td class="notification-details-column"> <div> {{video_description}} </div> <div class="notification-download-link"> {{#if start_time && end_time }} <a href="#" title="{{translateText('View selection in history')}}" class="{{download_link_class}}" on-click="exports_helper.viewSelectionInHist(camera, event, start_timestamp, end_timestamp)" > <span>{{start_date}}</span> <span>{{start_time}} — {{end_time}} ({{duration}})</span> </a> {{/if}} {{download_size}} {{#if notes }} <div id="notes-display-{{id}}"> {{translateText('Notes')}}: {{notes}} </div> {{/if}} </div> <div id="notification-notes-{{id}}" class="display-none" > <div> <div> <input class="notes-input" type="text" placeholder="{{notes}}" id="notes-input-{{id}}"/> <button title="{{translateText('Save Notes')}}" type="button" class="save-notes edit-notes-btn btn" on-click="_saveNote(id)" > <i class="icon icon-ok"></i> </button> <button title="{{translateText('Cancel Edit')}}>" type="button" class="edit-notes edit-notes-btn btn" on-click="_toggleEditNoteField(id)" > <i class="icon icon-remove-sign"></i> </button> </div> </div> </div> {{#if is_debug_mode }} <br/> <div class="disabled">{{translateText('Task ID')}}: {{job_id}}</div> {{/if}} </td>  <td> {{#if download_url }}  <button title="{{translateText('Download')}}" type="button" class="file-management btn" on-click="_downloadVideo(download_url, video_description)" > <i class="icon-cloud-download"></i> </button> {{/if}}   {{#if checksum || is_directory }} <button title="{{translateText('Copy MD5 Checksum to clipboard (proof that video has not been tampered with)')}}" class="checksum btn" on-click="_handleChecksumBtnClick(this, event)" > <i class="icon icon-check"></i> </button> <textarea id="{{checksum}}_sum" class="checksum-exports"><{{checksum}}></textarea> {{/if}}   <button class="btn edit-notes" title="{{translateText('Edit notes')}}" type="button" on-click="_toggleEditNoteField(id)" > <i class="icon-pencil"></i> </button> </td> </tr> {{/partial}} </script>  <script type="text/template" id="FeedbackView-template"> <p><%=this.t("Asterisk(*) indicates a required field")%></p> <form style="margin-top: 7%;" class="form-horizontal"> <div class="control-group"> <label class="control-label"> *<%= this.t("Make") %>:</label> <div class="controls"> <input maxlength="255" id="feedback__make" type="text" required> </div> </div> <div class="control-group"> <label class="control-label"> *<%= this.t("Model") %>: </label> <div class="controls"> <input maxlength="255" id="feedback__model" type="text" required> </div> </div> <div class="control-group"> <label class="control-label"> *<%= this.t("Camera IP") %>: </label> <div class="controls"> <input maxlength="255" id="feedback__ip" type="text" required> </div> </div> <div class="control-group"> <label class="control-label"> *<%= this.t("Camera Login")%>:</label> <div class="controls"> <input maxlength="255" id="feedback__login_u" placeholder="<%=this.t("Username")%>" type="text" required> <input maxlength="255" id="feedback__login_p" class="input-password" placeholder="<%=this.t("password")%>" type="text" required> </div> </div> <div class="control-group"> <label class="control-label"> *<%= this.t("Contact Email") %>: </label> <div class="controls"> <input maxlength="255" id="feedback__email" type="text" required> </div> </div> <div class="control-group"> <label class="control-label"> <%=this.t("Contact Phone") %>: </label> <div class="controls"> <input maxlength="255" id="feedback__tel" type="tel"> </div> </div> <div class="control-group"> <label class="control-label"> <%=this.t("Notes")%>: </label> <div class="controls"> <textarea maxlength="1028" class="span4" id="feedback__notes" type="text"></textarea </div> </div> <p><%=this.t("Leave the camera on and attached to the same network as the bridge")%></p> </form> </script>   <script type="text/ractive" id="FilteredDropdown-template"> <input class="span12" type="text" placeholder="{{translateText('Filter Rooms')}}" value="{{filter}}"/> <select class="span12" value="{{selected_val}}" {{disabled ? 'disabled="disabled"' : ""}}> {{#if filter.length < 1}} <option value="">-- {{translateText('Choose')}} --</option> {{/if}} {{#each filtered_values}} <option value="{{id}}">{{name}}</option> {{/each}} </select> </script>   <script type="text/template" id="FirstLayoutView-template"> <header class="widget-title"><i class="icon-bullhorn"></i> <%= this.t('Welcome to Layouts') %></header> <div class="widget-content clearfix" id="first_layout_content"> <div class="row-fluid"> <div class="span6"> <h3><%= this.t('Create your first layout') %></h3> <p> <%= this.t('Layouts are different organizations of your cameras. You can have as many layouts as you want.') %> </p> <p> <%= this.t('Click the button to create your first layout.') %> </p> </div> <div class="span6"> <img src="_images/layouts.jpeg"> </div> </div> <div class="row-fluid"> <div class="span3 offset9"> <button id="create_first_layout" href="#" class="btn btn-success pull-right"><i class="icon-plus-sign"></i> <%= this.t('Create a Layout') %></button> </div> </div> </div> </script>  <script type="text/template" id="FirstLayoutWrapView-template"> <div class="container-fluid"> <article class="row-fluid"> <div class="widget" id="first_layout_content"> </div> </article> </div> </script>  <script type="text/ractive" id="GlobalWarningComponent-template"> {{#if show}} {{> message_partial}} {{/if}} {{#partial bridge_update}} <div class="alert"> <strong>{{translateText('WARNING')}}: </strong> {{translateText('Bridges are being updated and must not be powered off:')}} <strong> {{getBridgeList(bridge_upgrades)}}. </strong> </div> {{/partial}} </script>  <script type="text/ractive" id="HelpLink-template"> <span on-click="@this.showHelp()" class="{{class}}" data_link="{{data_link}}"> <i class="icon-question-sign een-help-link"></i> </span> </script>  <script type="text/ractive" id="IdentityProviderForm-template"> <form class="form-horizontal">   {{#is_master}} <div class="idp row row-fluid"> <input id="idp__disabled_all" class="idp radio" type="radio" name="{{master_idp_switch}}" value="master_disabled" on-change="toggleForm"> <label class="idp radio" for="idp__disabled_all" data-testid="modal-account-tab-security-master-input-label-use-login" > {{translateText('Use Login')}} </label> </div> <div class="idp row row-fluid"> <input id="idp__enabled" class="idp radio" type="radio" name="{{master_idp_switch}}" value="master_enabled" on-change="toggleForm"> <label class="idp radio" for="idp__enabled" data-testid="modal-account-tab-security-master-input-label-use-sso" > {{translateText('Use my own Identity Provider to sign in (Single Sign-On)')}} </label> <p class="idp help_text" data-testid="modal-account-tab-security-master-input-label-use-sso-help-text" > {{translateText('All users (including end user accounts) will use the same Identity Provider, which means that if the reseller account is using SSO, the reseller is responsible for managing all the users in each of the end user account.')}} </p> </div> <div class="idp row row-fluid"> <input id="idp__sub_allowed" class="idp radio" type="radio" name="{{master_idp_switch}}" value="sub_allowed" on-change="toggleForm"> <label class="idp radio" for="idp__sub_allowed" data-testid="modal-account-tab-security-master-input-label-allow-only-end-user-to-enable-sso" > {{translateText('Allow ONLY End User Accounts to enable SSO')}} </label> <p class="idp help_text" data-testid="modal-account-tab-security-master-input-label-allow-only-end-user-to-enable-sso-help-text" > {{translateText('The reseller account cannot use SSO, and each end user account must have their own Identity Provider')}} </p> {{#sub_account_idp_warning}} <p class="idp text_warning">{{sub_account_idp_warning}}</p> {{/sub_account_idp_warning}} </div> {{else}}  <div class="idp row row-fluid"> <input id="idp__sub_enable" class="idp checkbox" type="checkbox" checked="{{is_enabled}}" on-change="toggleForm"> <label for="idp__sub_enable" class="idp checkbox_label" data-testid="modal-account-tab-security-input-label-use-sso" > {{translateText('Use my own Identity Provider to sign in (Single Sign-On)')}} </label> </div>  <div class="idp row row-fluid"> <input id="idp__sub_enable_user" class="idp checkbox" type="checkbox" checked="{{is_create_user}}" disabled={{is_create_user_locked}} on-change="toggleForm"> <label for="idp__sub_enable_user" class="idp checkbox_label {{#is_create_user_locked}}locked{{/is_create_user_locked}}" data-testid="modal-account-tab-security-input-label-create-user-if-not-exist" > {{translateText('Create user if one does not exist')}} </label> </div> {{/is_master}}   {{#display_form}} <hr class="idp"> <h5 data-testid="modal-account-tab-security-header-settings" >{{translateText('Settings')}}</h5> <div class="idp row row-fluid"> <label data-testid="modal-account-tab-security-settings-input-label-sso-url" > {{translateText('Single Sign-On URL')}}: </label> <input type="text" class="span12" value="{{sso_url}}"> </div> <div class="idp row row-fluid"> <label data-testid="modal-account-tab-security-settings-input-label-issuer" > {{translateText('Issuer')}}: </label> <input type="text" class="span12" value="{{issuer}}"> </div> <div class="idp row row-fluid"> <label data-testid="modal-account-tab-security-settings-input-label-certificate" >{{translateText('X.509 Certificate')}}:</label> <div> <textarea class="span12 idp" rows="5" value="{{cert}}"></textarea> </div> <div> <input type="file" id="sso__cert_upload" on-change="changeCert"> </div> </div> {{/display_form}}  </form> </script>   <script type="text/ractive" id="IFrameDemoComponent-template"> <div class="widget"> <header class="widget-title"> <i class='icon-wrench'></i> {{widget_title}} </header> <div class="widget-content"> <iframe src="{{iframe_source_url}}"> </div> </div> </script>   <script type="text/ractive" id="InstallViewComponent-template"> <div class="widget"> <header class="widget-title"> <i class='icon-wrench'></i> {{translateText('Installer Diagnostic Tools')}} </header> <div class="widget-content"> <table class="table table-striped"> <thead> <tr> <th scope="col">{{translateText('Status')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('status')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Name')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('name')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Motion')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('motion')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Analytics')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('analytics')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Camera Model')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('model')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Duty Cycle')}} <i class="icon-sort text-dimmed" on-click="@this.sortTable('duty_cycle')" title="{{translateText('sort')}}"></i></th> <th scope="col">{{translateText('Preview/Video Size')}}</th> <th scope="col">{{translateText('Bandwidth Speed/Mode')}}</th> <th scope="col">{{translateText('Retention')}}</th> {{#if show_advanced}} <th scope="col">{{translateText('Bridge Camera Days/Data')}}</th> {{/if}} <th scope="col">{{translateText('Stream Type')}}</th> <th scope="col">{{translateText('Settings')}}</th> </tr> </thead> <tbody> {{ #if loading }} {{#each loading_row_count}} <tr> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> <td><div class="dashboard__skeleton-box"></div></td> </tr> {{/each}} {{else}} {{#each cameras: i}} {{#with getSettingsInformation(i) as camera_info}} <tr data-index="{{i}}"> <td> <i class="{{status_class}} big-icon" title="{{device_state}}"></i> </td> <td> <div>{{deviceName}}</div> {{#if ../../show_advanced}} <div class="text-dimmed">{{deviceID}}</div> {{/if}} </td> <td> <i class="{{#if hasMotion(i)}}icon-ok green {{else}} icon-remove text-dimmed {{/if}}"></i> </td> <td class="analytics"> <i class="{{#if hasAnalytics(i)}}icon-ok green {{else}} icon-remove text-dimmed {{/if}}"></i> </td> <td> <div>{{deviceMake}} {{deviceModel}}</div> <div>{{deviceIPAddress}}</div> </td> <td> {{#with getDutyCycleInformation(i) as duty_cycle}} <div class="{{duty_cycle.class}}"> {{duty_cycle.value}} </div> {{/with}} </td> <td> <div>{{getPreviewSize(camera_info) || ''}}</div> <div>{{getVideoSize(camera_info) || ''}}</div> <div> {{#if camera_info.preview_rate}} {{translateText('Update Rate')}} (s): {{camera_info.preview_rate / 1000}} {{/if}} </div> </td> <td> <div>{{getPreviewBandwidthText(camera_info) || ''}}</div> <div>{{getVideoBandwidthText(camera_info) || ''}}</div> </td> <td> <div class="{{camera_info.retention.class}}"> {{#if ../../show_advanced}} <span class="text-dimmed">bridge: </span>{{camera_info.retention.expected}} {{else}} {{#if camera_info.retention.local > -1}} {{! For CMVRs, show cloud retention by default }} {{translateText('Cloud Retention')}}: {{(!camera_info.retention.only_cloud && (camera_info.retention.cloud == '1' || !Number(camera_info.retention.cloud))) ? '0' : camera_info.retention.cloud}} {{else}} {{camera_info.retention.expected}} {{/if}} {{/if}} </div> {{#if camera_info.is_bridge_cmvr}} <div> {{#if ../../show_advanced}} <span class="text-dimmed">{{translateText('minimum on premise retention')}}: </span> {{else}} {{translateText('Minimum On Premise Retention')}}: {{/if}} {{ camera_info.retention.bridge_target_days === -1 || !Number(camera_info.retention.bridge_target_days) ? '0' : camera_info.retention.bridge_target_days}} </div> <div> {{#if ../../show_advanced}} <span class="text-dimmed">{{translateText('maximum on premise retention')}}: </span> {{else}} {{translateText('Maximum On Premise Retention')}}: {{/if}} {{ camera_info.retention.local_retention_days === -1 || !Number(camera_info.retention.local_retention_days) ? '0' : camera_info.retention.local_retention_days}} </div> <div> {{#if ../../show_advanced}} <span class="text-dimmed">{{translateText('cloud preview only (PR1)')}}: </span> {{else}} {{translateText('Cloud Preview Only (PR1)')}}: {{/if}} {{camera_info.retention.only_cloud ? 'Yes' : 'No'}} </div> {{/if}} {{#if ../../show_advanced}} <div class="text-dimmed"> <div>camera: {{camera_info.retention.cloud}}</div> </div> {{/if}} </td> {{#if ../../show_advanced}} <td> <div>{{deviceDaysOnDisk >= 0 && String(deviceDaysOnDisk) || ''}}</div> <div>{{getDeviceKBsOnDisk(i)}}</div> </td> {{/if}} <td>{{deviceTypeAndStreams}}</td> <td> {{#if getDeviceUpdatePermission(i)}} <button type="button" class="info" on-click="@this.openSettingsModal(i)"><i class="icon-cog"></i></button> {{/if}} </td> </tr> {{/with}} {{/each}} {{/if}} </tbody> </table> </div> </div> </script>   <script type="text/ractive" id="IntrusionRegionEditor-template"> <div class="analytics-object-settings"> <div class="analytics-object-title"> <h5> {{translateText('Object Detection Settings')}} </h5> <button type="button" on-click="editSize" title="{{translateText('Applies across all analytics')}}"> <i class="icon-pencil"></i> </button> </div> {{#if @shared._object.edit_active}} <div class="analytics-object-settings-detail"> <div class="analytics-object-sensitivity"> {{translateText('Sensitivity')}}: <Slider class="analytics-sensitivity-slider" type="analytics" roiid="loitering" slider_sensitivity="{{@shared.object.sensitivity}}" min="0" max="100" step="1"></Slider> <i class="{{#if @shared._object.not_default}}icon-undo{{/if}} gray" on-click="resetSensitivity" title="{{translateText('Restore to default')}}"></i> </div> <div class="analytics-object-size" on-click="setInnerActive"> <span>{{translateText('Min Size')}}:</span> <input type="text" class="analytics-object-setting-min {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.minw)}}% x {{getPercentValue(@shared.object.objectsize.minh)}}%" disabled> <button type="button" class="object-size-inner {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> <div class="analytics-object-size" on-click="setOuterActive"> <span>{{translateText('Max Size')}}:</span> <input type="text" class="analytics-object-setting-max {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.maxw)}}% x {{getPercentValue(@shared.object.objectsize.maxh)}}%" disabled> <button type="button" class="object-size-outer {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> </div> {{/if}} </div> <div class="row-fluid" style="margin-bottom: 10px"> <div class="roi-container"> </div> </div> <div class="row-fluid"> <div class="row-fluid span12"> <div class="span2"> <h5>{{title}}</h5> </div> <div class="span10"> <i class="icon-plus-sign add-icon pull-right" style="margin-right: 16px;" on-click="createNewPoly" title="{{translateText('Add region')}}."></i> </div> </div> <div class="row-fluid" style="width:98%"> <table class="table table-condensed table-bordered table-striped analytics-table" id="csAnalytics-line-table"> <thead> <tr> <th style="width:8%">{{translateText('Order')}}</th> <th style="width:70%">{{translateText('Name')}}</th> <th style="width:22%">{{translateText('Actions')}}</th> </tr> </thead> <tbody id="csAnalytics_line_TableBody"> {{#each polys:index}} <tr data-id="{{id}}" class="camera_settings_line_row roi-options {{isEditActive(this) ? 'motion-selected-region' : ''}} {{isRowSizeEditActive(this)}}" id="{{name}}" data-color="{{color}}"> <td on-click="editPoly" class="pad-text line-order" style="color: white; background-color: {{color}};">{{translateText("" + (index + 1))}}</td> <td on-click="editPoly" class="csAnalytics_line_name"> <input type="text" class="analytic-region-name" value="{{this.name}}"> </td> <td> <button type="button" class="edit-analytics-line csAnalytics-edit-btn" data-id="{{id}}" on-click="editPoly"> <i class="icon-pencil"></i> </button> {{#if allow_alerts && !model.get("deviceShare")}} <button type="button" class="edit-alerts" data-id="{{id}}" on-click="editAlert"> <i class="icon-bell-alt {{isAlertSet(this) ? 'green' : ''}}"></i> </button> {{/if}} <button type="button" data-id="{{id}}" class="remove-analytics-line csAnalytics-edit-btn" on-click="deletePoly"> <i class="icon-trash"></i> </button> </td> </tr> {{#if isEditAlertActive(this.id)}} <AnalyticAlertEditor colspan="5" payload="{{alert_payload}}" roiid="{{id}}" who="{{this.who}}" when="{{this.when ? this.when : '*'}}" throttle_type="{{this.throttle_type ? this.throttle_type : 2}}" account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{this.throttle_hour_limit ? this.throttle_hour_limit : 5}}" users="{{getUserList()}}" mode="{{this.mode ? this.mode : ['all']}}" level="{{this.level ? this.level : 1}}" smart_alerts_source_alert="intrusion" > </AnalyticAlertEditor> {{/if}} {{/each}} </tbody> </table> </div> </div> {{#if @shared.ignoremask_warning }} <hr> <p class="from-motion-warning">{{translateText('Zero sensitivity motion regions are applied to the analytics.')}}</p> {{/if}} <p style="color: red;">{{error_text}}</p> </script>   <script type="text/template" id="JobsView-template"> {{#if display_items.length}} <article class="row-fluid"> <div class="widget"> <header class="widget-title"> <i class="icon-flag"></i> {{translateText('Pending Downloads')}} </header> <div class="widget-content clearfix"> <div class="row"> <div class="red notifications-error" id="notifications__error"></div> </div> <table class="table table-striped"> <thead> <tr> <th style="width:20%">{{translateText('Download Availability')}}</th> <th style="width:50%">{{translateText('Details')}}</th> <th style="width:15%">{{translateText('Status')}}</th> <th style="width:15%; min-width: 125px;">{{translateText('Action')}}</th> </tr> </thead> <tbody id='jobs__rows'> {{#each display_items}} {{> job_row}} {{/each}} </tbody> </table> </div> </div> </article> {{/if}} {{#partial job_row}} <tr data-id="{{id}}"> {{#if auto_delete === false}} <td> {{#if directory}} {{translateText('Your download will be securely stored in Archive')}} > {{directory}} {{translateText('after completion')}}. {{else}} {{translateText('Your download will be securely stored in Archive after completion')}}. {{/if}} </td> {{else}} <td class="{{ expired ? 'red' : '' }}">{{translateText("Expires")}} {{expire_formatted_date}}</td> {{/if}}  <td class="notification-details-column"> <div> {{video_description}} </div> <div class="notification-download-link"> {{#if start_time && end_time }} <a href="#" title="{{translateText('View selection in history')}}" class="{{download_link_class}}" on-click="exports_helper.viewSelectionInHist(details.camera, event, start_timestamp, end_timestamp)" > <span>{{start_date}}</span> <span>{{start_time}} — {{end_time}} ({{duration}})</span> </a> {{/if}} {{download_size}} </div> {{#if is_debug_mode }} <br/> <div class="disabled">{{translateText('Task ID')}}: {{id}}</div> {{/if}} </td>  <td> {{details.job_state_text}} </td> <td>   {{#if !notif_offline && percent >= 0 && percent < 100 && !( details.job_state === JOBS_STATUSES.PARTIALLY_FAILED || details.job_state === JOBS_STATUSES.FAILURE_INTERVALS || details.job_state === JOBS_STATUSES.FAILURE_JOB ) }} <div class="notification-progress-container"> <div class="progress progress-striped"> <div class="bar" style="height: 15px; width:{{percent}}%;"></div> </div> <div title="{{translateText('Cancel download')}}" class="notification-delete-download text-dimmed" on-click="_removeDownload(id, 'cancel')" > <i class="icon icon-remove"></i> </div> </div> {{#if percent > 0 }} <p>{{percent}}% {{translateText('Complete')}}</p> {{else}} <p>{{translateText('Video download started')}} ...</p> {{/if}} {{/if}}   {{#if ( details.job_state === JOBS_STATUSES.PARTIALLY_FAILED || details.job_state === JOBS_STATUSES.FAILURE_INTERVALS || details.job_state === JOBS_STATUSES.FAILURE_JOB ) }} <button id="repeat-download" title="{{translateText('Request Again')}}" type="button" class="btn" on-click="_rerequestDownload(id, details.job_retry_strategy)" > <i class="icon icon-repeat"></i> </button> <button id="remove-download" title="{{translateText('Delete export')}}" type="button" class="btn" on-click="_removeDownload(id, 'delete')" > <i class="icon icon-trash"></i> </button> {{/if}} <div class="red notification-cancel-error"></div> </td> </tr> {{/partial}} </script> <script type="text/template" id="LayoutDynamicView-template"> <div class="container-fluid layout-dynamic"> <article class="row-fluid"> <div id="layout-edit-controls" style="display:none"> <button class="btn btn-warning" id="cancel_edit_layout_button"><i class="icon-remove"></i> Cancel</button> <button class="btn btn-success" id="save_layout_button"><i class="icon-ok-circle"></i> Save Changes</button> </div> <div class="layout-dynamic__initial-loading" style="<%=deviceList.init_loading ? 'display:grid' : 'display:none'%>"> <% for(var i = 1; i <= this.initial_loading_items_amount; i++) { %> <div class="layout-dynamic__initial-loading__item"></div> <% } %> </div> <div id="layout-manager"> <h3 id="no-results-message"><%=this.t("No results found.")%></h3> <div id="speakerNotification-component"></div> <div class="layout-pane-sizer size_1"> <div class="lp-header"></div> <div class="lp-body"></div> </div> <div class="layout-pane-gutter-sizer"></div> </div> </article> </div> </script>  <script type="text/template" id="LayoutLinkView-template"> <li><a href='#/layout_id/all' class="layout-label"><%= this.t("(all cameras)") %></a></li> <% _.each(collection, function(item) { %> <li><a href='#/layout_id/<%= item.layout_id %>' class="layout-label" title="<%- item.layout_name %>"><%- item.layout_name %></a></li> <% }); %> </script>   <script type="text/ractive" id="layoutOptions-template"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" on-click="@this.cancelNewLayout()">×</button> <h3>{{translateText('Add New Layout')}}</h3> </div> <div class="modal-body"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a href="#layout-options-settings-tab" data-toggle="tab" data-testid="modal-add-new-layout-tab-toggle-settings" > {{translateText('Settings')}} </a> </li> <li> <a href="#layout-options-cameras-tab" data-toggle="tab" data-testid="modal-add-new-layout-tab-toggle-add-cameras" > {{translateText('Add Cameras')}} </a> </li> </ul> <div class="tab-content row-fluid"> <div class="tab-pane active" id="layout-options-settings-tab"> <form class="form-horizontal"> {{#layout_data}}{{#with layout_data.configuration.settings as config}} <div class="control-group"> <label class="control-label">{{translateText('Name')}}:</label> <div class="controls"> <input type="text" class="span8" maxlength="60" placeholder="{{translateText('New Layout')}}" required value="{{name}}"> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Camera Aspect Ratio')}}:</label> <div class="controls"> <select class="span4" value={{config.camera_aspect_ratio}}> {{#aspect_ratios}} <option value="{{value}}">{{label}}</option> {{/aspect_ratios}} </select> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Max Cameras Per Row')}}:</label> <div class="controls"> <select class="span4" value="{{config.camera_row_limit}}"> {{#row_limits}} <option value="{{value}}">{{label}}</option> {{/row_limits}} </select> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Show Camera Title Bars')}}:</label> <div class="controls"> <input type="checkbox" checked="{{config.camera_name}}"> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Show Camera Pane Borders')}}:</label> <div class="controls"> <input type="checkbox" checked="{{config.camera_border}}"> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Custom ID')}}:</label> <div class="controls"> <input type="text" class="span8" maxlength="5" placeholder="custom-id" value="{{config.custom_id}}"> </div> </div> {{/with}}{{/layout_data}} </form> </div> <div class="tab-pane" id="layout-options-cameras-tab"> <NewAddCameras camera_list="{{isolated_camera_list}}" selected_cameras="{{selected_cameras}}" hidden_cameras="{{hide_existing_cameras}}"> </NewAddCameras> </div> </div> </div> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button type="button" class="btn btn-warning" on-click="@this.cancelNewLayout()" data-testid="modal-add-new-layout-footer-button-cancel" > {{translateText('Cancel')}} </button> <button type="button" class="btn btn-success" on-click="@this.saveLayout()" data-testid="modal-add-new-layout-footer-button-save" > {{translateText('Save Changes')}} </button> </div> </div> </script>   <script type="text/template" id="layoutSettingsModal-template"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="layout_name"><%= this.t('Name') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span8" maxlength="60" id="layout_name" placeholder="<%= this.t('Layout Name') %>" required value="<%- layout_name %>"> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="layoutSettingCameraAspectRatio"><%= this.t('Camera Aspect Ratio') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <select class="span4" id="layoutSettingCameraAspectRatio"> <option value="0.5625">16x9</option> <option value="0.75">4x3</option> </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="layoutSettingCameraRowLimit"><%= this.t('Max Cameras Per Row') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <select class="span4" id="layoutSettingCameraRowLimit"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="layoutSettingShowCameraName"><%= this.t('Show Camera Title Bars') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <input type="checkbox" name="optionsRadios" id="layoutSettingShowCameraName" value="option1"> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="layoutSettingShowBorder"><%= this.t('Show Camera Pane Borders') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <input type="checkbox" name="optionsRadios" id="layoutSettingShowBorder" value="option1"> </div> </div> </div> </div> <div class="control-group"> <label class="control-label" for="custom_layout_id"><%= this.t('Custom ID') %>:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span8" maxlength="5" id="custom_layout_id" placeholder="<%= this.t('Custom ID') %>"> </div> </div> </div> </div> </form> </script>   <script type="text/template" id="LayoutView-template"> <div class="lp-wrapper"> <div class="lp-loading-wrapper hidden"> <div class="lp-loading-background"></div> <div class="lp-loading-text"> <span class='loading'><img src="/_images/spinning.gif" /> <%=this.t('Loading Viewport')%>...</span> <span class='deleted hidden'><%=this.t('Viewport Deleted')%></span> <span class='unavailable hidden'><%=this.t('No Viewport available')%></span> </div> </div> <% var device_id = this.model.get('deviceID') %> <div class="lp-header"> <div class="lp-time date_<%= device_id %>"><span></span></div> <div class="lp-name"><span><%- this.generateTitle() %></span></div> <div class="lp-control"> <span> <i class="icon-flag red img_motion_notification_<%= device_id %>" style="display:none" title="<%=this.t('motion alert notification')%>"></i> <i class="icon-circle green <%=(this.model.get('is_status_video') && this.model.get('is_status_online') ? '' : 'hidden')%> img_recording_<%= device_id %>" title="<%=this.t('video recording')%>"></i> <a href="#" class="lp-lock-pane" title="<%=this.t('lock pane in top')%>"><i class="icon-lock"></i></a> <% if(userList.getCurrentUser().checkDeviceRecordedVideo(this.model) && !this.model.isLiveViewOnly()) { %> <a href="#" class="lp-history" title="<%=this.t('history')%>"><i class="icon-time"></i></a> <% } %> <% var epoch = (new Date()).valueOf(); %> <span class="lp-dropdown"> <a href="#" id="drop<%= device_id %>_<%=epoch%>" role="button" class="dropdown-toggle drop<%= device_id %>" data-toggle="dropdown" title="<%=this.t('actions')%>"> <i class="icon-chevron-down"></i> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop<%= device_id %>_<%=epoch%>"> <% if(userList.getCurrentUser().checkDeviceUpdate(this.model)) { %> <li><a tabindex="-1" href="#" class="lp-settings"><%= this.t('Camera Settings') %></a></li> <% } %> <li class="hidden"><a tabindex="-1" href="#" class="lp-save_image" data-esn="<%= device_id %>"><%= this.t('Save Image') %></a></li> <% if(userList.getCurrentUser().checkShowCameraMetrics(this.model) && !this.model.isCloudCamera()) { %> <li><a tabindex="-1" href="#" class="lp-analytics"><%= this.t('Analytics') %></a></li> <% } %>  <% if(!this.model.isMCACamera() && userList.getCurrentUser().checkDeviceRecordedVideo(this.model)) { %> <li><a tabindex="-1" href="#" class="lp-viewer"><%= this.t('Search') %></a></li> <% } %> <% if(userList.getCurrentUser().checkDeviceVPNByID(device_id) && !this.model.isCloudCamera() && !this.model.deviceParent && !this.model.isAnalog()) { %> <li><a tabindex="-1" href="#" class="lp-open-vpn"><%= this.t('Open VPN to camera') %></a></li> <% } %>  <% if(this.options.show_remove_from_location_item && userList.getCurrentUser().checkEditLocationGroup()) { %> <li><a tabindex="-1" href="#" class="lp-delete-from-location"><%= this.t('Remove camera from location') %></a></li> <% } %> </ul> </span> <i class="icon-remove red big-icon remove-camera-from-layout"></i> </span> </div> </div> <div class="lp-body preview-container-<%= device_id %>" data-esn="<%= device_id %>"> <div class="lp-relative-wrapper <%= this.getForceStretchClass() %>"> <canvas class="layout-canvas <%= this.getLoadingClass() %>"></canvas> <div class="lp-motion-boxes motion_boxes_<%= device_id %>"></div> <div class="lp-analytic-boxes analytic_boxes_<%= device_id %>"></div> </div> <div class="lp-help"><%= this.t('Click to change size. Click + drag to move.') %></div> <div class="lp-status img_holder_<%= device_id %> <%= this.getImageHolderClass() %>"> <%= this.getStatusText() %> </div> <div class="annotation-overlay"> <div class="ns-overlay counting"></div> <div class="ns-overlay linecross"></div> <div class="ns-overlay intrusion"></div> <div class="ns-overlay loitering"></div> <div class="ns-overlay tampering"></div> </div> <div class="zoom-control-overlay zoom-control-layout-view"></div> <div class="talkdown-control-overlay"></div> <div class="io-control-overlay io-control-layout-view"></div> <a class="smart-layout-thumbnail hidden"> <img src=""/> </a> </div> </div> </script>   <script type="text/ractive" id="LineCrossEditor-template"> <div class="analytics-object-settings"> <div class="analytics-object-title"> <h5> {{translateText('Object Detection Settings')}} </h5> <button type="button" on-click="editSize" title="{{translateText('Applies across all analytics')}}"> <i class="icon-pencil"></i> </button> </div> {{#if @shared._object.edit_active}} <div class="analytics-object-settings-detail"> <div class="analytics-object-sensitivity"> {{translateText('Sensitivity')}}: <Slider class="analytics-sensitivity-slider" type="analytics" roiid="loitering" slider_sensitivity="{{@shared.object.sensitivity}}" min="0" max="100" step="1"></Slider> <i class="{{#if @shared._object.not_default}}icon-undo{{/if}} gray" on-click="resetSensitivity" title="{{translateText('Restore to default')}}"></i> </div> <div class="analytics-object-size" on-click="setInnerActive"> <span>{{translateText('Min Size')}}:</span> <input type="text" class="analytics-object-setting-min {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.minw)}}% x {{getPercentValue(@shared.object.objectsize.minh)}}%" disabled> <button type="button" class="object-size-inner {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> <div class="analytics-object-size" on-click="setOuterActive"> <span>{{translateText('Max Size')}}:</span> <input type="text" class="analytics-object-setting-max {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.maxw)}}% x {{getPercentValue(@shared.object.objectsize.maxh)}}%" disabled> <button type="button" class="object-size-outer {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> </div> {{/if}} </div> <div class="row-fluid" style="margin-bottom: 10px"> <div class="roi-container"> </div> {{#if current_annt}} <div class="arrow-container" title="{{translateText('Set crossing direction')}}"> <i class="icon-circle-arrow-left {{checkCurrVector('left')}}" on-click="vectorChange" data-dir="left"></i> <i class="icon-circle-arrow-right {{checkCurrVector('right')}}" on-click="vectorChange" data-dir="right"></i> <i class="icon-circle-arrow-up {{checkCurrVector('up')}}" on-click="vectorChange" data-dir="up"></i> <i class="icon-circle-arrow-down {{checkCurrVector('down')}}" on-click="vectorChange" data-dir="down"></i> </div> {{/if}} </div> <div class="row-fluid"> <div class="row-fluid span12"> <div class="span2"> <h5>{{title}}</h5> </div> <div class="span10"> <i class="icon-plus-sign add-icon pull-right {{lines.length > 0 ? 'add-disabled' : ''}}" style="margin-right: 16px;" on-click="createNewLine" title="{{lines.length < 1 ? translateText('New line') : translateText('Only one line allowed')}}."></i> </div> </div> <div class="row-fluid" style="width:98%"> <table class="table table-condensed table-bordered table-striped analytics-table" id="csAnalytics-line-table"> <thead> <tr> <th style="width:8%">{{translateText('Order')}}</th> <th style="width:60%">{{translateText('Name')}}</th> <th style="width:10%">{{translateText('Direction')}}</th> <th style="width:22%">{{translateText('Actions')}}</th> </tr> </thead> <tbody id="csAnalytics_line_TableBody"> {{#each lines:index}} <tr class="camera_settings_line_row {{isEditActive(this) ? 'motion-selected-region' : ''}} {{isAlertEditActive(this)}}" id="{{id}}" data-color="{{color}}" data-id={{this.id}}> <td on-click="editLine" class="pad-text line-order" style="color: white; background-color: {{color}};">{{translateText("" + (index + 1))}}</td> <td on-click="editLine" class="csAnalytics_line_name"> <input type="text" class="analytic-region-name" value="{{this.name}}"> </td> <td on-click="editLine" class="csAnalytics_line_vector"> <span class="vector-span {{isEditActive(this) ? 'line-edit-active' : ''}}" title="{{translateText('Click to rotate clockwise 90 degrees')}}" on-click="rotateVector" data-id="{{id}}"> <i class="icon-circle-arrow-{{this.vector}}"></i> </span> </td> <td> <button type="button" class="edit-analytics-line csAnalytics-edit-btn" data-id="{{id}}" on-click="editLine"> <i class="icon-pencil"></i> </button> {{#if allow_alerts && !model.get("deviceShare")}} <button type="button" class="edit-alerts" data-id="{{id}}" on-click="editAlert"> <i class="icon-bell-alt {{isAlertSet(this) ? 'green' : ''}}"></i> </button> {{/if}} <button type="button" data-id="{{id}}" class="remove-analytics-line csAnalytics-edit-btn" on-click="deleteLine"> <i class="icon-trash"></i> </button> </td> </tr> {{#if isEditAlertActive(this.id)}} <AnalyticAlertEditor colspan="6" payload="{{alert_payload}}" who="{{this.who}}" roiid="{{id}}" counting="{{line_type === 'crossing'}}" alert_on_in="{{!is_wrong_way}}" alert_on_out="{{is_wrong_way}}" in_vector="{{this.vector}}" out_vector="{{getOutVector(this.vector)}}" when="{{this.when ? this.when : '*'}}" throttle_type="{{this.throttle_type ? this.throttle_type : 2}}" account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{this.throttle_hour_limit ? this.throttle_hour_limit : 5}}" users="{{getUserList()}}" mode="{{this.mode ? this.mode : ['all']}}" level="{{this.level ? this.level : 1}}" smart_alerts_source_alert="linecross" > </AnalyticAlertEditor> {{/if}} {{/each}} </tbody> </table> </div> </div> {{#if @shared.ignoremask_warning }} <hr> <p class="from-motion-warning">{{translateText('Zero sensitivity motion regions are applied to the analytics.')}}</p> {{/if}} <p style="color: red;">{{error_text}}</p> </script>    <script type="text/ractive" id="LoiteringRegionEditor-template"> <div class="analytics-object-settings"> <div class="analytics-object-title"> <h5> {{translateText('Object Detection Settings')}} </h5> <button type="button" on-click="editSize" title="{{translateText('Applies across all analytics')}}"> <i class="icon-pencil"></i> </button> </div> {{#if @shared._object.edit_active}} <div class="analytics-object-settings-detail"> <div class="analytics-object-sensitivity"> {{translateText('Sensitivity')}}: <Slider class="analytics-sensitivity-slider" type="analytics" roiid="loitering" slider_sensitivity="{{@shared.object.sensitivity}}" min="0" max="100" step="1"></Slider> <i class="{{#if @shared._object.not_default}}icon-undo{{/if}} gray" on-click="resetSensitivity" title="{{translateText('Restore to default')}}"></i> </div> <div class="analytics-object-size" on-click="setInnerActive"> <span>{{translateText('Min Size')}}:</span> <input type="text" class="analytics-object-setting-min {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.minw)}}% x {{getPercentValue(@shared.object.objectsize.minh)}}%" disabled> <button type="button" class="object-size-inner {{#if @shared._object.edit_active_inner}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> <div class="analytics-object-size" on-click="setOuterActive"> <span>{{translateText('Max Size')}}:</span> <input type="text" class="analytics-object-setting-max {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}" value="{{getPercentValue(@shared.object.objectsize.maxw)}}% x {{getPercentValue(@shared.object.objectsize.maxh)}}%" disabled> <button type="button" class="object-size-outer {{#if @shared._object.edit_active_outer}}active{{/if}}" title="{{translateText('Edit')}}"> <i class="icon-resize-full"></i> </button> </div> </div> {{/if}} </div> <div class="row-fluid"> <div class="roi-container"> </div> </div> <div class="row-fluid"> <div class="row-fluid span12"> <div class="span2"> <h5>{{title}}</h5> </div> <div class="span10"> <i class="icon-plus-sign add-icon pull-right" style="margin-right: 16px;" on-click="createNewPoly" title="{{translateText('Add region')}}."></i> </div> </div> <div class="row-fluid" style="width:98%"> <table class="table table-condensed table-bordered table-striped analytics-table"> <thead> <tr> <th style="width:8%">{{translateText('Order')}}</th> <th style="width:40%">{{translateText('Name')}}</th> <th style="width:30%">{{translateText('Dwell Time')}}</th> <th style="width:22%">{{translateText('Actions')}}</th> </tr> </thead> <tbody> {{#each polys:index}} <tr data-id="{{id}}" class="camera_settings_line_row roi-options {{isEditActive(this) ? 'motion-selected-region' : ''}} {{isRowSizeEditActive(this)}}" id="{{name}}" data-color="{{color}}"> <td on-click="editPoly" class="pad-text line-order" style="color: white; background-color: {{color}};">{{translateText("" + (index + 1))}}</td> <td on-click="editPoly" class="csAnalytics_line_name"> <input class="analytic-region-name" type="text" value="{{this.name}}"> </td> <td on-click="editPoly"> <input on-change-click="['updateDwellTime', @keypath]" class="loitering-dwell-time-min" min="0" max="2" {{! Tim suggests maximum of two minutes - more than that, and the object is lost into the background. This behavior will be improved later. }} type="number" step="1" value="{{formatDwellTime(seconds, 'min')}}" twoway="false" /> min <input on-change-click="['updateDwellTime', @keypath]" class="loitering-dwell-time-sec" type="number" step="1" min="0" max="60" value="{{formatDwellTime(seconds, 'sec')}}" twoway="false" /> sec </td> <td> <button type="button" class="edit-analytics-line csAnalytics-edit-btn" data-id="{{id}}" on-click="editPoly"> <i class="icon-pencil"></i> </button> {{#if allow_alerts && !model.get("deviceShare")}} <button type="button" class="edit-alerts" data-id="{{id}}" on-click="editAlert"> <i class="icon-bell-alt {{isAlertSet(this) ? 'green' : ''}}"></i> </button> {{/if}} <button type="button" data-id="{{id}}" class="remove-analytics-line csAnalytics-edit-btn" on-click="deletePoly"> <i class="icon-trash"></i> </button> </td> </tr> {{#if isEditAlertActive(this.id)}} <AnalyticAlertEditor colspan="6" payload="{{alert_payload}}" roiid="{{id}}" who="{{this.who}}" when="{{this.when ? this.when : '*'}}" throttle_type="{{this.throttle_type ? this.throttle_type : 2}}" {{! THROTTLE TYPE VALUES: immediate = 1; after = 2; after quiet for = 3; TODO cea: fix magic numbers. }} account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{this.throttle_hour_limit ? this.throttle_hour_limit : 5}}" users="{{getUserList()}}" mode="{{this.mode ? this.mode : ['all']}}" level="{{this.level ? this.level : 1}}" smart_alerts_source_alert="loitering" > </AnalyticAlertEditor> {{/if}} {{/each}} </tbody> </table> </div> </div> {{#if @shared.ignoremask_warning }} <hr> <p class="from-motion-warning">{{translateText('Zero sensitivity motion regions are applied to the analytics.')}}</p> {{/if}} <p class="red">{{error_text}}</p> </script>   <script type="text/ractive" id="UncannyLPREditor-template"> <div class="analytics-object-title"> <h5> {{translateText('Open LPR Settings')}} </h5> <button type="button" on-click="openTunnelLpr" title="{{translateText('Open tunnel settings for lpr')}}"> <i class="icon-pencil"></i> </button> </div> <div class="row-fluid"> <div class="roi-container"> </div> </div> </script>   <script id="template-ManagedSwitchControls" type="text/ractive"> <div class="modal-header"> <button type="button" class="close" on-click="close" data-dismiss="modal" aria-hidden="true">×</button> <h3> {{translateText("Managed Switch Settings")}} // {{static_name}}{{#if debug}} ({{model.get('ip')}}){{/if}} </h3> </div> <div class="modal-body">  <span class="pull-right" on-click="openHelp" data_link="switch_settings_ports"> <i class="icon-question-sign een-help-link"></i> </span> <div class="row-fluid"> <label class="span1"> {{translateText("Name")}}: </label> <div class="span5"> <input class="switch-name" type="text" value="{{name}}"/> </div> </div> <div class="row-fluid"> <table class="span12"> <thead> <tr> <th style="width:10%">{{translateText("Port #")}}</th> <th style="width:17%">{{translateText("Power Status")}}</th> <th class="port-name-header" style="width:68%">{{translateText("Device (Bridge)")}}</th> <th style="width:5%">{{translateText("Power")}}</th> </tr> </thead> {{#each model.get('port_details')}} <tr> <td>{{index.split("_")[1]}}</td> <td title="{{getStatusTitle(enabled, power)}}"> <i class="icon-bolt" style="color: {{getStatusColor(enabled, power)}}"></i> </td> <td class="port-name" style="{{getNameStyle(this)}}"> {{getCameraName(this)}} {{#if ip}} ({{ip}}){{/if}} </td> <td title="{{translateText('Click to toggle power on or off')}}" class="toggle-port"> <label class="switch"> <input type="checkbox" checked="{{checkPortEnabled(this)}}"> <span class="switch-slider round" on-click="['togglePort', this]"></span> </label> </td> </tr> {{/each}} </table> </div> <div class="row-fluid buttons-all"> <button class="btn btn-success span4 offset2" title="{{translateText('Power cycle all ports')}}" on-click="restartAll"> {{translateText("Power Cycle All")}} </button> <button class="btn btn-info span4" title="{{translateText('Reboot the managed switch')}}" on-click="restartSwitch"> {{translateText("Reboot Switch")}} </button> </div> <div class="row-fluid switch-loading"> <p class="span6 offset2 green">{{message}}</p> </div> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button class="btn btn-warning" on-click="close">{{translateText("Cancel")}}</button> <button class="btn btn-success" on-click="save">{{translateText("Save")}}</button> </div> </script>   <script type="text/template" id="NotificationListItemView-template"> <tr data-id="<%=this.notif._key%>"> <% // TODO: clean up and move logic to view var details = this.notif.details; if(this.notif.class=='video_download') { var camera = cameraList.findByDeviceID(details.camera_id), camera_name = camera ? camera.get('deviceName') : '', notif_offline = camera && !camera.get('is_status_cloud_registered'), percent = !(notif_offline) ? Math.round(details.percent_complete) : (parseInt(details.percent_complete) < 100 ? 0 : 100), type_prefix = details.download_type ? utils.format_string(this.t('{{type}} Download'), {'type': this.t(details.download_type)}) : '', description = details.video_description, show_camera_name = details.video_description.indexOf(camera_name) === -1, offline_message = (notif_offline || debug.offline_notif) && parseInt(percent) < 100, out_of_retention_class = this.notif.out_of_retention ? 'disabled' : 'view-in-hist'; camera_name = camera && camera.get('deviceName') || '', start_timestamp_camera = camera && camera.getCameraTime(details.start_timestamp, false) || details.start_timestamp, end_timestamp_camera = camera && camera.getCameraTime(details.end_timestamp, false) || details.end_timestamp, start_time = deviceList.getDisplayTime(start_timestamp_camera, true, true), end_time = deviceList.getDisplayTime(end_timestamp_camera, true, true), start_date = start_timestamp_camera ? deviceList.getDisplayTime(start_timestamp_camera, false, true).split(' ')[0] : '', download_size_bytes=details['download_size_bytes'], duration = ''; if(details.start_timestamp && details.end_timestamp) { duration = deviceList.getDuration(details.start_timestamp, details.end_timestamp) } download_size = ''; if(download_size_bytes){ download_size = download_size_bytes / 1024, download_size_uom = 'KB'; if(download_size >= 1024){ var download_size = download_size_bytes / 1024 / 1024, download_size_uom = 'MB'; if(download_size >= 1024){ download_size = download_size_bytes / 1024 / 1024 / 1024, download_size_uom = 'GB'; } } download_size = Math.round10(download_size, -2) + ' ' + download_size_uom; } var DOWNLOAD_EXPIRE_DAYS = 7; var notification_request_date = new Date(utils._epoch_StrToDate(this.notif.timestamp) * 1000); var expiration_date = details.task_expire_timestamp ? // use expire timestamp provided by notification details, or calculate it based on download availability new Date(utils._epoch_StrToDate(details.task_expire_timestamp) * 1000) : new Date(notification_request_date.setDate(notification_request_date.getDate() + DOWNLOAD_EXPIRE_DAYS)); var expired = Boolean(expiration_date <= new Date()); var expiration_display_date = deviceList.getDisplayTime(expiration_date, false, true); } %> <td class="<%= expired ? 'red' : '' %>"><%= (expired ? utils.format_string(utils.t('Expired {{expiration_date}}'), {'expiration_date': expiration_display_date }) : utils.format_string(utils.t('Expires {{expiration_date}}'), {'expiration_date': expiration_display_date })) %></td> <td class="notification-details-column"> <div> <%=type_prefix%>: <%-description%> <%if (show_camera_name) {%> <%-camera_name%> <%}%> <%if (offline_message) {%> <%=this.t('(Cannot process internet offline...)')%> <%}%> </div> <div class="notification-download-link"> <a href="#" class="<%=out_of_retention_class%>" data-tsstart="<%=details.start_timestamp%>" data-tsend="<%=details.end_timestamp%>" data-id="<%=details.camera_id%>" title="<%=this.t('View selection in history')%>" <%if(camera){%>"disabled"<%}%>> <span><%=start_date%></span> <span><%=start_time%>—<%=end_time%> <%if (duration) {%> (<%=duration%>) <%}%></span></a> <%if (this.notif.out_of_retention) {%> <%=this.t('(out of retention period)')%> <%}%> <%=download_size%> </div> <% var notes = (details.notes && details.notes.length > 0 ? details.notes : ''); %> <div class="notification-notes <%=((!!notes)? '' : 'notification-notes-empty')%>"> <%=this.t("Notes")%>: <span class="notes-field <%=percent && percent >= 100 ? 'editable-notification' : 'disabled-notification'%>"><%-notes%><i class="icon-pencil"></i></span> <input style="display:none;" class="notes-input" type="text" placeholder="<%-notes%>"/> </div> <%if(utils.isDebugModeEnabled()) {%> <br /> <div class="disabled">Task ID: <%=this.notif._key%></div> <%}%> </td> <td> <% //We always show the buttons visible but determine if we grey them out //There are three places for buttons edit button, action button, hash button. //Edit button is always shown and allows you to edit notes //Action button is special and either download or re-fetch or spinner downloading //depending on task state //Hash button is enabled only when the download completes and we have a hash to show //Rules for Action Section: //If the download is still going we show the spinner in the action section //If the download is done and not expired we show the download button enabled in action section //If the download is expired and not out of retention we show the refetch button enabled in action section //If the download is expired and out of retention we show the download button disabled in action section //We only show the buttons if we are ready else the progress bar if (this.notif.progress === 'ready') { %>  <button class="btn notification-edit-button" title="<%=this.t('Add notes')%>" type="button"> <i class="icon-pencil"></i> </button>   <% var title = 'Download'; var disabled = ''; var iclass = 'icon-cloud-download' if (this.notif.progress !== 'ready') { disabled = 'disabled'; iclass = 'icon-spinner'; } else if (expired && !this.notif.out_of_retention) { title = 'Request Again'; iclass = 'icon-repeat'; } else if (expired && this.notif.out_of_retention) { disabled = 'disabled'; }%> <button title="<%=this.t(title)%>" type="button" data-notification_url="<%=details.download_url%>" data-notification_class="<%=this.notif.class%>" data-expired="<%=expired%>" data-key="<%=this.notif._key%>" class="notification-action btn" <%=disabled%>> <i class="<%=iclass%>"></i> </button>   <% var checksum = (!!details.checksum && details.checksum.length > 0 && details.checksum); %> <button title="<%=this.t('Copy MD5 Checksum to clipboard (proof that video has not been tampered with)')%>" class="checksum btn" data-sum="<%=checksum%>_sum" <%=((!!checksum)? '' : 'disabled' )%>> <i class="icon icon-check"></i> </button> <textarea id="<%=checksum%>_sum" class="checksum-exports"><%=checksum%></textarea>  <%}%>  <%if(!(notif_offline || debug.offline_notif || this.notif.out_of_retention) && percent !== null && percent !== undefined && percent >= 0 && percent < 100){%> <div class="notification-progress-container"> <div class="progress progress-striped"> <div class="bar" style="height: 15px; width: <%=percent%>%;"></div> </div> <div title="<%=this.t('Cancel download')%>" class="notification-delete-download text-dimmed" data-key="<%=this.notif._key%>"> <i class="icon icon-remove"></i> </div> </div> <%if(percent > 0) {%> <p><%=percent%>% <%=this.t('complete')%></p> <%}else{%> <p><%=this.t('Video download started')%> ...</p> <%}%> <%}else if(this.notif.out_of_retention && percent !== null && percent !== undefined && percent >= 0 && percent < 100){%> <%=this.t("Out of retention") %> <%}%>  <div class="red notification-cancel-error"></div> </td> </tr> </script>   <script type="text/template" id="NotificationView-template"> <% var self = this;%> <article class="row-fluid"> <div class="widget"> <header class="widget-title"><i class="icon-flag"></i> <%=this.t('Downloads')%></header> <div class="widget-content clearfix"> <div class="row"> <div class="red notifications-error" id="notifications__error"></div> </div> <table class="table table-striped"> <thead> <tr> <% if (userList.getCurrentUser().checkFeatureFlag('exports_v3')) { %> <th style="width:20%"><%=this.t('Download Availability')%></th> <th style="width:50%"><%=this.t('Details')%></th> <th style="width:15%; min-width: 125px;"><%=this.t('Action')%></th> <% } else { %> <th style="width:25%"><%=this.t('Download Availability')%></th> <th style="width:60%"><%=this.t('Details')%></th> <th style="width:15%; min-width: 125px;"><%=this.t('Action')%></th> <% } %> </tr> </thead> <tbody id='notifications__rows'> </tbody> </table> </div> </div> </article> </script>  <script type="text/template" id="NotificationWrapView-template"> <div class="container-fluid"> <div id="downloads-page"></div> </div> </script>  <script type="text/ractive" id="ObjectDimensionSlider-template"> <div class="row-fluid"> <div class="span12"> <div class="slider-widget csAnalytics_slider"></div> </div> </div> </script>   <script type="text/ractive" id="PageSize-template"> <div class="page-size"> <label for="devices-list--page-size-select" class="page-size-select--label pull-left">{{ translateText('Page size') }}:</label> <select id="devices-list--page-size-select" class="page-size-select pull-right" value="{{size}}" > <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> <option value="250">250</option> <option value="500">500</option> </select> </div> </script>   <script type="text/ractive" id="PaginationBarApi-template"> <div class="pull-right pagination-bar"> <span class="pag-num-text"> {{#if loading}} <img width="10px" src="/_images/spinning.gif" alt=""> {{else}} {{ pagbar_text }} {{/if}} </span> <div class="pull-right btn-group pagination-buttons"> <button class="btn-info btn btn-mini first-btn" on-click="@this.firstPage()" {{#if (no_items || is_first_page || loading)}}disabled{{/if}}> <i class=" icon-step-backward"></i> </button> <button class="btn btn-info btn-mini middle-btn" on-click="@this.previousPage()" {{#if (no_items || is_first_page || loading)}}disabled{{/if}}> <i class=" icon-chevron-left"></i> </button> <button class="btn btn-info btn-mini middle-btn" on-click="@this.nextPage()" {{#if (no_items|| is_last_page || loading)}}disabled{{/if}}> <i class=" icon-chevron-right"></i> </button> <button class="btn-info btn btn-mini last-btn" on-click="@this.lastPage()" {{#if (no_items || is_last_page || loading)}}disabled{{/if}}> <i class=" icon-step-forward"></i> </button> </div> </div> </script>   <script type="text/ractive" id="PaginationBar-template"> <div class="pull-right pagination-bar"> <div class="pull-right btn-group pagination-buttons"> <button class="btn-info btn btn-mini first-btn" on-click="@this.firstPage()" {{#if (quantity <= 0)}}disabled{{/if}}> <i class=" icon-step-backward"></i> </button> <button class="btn btn-info btn-mini middle-btn" on-click="@this.previousPage()" {{#if (quantity <= 0)}}disabled{{/if}}> <i class=" icon-chevron-left"></i> </button> <button class="btn btn-info btn-mini middle-btn" on-click="@this.nextPage()" {{#if (quantity <= 0)}}disabled{{/if}}> <i class=" icon-chevron-right"></i> </button> <button class="btn-info btn btn-mini last-btn" on-click="@this.lastPage()" {{#if (quantity <= 0)}}disabled{{/if}}> <i class=" icon-step-forward"></i> </button> </div> <p class="pag-num-text pull-right">{{ pagbar_text }}</p> </div> </script>   <script type="text/ractive" id="PreviewBubble-template"> <div class="preview-bubble"> <div class="close" on-click="close">×</div> <div class="preview-bubble-container"></div> </div> </script>   <script type="text/template" id="ReplaceBridgeView-template"> <span class="modal-heading-append"> // <%-model.get('deviceName')%></span> <div class="tab-pane active" id="editBridge__bridge"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for=""><%=utils.t('Replace Bridge:')%></label> <div class="controls"> <div class="row-fluid" style="margin-top:5px"> <%-model.get('deviceName')%> </div> </div> </div> <% if(replaceableBridges.length) { %> <div class="control-group"> <label class="control-label" for=""><%=utils.t('with Bridge:')%></label> <div class="controls"> <div class="row-fluid"> <select id="replaceBridge__new_bridge"> <% _.each(replaceableBridges, function(item) {%> <option value="<%=item.get('deviceGUID')%>"><%-item.get('deviceName')%></option> <%});%> </select> </div> </div> </div> <% } else { %> <h4 class="text-center"> No bridges to replace </h4> <% } %> </form> <div id="bridgeSwapMessage" class="red text-center"> <p><%=utils.t("Device Names cannot be the same for swapping feature")%></p> <p><%=utils.t("We suggest naming the new device 'Swap'")%></p> </div> </div> </script>  <script type="text/template" id="ResponderView-template"> <% cameraList.refreshResponderAccounts(); %> <% var responderList = cameraList.responderAccounts; var accounts = Object.keys(responderList).sort(); %> <% _.each(accounts, function(item) { %> <li><a href='#/layout_account/<%= encodeURIComponent(responderList[item]) %>' class='tag-label'><%- item %></a></li> <% }); %> </script>   <script type="text/ractive" id="ROIEditor-template"> <div id="editCamera__roi_management"> <div class="row-fluid"> <div class="roi-container"> <canvas id="editCamera__motion_image" width="640" height="360"></canvas> <canvas id="editCamera__motion_boxes" class="camera-rois" width="640" height="360"></canvas> </div> <span style="display:none"> <div class="span1"> <input type="checkbox" id="editCamera__motion_boxes_metric_active" value="1"/> </div> <div class="span10"> <label class="label-row" for="editCamera__motion_boxes_metric_active">{{ translateText('Show Motion Boxes (takes affect after Save)') }}</label> </div> </span> <input type="hidden" id="editCamera__motion_id"/> </div> <div class="row-fluid" id="editCamera__motion_regions"> <div class="row-fluid span12"> <div class="span2"> <h5>{{ translateText('Regions/Alerts') }}</h5> </div> <div class="span10"> <i class="icon-plus-sign add-icon pull-right" on-click="createNewRegion" title="{{translateText('Create new motion region.')}}" id="editCamera__new_motion_zone"> </i> </div> </div> <table class="table table-condensed table-bordered table-striped" id="editCamera__motion_zones"> <thead> <tr> <th class="roi-table-order-th">{{ translateText('Order') }}</th> <th class="roi-table-name-th">{{ translateText('Name') }}</th> <th class="roi-table-sensitivity-th">{{ translateText('Sensitivity') }}</th> <th class="roi-table-objectsize-th">{{ translateText('Object Size') }}</th> {{#if this.show_to_analytics_column }} <th class="roi-table-to-analytics-th">{{ translateText('To Analytics') }}</th> {{/if}} <th class="roi-table-actions-th">{{ translateText('Actions') }}</th> </tr> </thead> <tbody> {{#each model.get('motion')}} <tr on-click="editPoly" class="roi-options {{isEditActive(this) ? 'motion-selected-region' : ''}} {{isAlertEditActive(this)}}" data-roi_name="{{this.roi_name}}" data-roiid="{{this.roiid}}" data-name="{{this.name}}" data-ignore_motion="{{this.ignore_motion}}" data-when="{{this.when}}" data-who="{{this.who}}" data-level="{{this.level}}" data-throttle_type="{{this.throttle_type}}" data-throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 0}}" data-throttle_hour_limit="{{this.throttle_hour_limit}}" data-mode="{{this.mode}}" data-sensitivity="{{this.sensitivity}}" data-alert_name="{{this.alert_name}}" data-schedule_name="{{this.schedule_name}}" data-alert_id="{{this.alert_id}}" data-roi="{{this.roi}}" data-priority="{{this.priority}}" data-motion_threshold="{{this.motion_threshold}}" data-color="{{this.color}}" data-is_sensitivity_override="{{this.is_sensitivity_override}}"> <td class="roi-table-order-td" style="background-color:#{{this.color}}"> <i class="icon-arrow-up" on-click="priorityUp"></i> <i class="icon-arrow-down" on-click="priorityDown"></i> <span class="priority">{{this.priority_text}}</span> </td> <td class="roi-table-name-td"> <input class="roi-name analytic-region-name" on-click="ignoreClick" twoway='false' value="{{this.name}}" type="text" /> </td> <td class="slider-cell-roiid roi-table-sensitivity-td"> <Slider class="roi-sensitivity" min="0" max="100" type="motion" on-change="@this.sliderChange()" slider_sensitivity="{{Math.trunc(this.sensitivity * 100)}}" step="1"></Slider> </td> <td class="roi-table-objectsize-td"> <select class="motion-threshold {{isEditActive(this) ? '' : 'disabled-field'}}" on-click="ignoreClick" twoway='false' value="{{this.motion_threshold}}" disabled="{{isEditActive(this) ? '' : 'disabled'}}"> <option value="0.001">{{ translateText('Small') }}</option> <option value="0.01">{{ translateText('Medium') }}</option> <option value="0.1">{{ translateText('Large') }}</option> </select> </td> {{#if ../../show_to_analytics_column }} <td class="roi-table-to-analytics-td"> <input title="{{ translateText('Apply 0 sensitivity motion region to analytics to disable analytic event triggering') }}" data-toggle="tooltip" type="checkbox" class="motion-to-analytics" checked="{{this.ignoremask_in_analytics}}" {{#if this.sensitivity > 0}}disabled{{/if}} /> </td> {{/if}} <td class="roi-table-actions-td"> {{#if !model.get("deviceShare")}} <button on-click="editAlert" class="edit-alerts"><i class="icon-bell-alt {{isAlertSet(this) ? 'green' : ''}}"></i></button> {{/if}} <button on-click="removeRegion" class="remove-motion-zone"><i class="icon-trash"></i></button> </td> </tr> {{#if isEditAlertActive(this)}} <AlertEditor colspan="6" twoway="false" roiid="{{this.roiid}}" roi_name="{{this.roi_name}}" who="{{this.who}}" when="{{this.when ? this.when : '*'}}" throttle_type="{{this.throttle_type ? this.throttle_type : 2}}" {{! THROTTLE TYPES: immediately = 1; after = 2; after quiet for: 3; TODO cea: clean up magic numbers in refactor}} account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{this.throttle_hour_limit}}" users="{{getUserList()}}" mode="{{this.mode ? this.mode : ['all']}}" level="{{this.level ? this.level : 1}}" smart_alerts_source_alert="motion" > </AlertEditor> {{/if}} {{/each}} </tbody> </table> </div> <p class="red">{{error_text}}</p> </div> </script>   <script type="text/template" id="SearchView-template"> <form class="form-horizontal"> <%var curr_user = userList.getCurrentUser();%> <div class="row-fluid"> <label class="span2 search_field_label" for="recording_key"> <%if( curr_user.isTonyGroup() ){%> <%=this.t('Deal Number')%>: <%}else{%> <%=this.t('Contract #')%>: <%}%> </label> <div class="span2"> <input type="text" id="recording_key" name="recording_key"/> </div> </div> <%if( curr_user.isTonyGroup() ){%> <div class="row-fluid"> <label class="span2 search_field_label" for="stock_number"> <%=this.t('Stock Number')%>: </label> <div class="span2"> <input type="text" id="stock_number" name="stock_number"/> </div> </div> <%}%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=(curr_user.isDiamond() ? this.t('Sales Center') : this.t('Room Name'))%>:</div> <div class="span2"> <input type="text" id="layout_name" name="layout_name"/> </div> </div> <%if(curr_user.isDiamond()){%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('QAO Name')%>: </div> <div class="span2"> <input type="text" id="manager_last_name" placeholder="<%=this.t('Last Name')%>" name="manager_last_name"/> </div> </div> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('Customer Name')%>: </div> <div class="span2"> <input type="text" id="customer_last_name" placeholder="<%=this.t('Last Name')%>" name="customer_last_name"/> </div> </div> <%}else{%> <%if(!curr_user.isTonyGroup()){%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%if( curr_user.isIberostar() || curr_user.isHolidaysLounge() || curr_user.isElCid() ){%> <%=this.t('VLO Name')%>: <%}else{%> <%=this.t('Agent Name')%>: <%}%> </div> <div class="span2"> <input type="text" id="agent_first_name" placeholder="<%=this.t('First Name')%>" name="agent_first_name"/> </div> <div class="span2 offset1"> <input type="text" id="agent_last_name" placeholder="<%=this.t('Last Name')%>" name="agent_last_name"/> </div> </div> <%}%> <%if(curr_user.isCRNotWyndham()){%> <%if(!(curr_user.isIberostar() || curr_user.isElCid() || curr_user.isTonyGroup())){%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('Manager Name')%>: </div> <div class="span2"> <input type="text" id="manager_first_name" placeholder="<%=this.t('First Name')%>" name="manager_first_name"/> </div> <div class="span2 offset1"> <input type="text" id="manager_last_name" placeholder="<%=this.t('Last Name')%>" name="manager_last_name"/> </div> </div> <%}%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%if (curr_user.isIberostar() || curr_user.isElCid()) {%> <%=this.t('Member Name')%>: <%} else if (curr_user.isHolidaysLounge()) {%> <%=this.t('Owner Name')%>: <%}else{%> <%=this.t('Customer Name')%>: <%}%> </div> <div class="span2"> <input type="text" id="customer_first_name" placeholder="<%=this.t('First Name')%>" name="customer_first_name"/> </div> <div class="span2 offset1"> <input type="text" id="customer_last_name" placeholder="<%=this.t('Last Name')%>" name="customer_last_name"/> </div> </div> <%if(curr_user.isHolidaysLounge()){%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('Second Owner Name')%>: </div> <div class="span2"> <input type="text" id="second_customer_first_name" placeholder="<%=this.t('First Name')%>" name="second_customer_first_name"/> </div> <div class="span2 offset1"> <input type="text" id="second_customer_last_name" placeholder="<%=this.t('Last Name')%>" name="second_customer_last_name"/> </div> </div> <%}%> <%}%> <%}%> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('Start Time')%>:</div> <div class="span2"> <input type="text" id="search_start_date" class="datepicker"> </div> <div class="input-append bootstrap-timepicker span2 <%=curr_user.isDiamond() ? '' : 'offset1'%>"> <input id="search_start_time" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> <div class="row-fluid" style="margin-bottom: 5px;"> <div class="span2 search_field_label"> <%=this.t('Stop Time')%>:</div> <div class="span2"> <input type="text" id="search_stop_date" class="datepicker"> </div> <div class="input-append span2 bootstrap-timepicker <%=curr_user.isDiamond() ? '' : 'offset1'%>"> <input id="search_stop_time" type="text" maxlength="60" class="input-small"> <span class="add-on"><i class="icon-time"></i></span> </div> </div> <div class="row-fluid"> <div class="span2"> <button class="btn btn-success pull-right" style="width:110px;" id="go_search"><%=this.t('Search')%></button> </div> </div> </div> <div class="row-fluid" id="messages" style="display:none"> <div class="span8"> <p id="success"></p> <p id="error"></p> </div> </div> </form> <%if(recordings!=null){%> <div class="row-fluid"> <div class="span12" id="results"> <%if(recordings.length===0){%> <%=this.t('No results found.')%> <%}else{%> <table class="table table-striped"> <thead> <tr> <%if(curr_user.isCRNotWyndham()){%> <%if(curr_user.isDiamond()){%> <th style="width:30%"><%=this.t('Cameras')%></th> <th style="width:10%"><%=this.t('Contract #')%></th> <th style="width:10%"><%=this.t('Sales Center')%></th> <th style="width:10%"><%=this.t('Customer Name')%></th> <th style="width:10%"><%=this.t('QAO Name')%></th> <th style="width:10%"><%=this.t('Length')%></th> <th style="width:10%"><%=this.t('Date')%></th> <%}else if (curr_user.isHolidaysLounge() ) {%> <th style="width:20%"><%=this.t('Cameras')%></th> <th style="width:10%"><%=this.t('Contract #')%></th> <th style="width:10%"><%=this.t('Room')%></th> <th style="width:10%"><%=this.t('VLO Name')%></th> <th style="width:10%"><%=this.t('Owner Name')%></th> <th style="width:10%"><%=this.t('Second Owner Name')%></th> <th style="width:10%"><%=this.t('Manager Name')%></th> <th style="width:10%"><%=this.t('Length')%></th> <th style="width:10%"><%=this.t('Date')%></th> <%}else if (curr_user.isTonyGroup() ) {%> <th style="width:15%"><%=this.t('Cameras')%></th> <th style="width:10%"><%=this.t('Deal Number')%></th> <th style="width:10%"><%=this.t('Stock Number')%></th> <th style="width:15%"><%=this.t('Room')%></th> <th style="width:25%"><%=this.t('Length')%></th> <th style="width:25%"><%=this.t('Date')%></th> <%}else{%> <th style="width:20%"><%=this.t('Cameras')%></th> <th style="width:10%"><%=this.t('Contract #')%></th> <th style="width:10%"><%=this.t('Room')%></th> <th style="width:10%"><%=this.t('Agent Name')%></th> <th style="width:10%"><%=this.t('Customer Name')%></th> <th style="width:10%"><%=this.t('Second Customer Name')%></th> <th style="width:10%"><%=this.t('Manager Name')%></th> <th style="width:10%"><%=this.t('Length')%></th> <th style="width:10%"><%=this.t('Date')%></th> <%}%> <%}else{%> <th style="width:20%"><%=this.t('Cameras')%></th> <th style="width:10%"><%=this.t('Contract #')%></th> <%if(curr_user.isWyndham()){%> <th style="width:15%"><%=this.t('Service Entity')%></th> <th style="width:15%"><%=this.t('Room')%></th> <%}else{%> <th style="width:30%"><%=this.t('Room')%></th> <%}%> <th style="width:25%"><%=this.t('Length')%></th> <th style="width:25%"><%=this.t('Date')%></th> <%}%> </tr> </thead> <tbody> <%var i=0, self=this;%> <% _.each(recordings, function(item) { %> <% var rowClass=++i%2===0?'-alt':'', cameras = [], time = '', duration='0s', layout = _.escape(item.layout_id && layoutLinkList.findByLayoutID(item.layout_id) && layoutLinkList.findByLayoutID(item.layout_id).get('layout_name') || item.layout_name || 'Room');%> <% _.each(item.camera_ids, function(cam) { %> <%var camera = cameraList.findByDeviceID(cam); duration=item.stop_timestamp && (item.no_video_reason ? deviceList.getDuration(item.start_timestamp, item.stop_timestamp) + " (" + item.no_video_reason + ")": deviceList.getDuration(item.start_timestamp, item.stop_timestamp)) || (deviceList.getDuration(item.start_timestamp) + '<br/>' + self.t('currently recording')); if(camera){%> <%time=camera.getCameraTime(item.start_timestamp, true)%> <%cameras.push(camera)%> <%}else{%> <%time=deviceList.getDisplayTime(item.start_timestamp, false, true)%> <%}%> <% }); %> <%var camera_id = cameras.length < 1 ? item.camera_ids[0] : cameras[0].get('deviceID');%> <tr> <td> <%if(item.uuid){%> <%var downloadUrl = [ 'https://', window.location.host, '/file/file?id=', camera_id, '&st=', item.start_timestamp, '&ts=', item.start_timestamp, '&u=', item.uuid, '&disposition=attachment' ].join('');%> <a href="<%=downloadUrl%>" target="_blank">Click to download video</a> <%if(item.camera_type && item.camera_type === "mobile_camera"){%> <%=self.t("(mobile device)")%> <%}%> <%}else if(item.is_video !== false){%> <%_.each(cameras, function(camera){%> <%var imgUrl = [ 'https://' + window.location.host + '/asset/after/image.jpeg?' + 'id=' + camera_id, 'timestamp=' + item.start_timestamp, 'q=low', 'asset_class=thumb' ].join('&');%> <img src="<%=imgUrl%>" loading="lazy" class="search-camera" data-id="<%=camera.get('deviceID')%>" data-ts="<%=(utils._epoch_StrToDate(item.start_timestamp)*1000)%>"/> <% }); %> <%}else{%> <%for(var i = 0; i < cameras.length; i++){%> <%- cameras[i].get("deviceName") + (i===cameras.length - 1 ? " " : " , ")%> <%} %> <%}%> </td> <td><%-item.recording_key%></td> <%if( curr_user.isTonyGroup() ){%> <td><%-item.stock_number || '-'%></td> <%}%> <%if(curr_user.isWyndham()){%> <td><%-item.service_entity ||self.t("none")%></td> <%}%> <td><%=layout%></td> <%if(!curr_user.isTonyGroup()){%> <%if(curr_user.isCRNotWyndham()){%> <%if(curr_user.isDiamond()){%> <td><%-item.customer_last_name ? item.customer_last_name : self.t("none")%></td> <td><%-item.manager_last_name ? item.manager_last_name : self.t("none")%></td> <%}else{%> <td><%-item.agent_first_name ? item.agent_first_name + " " + item.agent_last_name : self.t("none")%></td> <td><%-item.customer_first_name ? item.customer_first_name + " " + item.customer_last_name : self.t("none")%></td> <td><%-item.second_customer_first_name ? item.second_customer_first_name + " " + item.second_customer_last_name : self.t("none")%></td> <td><%-item.manager_first_name ? item.manager_first_name + " " + item.manager_last_name : self.t("none")%></td> <%}%> <%}%> <%}%> <td><%=duration%></td> <td><%=time%></td> </tr> <% }); %> </tbody> </table> <% } %> </div> </div> <% } %> </script>  <script type="text/template" id="SearchWrapView-template"> <div class="container-fluid"> <article class="row-fluid"> <div class="widget"> <header class="widget-title"><i class="icon-search"></i> Search</header> <div class="widget-content clearfix" id="search"> </div> </div> </article> </div> </script>  <script type="text/ractive" id="PasswordManagement-template"> <form class="form-horizontal modal-form-centered"> <div class="control-group"> <label class="control-label">{{translateText('Minimum length')}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <input type="number" class="span11" min="{{allowed_minimum_length}}" max="{{allowed_maximum_length}}" value="{{minimum_length}}"/> {{#if minimum_length_not_default}} <i on-click='restore_default' id="minimum_length__restore_icon" class="een-custom icon-undo gray" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Numeric character required')}}:</label> <div class="controls"> <input type="checkbox" checked="{{required_numeric_char}}"/> {{#if required_numeric_char_not_default}} <i on-click='restore_default' id="required_numeric_char__restore_icon" class="een-custom een-custom-checkbox icon-undo gray checkbox-restore-icon" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Special character required')}}:</label> <div class="controls"> <input type="checkbox" checked="{{required_special_char}}"/> {{#if required_special_char_not_default}} <i on-click='restore_default' id="required_special_char__restore_icon" class="een-custom een-custom-checkbox icon-undo gray checkbox-restore-icon" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Username cannot be part of the password')}}:</label> <div class="controls"> <input type="checkbox" checked="{{exclude_username}}"/> {{#if exclude_username_not_default}} <i on-click='restore_default' id="exclude_username__restore_icon" class="een-custom een-custom-checkbox icon-undo gray checkbox-restore-icon" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Password Expiration')}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <select class="span11" value="{{days_to_expire}}"> {{#each days_to_expire_options}} <option value="{{value}}">{{label}}</option> {{/each}} </select> {{#if days_to_expire_not_default}} <i on-click='restore_default' id="days_to_expire__restore_icon" class="een-custom icon-undo gray" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> </div> </div> <h5>{{translateText('Password Reuse Restrictions')}}</h5> <div class="control-group"> <label class="control-label" title="{{translateText('When the user creates a new password, restrict reuse of the same password for the selected period of time')}}"> {{translateText('Number of days')}}: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <select class="span11" value="{{reuse_time_limit}}"> {{#each reuse_time_limit_options}} <option value="{{value}}">{{label}}</option> {{/each}} </select> {{#if reuse_time_limit_not_default}} <i on-click='restore_default' id="reuse_time_limit__restore_icon" class="een-custom icon-undo gray" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> </div> </div> <div class="control-group"> <label class="control-label" title="{{translateText('When the user creates a new password, restrict reuse of the same password for the selected number of the previous passwords')}}"> {{translateText('Number of previous passwords')}}: </label> <div class="controls"> <div class="row-fluid"> <div class="span5"> <select class="span11" value="{{reuse_number_limit}}"> {{#each reuse_number_limit_options}} <option value="{{value}}">{{label}}</option> {{/each}} </select> {{#if reuse_number_limit_not_default}} <i on-click='restore_default' id="reuse_number_limit__restore_icon" class="een-custom icon-undo gray" title="{{translateText('Restore default value')}}"></i> {{/if}} </div> </div> </div> </div> </form> </script>   <script type="text/ractive" id="SelectScene-template"> <div class="control-group"> <label class="control-label" for="">{{translateText('Scene:')}}</label> <div class="controls"> <select class="form-input-auto-width" value="{{scene}}" {{#if is_mca}}disabled{{/if}}> {{#if is_mca}} <option value="body_worn">{{translateText('Body Worn')}}</option> {{else}} <option value="" disabled="disabled" selected="selected">{{translateText('Please select camera scene')}}</option> <optgroup label="{{translateText('Indoor')}}"> <option value="assembly_line">{{translateText('Assembly Line')}}</option> <option value="bank_teller_window">{{translateText('Bank Teller Window')}}</option> <option value="cash_register">{{translateText('Cash Register')}}</option> <option value="checkout_counter">{{translateText('Checkout Counter')}}</option> <option value="checkout_line">{{translateText('Checkout Line')}}</option> <option value="classroom">{{translateText('Classroom')}}</option> <option value="data_center">{{translateText('Data Center')}}</option> <option value="dining_area">{{translateText('Dining Area')}}</option> <option value="elevator">{{translateText('Elevator')}}</option> <option value="front_desk">{{translateText('Front Desk')}}</option> <option value="garage">{{translateText('Garage')}}</option> <option value="grocery_area">{{translateText('Grocery Area')}}</option> <option value="grocery_line">{{translateText('Grocery Line')}}</option> <option value="gym">{{translateText('Gym')}}</option> <option value="hallway">{{translateText('Hallway')}}</option> <option value="kitchen">{{translateText('Kitchen')}}</option> <option value="lobby">{{translateText('Lobby')}}</option> <option value="lobby_with_door">{{translateText('Lobby With Door')}}</option> <option value="machinery">{{translateText('Machinery')}}</option> <option value="meeting_room">{{translateText('Meeting Room')}}</option> <option value="office">{{translateText('Office')}}</option> <option value="office_cubicles">{{translateText('Office Cubicles')}}</option> <option value="overhead_entrance">{{translateText('Overhead Entrance')}}</option> <option value="parking_garage">{{translateText('Parking Garage')}}</option> <option value="retail_display">{{translateText('Retail Display')}}</option> <option value="storage">{{translateText('Storage')}}</option> <option value="storage_supply_room">{{translateText('Storage/Supply Room')}}</option> <option value="vault">{{translateText('Vault')}}</option> <option value="waiting_room">{{translateText('Waiting Room')}}</option> <option value="warehouse">{{translateText('Warehouse')}}</option> </optgroup> <optgroup label="{{translateText('Outdoor')}}"> <option value="building_entrance">{{translateText('Building Entrance')}}</option> <option value="drive_through">{{translateText('Drive Through')}}</option> <option value="driveway">{{translateText('Driveway')}}</option> <option value="emergency_exit">{{translateText('Emergency Exit')}}</option> <option value="fence">{{translateText('Fence')}}</option> <option value="field">{{translateText('Field')}}</option> <option value="freeway">{{translateText('Freeway')}}</option> <option value="gas_pump">{{translateText('Gas Pump')}}</option> <option value="industrial">{{translateText('Industrial')}}</option> <option value="industrial_yard">{{translateText('Industrial Yard')}}</option> <option value="intersection">{{translateText('Intersection')}}</option> <option value="office_front">{{translateText('Office Front')}}</option> <option value="park">{{translateText('Park')}}</option> <option value="park_playground">{{translateText('Park/Playground')}}</option> <option value="parking_entrance">{{translateText('Parking Entrance')}}</option> <option value="parking_lot">{{translateText('Parking Lot')}}</option> <option value="road">{{translateText('Road')}}</option> <option value="sidewalk">{{translateText('Sidewalk')}}</option> <option value="storefront">{{translateText('Storefront')}}</option> <option value="swimming_pool">{{translateText('Swimming Pool')}}</option> <option value="toll_booth">{{translateText('Toll Booth')}}</option> <option value="train_track">{{translateText('Train Track')}}</option> <option value="vehicle">{{translateText('Vehicle')}}</option> <option value="yard">{{translateText('Yard')}}</option> </optgroup> {{/if}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultCloudRetention-template"> <div class="control-group" title="{{translateText('Set default cloud retention for all new cameras added to your account.')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-cloud-retention" > {{translateText('Default Cloud Retention')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{user_value}}"> {{#each retention_options}} <option value="{{value}}">{{label}}</option> {{/each}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultMinLocalRetention-template"> <div class="control-group" title="{{translateText('Set default minimum on premise retention for all new cameras added to your account.')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-minimum-on-premise-retention" > {{translateText('Default Minimum On Premise Retention')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{user_value}}" on-change="['select', user_value]"> {{#each retention_options}} <option value="{{value}}" {{#if ((value >= max_value) && (max_value != 0))}}disabled{{/if}}>{{label}}</option> {{/each}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultMaxLocalRetention-template"> <div class="control-group" title="{{translateText('Set default maximum on premise retention for all new cameras added to your account.')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-maximum-on-premise-retention" > {{translateText('Default Maximum On Premise Retention')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{user_value}}" on-change="['select', user_value]"> {{#each retention_options}} <option value="{{value}}" {{#if ((value <= min_value) && (min_value != 0))}}disabled{{/if}}>{{label}}</option> {{/each}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultPreviewResolution-template"> <div class="control-group" title="{{translateText('Set default preview resolution for all new cameras added to your account.')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-preview-resolution" > {{translateText('Default Preview Resolution')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{user_value}}"> {{#each resolution_options}} <option value="{{this}}">{{this}}</option> {{/each}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultFullVideoResolution-template"> <div class="control-group" title="{{translateText('Set default full video resolution for all new cameras added to your account.')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-full-video-resolution" > {{translateText('Default Full Video Resolution')}}: </label> <div class="controls"> <select class="form-input-auto-width" value="{{user_value}}"> {{#each resolution_options}} <option value="{{value}}">{{label}}</option> {{/each}} </select> </div> </div> </script>   <script type="text/ractive" id="DefaultCloudPreviewOnly-template"> <div class="control-group" title="{{translateText('Default Cloud Preview Only (PR1)')}}"> <label class="control-label" data-testid="modal-account-tab-defaults-input-label-default-cloud-preview-only" > {{translateText('Default Cloud Preview Only (PR1)')}}: </label> <div class="controls"> <input type="checkbox" id="default-cloud-preview-only-checkbox" checked="{{user_value}}"/> </div> </div> </script>   <script type="text/ractive" id="DisableBillingChanges-template"> <div class="control-group" title="{{translateText('Disable billing changes for all new accounts.')}}"> <label class="control-label">{{translateText('Disable Billing Changes')}}:</label> <div class="controls"> <input type="checkbox" id="disable-billing-changes-checkbox" checked="{{user_value}}"/> </div> </div> </script>   <script type="text/ractive" id="TimeSelector-template"> <div class="input-append bootstrap-timepicker span10"> <input type="text" maxlength="60" class="span10 access_time_custom_from" as-timePicker="time"> <span class="add-on"><i class="icon-time"></i></span> </div> </script>   <script type="text/ractive" id="GenericSelect-template"> <select class="span12" value="{{value}}"> {{#if placeholder.is_visible}} <option value="" disabled {{#if placeholder.is_seleted}}selected{{/if}}> {{ translateText('Select') }} </option> {{/if}} {{#each getOptions()}} <option value="{{value}}">{{name}}</option> {{/each}} </select> </script>   <script type="text/ractive" id="DayTimeSelector-template"> <div class="row day-time-row"> <div class="span4"> <DaySelect options={{DAYS}} value={{time_set.day}}/> </div> <div class="span3"> <TimePicker time={{time_set.start_time}}/> </div> <div class="span3"> <TimePicker time={{time_set.end_time}}/> </div> {{#if time_set.idx !== 0}} <div class="span2"> <button class="btn btn-small btn-info" type="button" on-click="remove"> {{translateText('Remove')}} </button> </div> {{/if}} </div> </script>   <script type="text/ractive" id="MultipleDayTimeSelector-template"> <div class="day-time-selector"> <div class="row day-time-row"> <button class="btn btn-small btn-info" type="button" on-click="addPeriod"> {{translateText('Add Period')}} </button> </div> {{#each parsed_periods}} <DayTimeSelector time_set={{.}}/> {{/each}} </div> </script>   <script type="text/ractive" id="SharedCamerasComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-facetime-video"></i> {{translateText('Cameras Shared With Me')}} </header> <div class="widget-content"> <table class="table table-striped dashboard-widget-table"> <thead> <tr> <th scope="col" class="col-status" >{{translateText('Status')}}</th> <th scope="col" class="col-name">{{translateText('Name')}}</th> <th scope="col">{{translateText('Tags')}}</th> <th scope="col" class="col-location"> <span on-click="@this.set('show_location', false)" class="device-location-col {{#if !show_location}}device-location-col-selected{{/if}}"> {{translateText('Location')}} </span> / <span on-click="@this.set('show_location', true)" class="device-location-col {{#if show_location}}device-location-col-selected{{/if}}"> {{translateText('Address')}} </span> </th> <th scope="col" class="col-actions">{{translateText('Actions')}}</th> </tr> </thead> <tbody> {{#owners:owner}} <tr> <td colspan="6"> <i class="icon-user header-row-icon"></i> <strong>{{owner}}</strong> ({{translateFormatText('{{cam_count}} cameras', this.length, {'cam_count': this.length})}}) </td> </tr> {{#each this as camera}} {{#if camera.filter_display}} <tr> <td class="col-status"> <i class="{{status_class}}"></i> </td> <td>{{deviceName}}{{#if camera.deviceType === 'camera' && camera.deviceExtra && camera.deviceExtra.associated_speaker}}<i class="icon-volume icon-volume-device device-speaker-icon"></i>{{/if}}</td> <td> {{#each getCameraCustomTags(camera) as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span>  {{/each}} </td> <td> {{#if ../../../show_location}} {{ deviceLocation[4] }} {{! Location address}} {{else}} {{ deviceLocation[6] }} {{! Location name}} {{/if}} </td> <td> {{#with getCameraPermissions(camera) as permissions}} {{#if permissions.view_recorded_video && !camera.isLiveViewOnly()}} <button class="btn" on-click="@this.openHistory(camera)" title="{{translateText('view camera history')}}"><i class="icon-time"></i></button> {{/if}} <button class="btn" on-click="@this.openCameraSettings(camera)" title="{{translateText('change camera settings')}}"><i class="icon-cog"></i></button> {{#if permissions.view_analytics}} <button class="btn" on-click="@this.openAnalyticsGraphs(camera)" title="{{translateText('open analytics graphs')}}"><i class="icon-bar-chart"></i></button> {{/if}} {{#if permissions.can_delete}} <button class="btn" on-click="@this.deleteCamera(camera)" title="{{translateText('remove camera from account')}}"><i class="icon-trash"></i></button> {{/if}} {{/with}} </td> </tr> {{/if}} {{/each}} {{/owners}} </tbody> </table> </div> </div> </script>   <script type="text/template" id="SideBarView-template"> <ul> <li id="sidebar-search" <% if(!(me.account && me.isContractRecording())) { %> style="display:none;" <% } %> > <a href="#/search"><i class="icon icon-search"></i> <%= this.t('Search') %> </a><em class="indicator"></em></li> <% if(!me.isContractViewer()){ %> <% if(me.getAccount().isLargeAccount()){ %> <li class="submenu" id="sidebar-dashboard"> <a href="#/dash"> <i class="icon icon-dashboard"></i> <span data-testid="sidebar-large-account-label-dashboard"><%= this.t('Dashboard') %></span> <% if(camera_count !== null){ %> <span class="label pull-right"><%= camera_count < 0 ? '' : camera_count %></span> <%}%> </a> <em class="indicator"></em> <ul> <li id="sidebar-manage-devices"> <a href="#/manage/devices"> <i class="icon icon-facetime-video"></i> <span data-testid="sidebar-large-account-label-bridges-cameras"><%= this.t('Bridges') + ' / ' + this.t('Cameras') %></span> </a> </li> <li id="sidebar-manage-add-cameras"> <a href="#/manage/add_camera"> <i class="icon icon-plus-sign"></i> <span data-testid="sidebar-large-account-label-add-cameras"><%= this.t('Add Devices') %></span> </a> </li> <% if (!userList.getCurrentUser().get('is_master') && cameraList.filterShared(true).length > 0) { %> <li id="sidebar-manage-shared"> <a href="#/manage/shared"> <i class="icon icon-group"></i> <span data-testid="sidebar-large-account-label-shared-cameras"><%= this.t('Shared Cameras') %></span> </a> </li> <%}%> <li id="sidebar-manage-switches"> <a href="#/manage/switches"> <i class="icon icon-sitemap"></i> <span data-testid="sidebar-large-account-label-managed-switches"><%= this.t('Managed Switches') %></span> </a> </li> </ul> </li> <%} else if (!(me.checkFeatureFlag('distributor_dashboard') && me.get('is_distributor'))) {%> <li id="sidebar-dashboard"> <a href="#/dash"> <i class="icon icon-dashboard"></i> <span data-testid="sidebar-label-dashboard"><%= this.t('Dashboard') %></span> <% if(camera_count !== null){ %> <span class="label pull-right"><%= camera_count < 0 ? '' : camera_count %></span> <%}%> </a> <em class="indicator"></em> </li> <%}%> <%}%> <% if(me.checkFeatureFlag('distributor_dashboard') && me.get('is_distributor') && me.checkViewDistributor()) { %> <li id="sidebar-resellers"> <a href="#/resellers"> <i class="fas fa-money-check"></i> <span data-testid="sidebar-label-resellers"><%= this.t('Resellers') %></span> <span class="label pull-right"><%= reseller_counter %></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!me.get('is_master')) { %> <li id="sidebar-location" class="hidden"> <a href="#/location"> <i class="icon icon-map-marker"></i> <span data-testid="sidebar-label-locations"><%= this.t('Locations') %></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!me.get('is_master') && me.checkFeatureFlag('floorPlan') && me.checkFeatureFlag('location_groups')) { %> <li id="sidebar-floorPlans"> <a href="#/floor_plans"> <i class="icon-floor-plan"><img src="/_images/floor-plan.svg" /></i> <span data-testid="sidebar-label-floor-plans"><%= this.t('Floor Plans') %></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!me.get('is_master')) { %> <li class="submenu" id="sidebar-layouts"> <a> <i class="icon icon-th-large"></i> <span data-testid="sidebar-label-layouts"><%= this.t('Layouts') %></span> <span class="label pull-right"></span> <em class="indicator"></em></a> <ul id="layouts"> </ul> </li> <% if(!me.isContractViewer() && cameraList.filterATTD(true).length > 0){%> <li class="submenu" id="sidebar-cameras"> <a> <i class="icon icon-facetime-video"></i> <span data-testid="sidebar-label-tags"><%= this.t('Tags') %></span> <span class="label pull-right"> <%= tag_count %> </span> <em class="indicator"></em> </a> <ul id="tags-menu"> </ul> </li> <%}%> <% if(cameraList.filterATTD(true).length > 0) { %> <li style="display:<%=cameraList.responderAccounts && Object.keys(cameraList.responderAccounts).length > 0 ? 'block' :'none'%>;" class="submenu" id="sidebar-responder"> <a> <i class="icon icon-bolt"></i> <span data-testid="sidebar-label-first-responder"><%= this.t('First Responder') %></span> <span class="label pull-right"><%= responder_count %></span> <em class="indicator"></em> </a> <ul id="responder"> </ul> </li> <%}%> <% } %> <% if(!me.get('is_master') && !me.isContractViewer() && cameraList.filterATTD(true).length > 0) { %> <li id="sidebar-camera_map"> <a href="#/camera_map"> <i class="icon icon-globe"></i> <span data-testid="sidebar-label-map"><%= this.t('Map') %></span> </a> <em class="indicator"></em> </li> <% } %> <% if(me.checkUserEditUsers() && !me.isContractViewer()) { %> <li class="submenu" id="sidebar-users"> <a> <i class="icon icon-group"></i> <span data-testid="sidebar-label-users"><%= this.t('Users') %></span> <span class="label pull-right"><%= user_count %></span> </a> <em class="indicator"></em> <ul> <li id="sidebar-manage"> <a href="#/users/permissions" class="users-label sidebar-submenu"> <i class="icon icon-sitemap"></i> <span data-testid="sidebar-label-users-manage"><%= this.t('Manage') %></span> </a> </li> <% if((userList.getCurrentUser().isOwnedByMasterAccount() || (me.checkFeatureFlag('distributor_dashboard') && me.get('is_distributor')) || userList.getCurrentUser().checkFeatureFlag('audit_log')) && me.get('is_view_audit_trail')) { %> <li id="sidebar-auditlog"> <a href="#/auditlog" class="users-label sidebar-submenu"> <i class="icon icon-book"></i> <span data-testid="sidebar-label-users-audit-log"><%= this.t('Audit Log') %></span> <span class="label pull-right"></span> </a> </li> <%}%> <% if(me.checkFeatureFlag('audit_notifications') && me.checkAuditNotifications()){ %> <li id="sidebar-audit_notifications"> <a href="#/audit_notifications" class="users-label sidebar-submenu"> <i class="icon icon-bell"></i> <span data-testid="sidebar-label-users-notifications"><%= this.t('Notifications') %></span> <span class="label pull-right"></span> </a> </li> <%}%> </ul> </li> <% } %> <% if(me.get('is_master') && !(me.get('is_distributor') && me.checkFeatureFlag('distributor_dashboard')) && me.checkFeatureFlag('command_line_interface')){ %> <li id="sidebar-cli"> <a href="#/cli"> <i class="icon-terminal fa-terminal"></i> <span data-testid="sidebar-label-cli"><%= this.t('CLI') %></span> <span class="label pull-right"></span> </a> </li> <%}%> <%if(!me.isContractViewer()){%> <li id="sidebar-api" style="<%=(is_api_keys_visible?'':'display:none')%>"> <a href="#/apikeys"> <i class="icon icon-wrench"></i> <span data-testid="sidebar-label-api-keys"><%= this.t('API Keys') %></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!(me.get('is_master') && !me.checkFeatureFlag('drive_fs_local_upload')) && me.checkFeatureFlag('drive_fs') && me.checkViewArchive()) { %> <li id="sidebar-archive"> <a href="#/archive"> <i class="icon icon-folder-open"></i> <span data-testid="sidebar-label-archive"><%= this.t('Archive') %></span> <span class="label pull-right"></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!me.get('is_master') && me.checkExportVideo() && cameraList.filterATTD(true).length > 0) { %> <li id="sidebar-notifications" style=""> <a href="#/notifications"> <i class="icon icon-flag"></i> <span data-testid="sidebar-label-downloads"><%= this.t('Downloads') %></span> </a> <em class="indicator"></em> </li> <%}%> <% if (plugins.length > 0) {%> <% if(plugins.length > 1) { %> <li class="submenu" id="sidebar-plugins"> <a> <i class="icon icon-play"></i> <span data-testid="sidebar-label-plugins"><%= this.t('Plugins') %></span> <span class="label pull-right"><%= plugins.length %></span> </a> <em class="indicator"></em> <ul> <%}%> <% _.each(plugins, function(item) { %> <% if(!me.get('is_master') && me.checkFeatureFlag('plugins') && me.checkViewPlugins()) { %> <li id="sidebar-plugin-<%=item.id %>" class="sidebar-plugin"> <a href="#/plugins/<%=item.id %>"> <span data-testid="sidebar-label-plugins-<%=item.id %>"><%=item.get("name")%></span> <% if (!item.get("open_as_iframe")) { %> <i class="icon icon-external-link"></i> <%}%> <span class="label pull-right"></span> </a> <em class="indicator"></em> </li> <%}%> <% });%> <% if(plugins.length > 1) { %></ul><%}%> <%}%> <li id="sidebar-install" style="<%=(me.get('owner_account_id') !== me.get('active_account_id')?'':'display:none')%>"> <a href="#/install"> <i class="icon icon-wrench"></i> <span data-testid="sidebar-label-installer-tools"><%= this.t('Installer Tools') %></span> </a> <em class="indicator"></em> </li> <% if(me.checkFeatureFlag('video_search_ga') && !me.get('is_master')){%> <li id="sidebar-videosearch"> <a href="#/videosearch"> <i class="icon icon-search"></i> <span data-testid="sidebar-label-video-search"><%= this.t('Video Search') %></span> </a> </li> <%}%> <% if (me.isVSPEnabled()) { %> <li id="sidebar-lpr" class="submenu"> <a href="#/vmslpr"> <i class="fa fa-car" aria-hidden="true"></i> <%= this.t('') %> <span data-testid="sidebar-label-vsp"><%= this.t('VSP') %></span> </a> <em class="indicator"></em> <ul> <li> <a href="#/lpr/summary" class="lpr-label"> <span data-testid="sidebar-label-vsp-summary"><%= this.t('Summary') %></span> <span class="label pull-right"></span> </a> </li> <li> <a href="#/lpr/search" class="lpr-label"> <span data-testid="sidebar-label-vsp-search"><%= this.t('Search') %></span> <span class="label pull-right"></span> </a> </li> <li> <a href="#/lpr/alert" class="lpr-label"> <span data-testid="sidebar-label-vsp-alert"><%= this.t('Alert') %></span> <span class="label pull-right"></span> </a> </li> <li> <a href="#/lpr/rule" class="lpr-label"> <span data-testid="sidebar-label-vsp-rule"><%= this.t('Rule') %></span> <span class="label pull-right"></span> </a> </li> </ul> </li> <%}%> <% if(me.isReportsTabVisible()) { %> <li id="sidebar-reports_gui"> <a href="#/reports"> <i class="icon-reports"> <img src="/_images/icon-reports.svg" /> </i> <span data-testid="sidebar-label-reports"><%= this.t('Reports') %></span> <span class="label pull-right"></span> </a> <em class="indicator"></em> </li> <%}%> <% if(!branding.isWhitelabel()){ %> <li id="sidebar-helpCenter"> <a href="#/help_center"> <i class="icon-question-circle"></i> <span data-testid="sidebar-label-cli"><%= this.t('Help Center') %></span> <span class="label pull-right"></span> </a> </li> <%}%> </ul> </script>   <script type="text/ractive" id="Slider-template"> <div class="slider-widget slider-widget-{{roiid}} {{class}}"></div> </script>   <script type="text/ractive" id="SmartAlertSlider-template"> <div class="slider-widget slider-widget--simple slider-widget-{{id}} {{class}}"></div> </script>   <script type="text/ractive" id="SubAccountSummaryComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-bar-chart"></i> <span>{{translateText('Dashboard Summary')}}</span> <i data-toggle="collapse" data-target="#sub-account-widget-collapse" class="widget-collapse icon-chevron-down pull-right"></i> </header> <div id="sub-account-widget-collapse" class="collapse widget-content clearfix sub-account-summary-container"> {{#if bridge_count > 0}} <div class="sub-account-chart-item"> <div class="sub-account-chart"> <div id="sub-account-bridge-summary">{{! highcharts element}}</div> </div> <div class="sub-account-chart-label">{{bridge_summary_label}}</div> </div> {{#if show_bridge_health_chart}} <div class="sub-account-chart-item"> <div class="sub-account-chart"> <div id="sub-account-bridge-health">{{! highcharts element}}</div> </div> <div class="sub-account-chart-label">{{bridge_health_label}}</div> </div> {{/if}} {{/if}} {{#if camera_count > 0}} <div class="sub-account-chart-item"> <div class="sub-account-chart"> <div id="sub-account-camera-summary">{{! highcharts element}}</div> </div> <div class="sub-account-chart-label">{{camera_summary_label}}</div> </div> {{/if}} {{#if shared_camera_count > 0}} <div class="sub-account-chart-item"> <div class="sub-account-chart"> <div id="sub-account-camera-shared-summary">{{! highcharts element}}</div> </div> <div class="sub-account-chart-label">{{shared_camera_summary_label}}</div> </div> {{/if}} </div> </div> </script>   <script type="text/ractive" id="SuperSearch-template"> {{#if show}} <div class="row-fluid search-widget"> {{#if showSaveBtn(curr_search, searches)}} <div class="pull-right btn-group span2"> <a class="btn pull-right" title="{{translateText('Save filter')}}" on-click="openSaveOptions"><i class="icon-plus-sign add-icon orange"></i></a> </div> {{else}} {{#if searches.length > 0}} <div class="pull-right btn-group span2"> <a class="dropdown-toggle btn pull-right" data-toggle="dropdown" title="{{translateText('Saved Filters')}}"> <i class="icon-bookmark"></i> </a> <ul class="dropdown-menu searches-menu" role="menu" aria-labelledby="dLabel"> {{#each searches:index}} <li> <a data-filter="{{this.1}}" class="search-name pull-left" title="{{this.0}}" on-click="setFilterFromBookmark"> {{this.0}} </a> <i class="icon-remove icon-remove-filter pull-right" data-index="{{index}}" on-click="deleteFilter" title="{{translateText('Delete filter')}}"></i> </li> {{/each}} </ul> </div> {{/if}} {{/if}} {{#if !curr_search && !searches.length}} <div class="pull-right btn-group span2"> <div on-click="showPopover" class="btn pull-right" title="{{translateText('Help')}}" data-link="search"> <i class="icon-question-sign add-icon orange"></i> </div> </div> {{/if}} <input class="span9" type="text" name="search" placeholder="" style="{{curr_search ? '' : 'font-family: FontAwesome;'}}" value="{{curr_search}}" autocomplete="off"/> {{#if curr_search}} <i class="icon-remove remove-search" on-click="clearSearch" title="{{translateText('Clear filter')}}"></i> {{/if}} </div> {{/if}} </script>   <script id="template-SuperSearchSaveOptions" type="text/ractive"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>{{translateText('Save Filter')}}</h3> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="control-group"> <label class="control-label">{{translateText('Name')}}:</label> <div class="controls"> <input type="text" placeholder="{{translateText('Name')}}" value="{{save_name}}"> </div> </div> </div> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button type="button" class="btn btn-warning" data-dismiss="modal"> {{translateText('Cancel')}} </button> <button type="button" class="btn btn-success" on-click="@this.saveAsSearch()" {{#if !ui.allow_save}}disabled{{/if}}> {{translateText('Save Filter')}} </button> {{#if currentUser().checkLayoutCreate() && !currentUser().isContractViewer()}} <button type="button" class="btn btn-success" on-click="@this.saveAsLayout()" {{#if !(ui.allow_save && ui.allow_layout)}}disabled{{/if}}> {{translateText('Save Layout')}} </button> {{/if}} </div> </script>   <script type="text/ractive" id="SwitchViewComponent-template"> {{#if switch_list.length > 0}} <div class="widget"> <header class="widget-title"> <i class="icon-sitemap"></i> {{ translateText('Managed Switches') }} </header> <div class="widget-content clearfix" > <table class="table table-striped"> <thead> <tr> <th style="width:7%">{{translateText('Status')}}</th> <th style="width:20%">{{translateText('Name')}}</th> <th style="width:7%">  </th> <th style="width:25%">{{translateText('IP Address')}}</th> <th style="width:21%">{{translateText('Bridge')}}</th> <th style="width:20%">{{translateText('Actions')}}</th> </tr> </thead> <tbody class="switch-list-rows"> {{#each switch_list as managed_switch}} {{#unless managed_switch.state === 'LOST'}} <tr> <td> {{> switch_states[managed_switch.state]}} {{#partial status_online}} <i class="icon-ok-circle green big-icon" title="{{translateText('Ready to get commands')}}"></i> {{/partial}} {{#partial status_offline}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('Offline')}}"></i> {{/partial}} {{#partial status_available}} <i class="icon-lock red big-icon" title="{{translateText('Available to be attached')}}"></i> {{/partial}} </td> <td> {{managed_switch.name}} </td> <td>  </td> <td> {{managed_switch.ip}} </td> <td> {{getSwitchBridgeNames(managed_switch)}} </td> <td> {{#if managed_switch.state === 'AUTH'}} <button class="green" on-click="@this.attachSwitch(managed_switch)" title="{{translateText('add to bridge')}}" {{#if disabled}}disabled{{/if}}> <i class="icon-plus"></i> </button> {{else}} <button class="info" on-click="@this.openSwitchSettings(managed_switch)" title="{{translateText('change switch settings')}}"> <i class="icon-cog"></i> </button> {{/if}} </td> </tr> {{/unless}} {{/each}} </tbody> </table> </div> </div> {{/if}} </script>  <script type="text/ractive" id="TabPane-template"> <div class="tab-pane {{#if active_id===id}}active{{/if}}" id="{{id}}"> <div class="row-fluid">{{yield}}</div> </div> </script>  <script type="text/template" id="TagListView-template"> <% _.each(tagList, function(item) { %> <% if(item.indexOf('-bridge') === -1 || curr_user.checkShowBridgeTag(item)){ %> <li> <a href="#/layout_tag/<%= encodeURIComponent(item) %>" class="tag-label" title="<%= item %>"> <%- view.renderTag(item) %> </a> </li> <% } %> <% }); %> </script>   <script type="text/ractive" id="TamperingEditor-template"> {{#region}} <div class="row-fluid"> <div class="span6"> <div class="span2"> {{translateText('Sensitivity')}}: </div> <div class="een-slider-container span8 tampering_slider"> <div id="csAnalytics___tamperingSensitivity" class="een-slider"></div> </div> <div class="span2"> <i class="{{#if tampering_sensitivity!==default_sensitivity}}icon-undo{{/if}} gray" on-click="resetSensitivity" title="{{translateText('Restore to default')}}"></i> </div> </div> {{#if allow_alerts && !model.get("deviceShare")}} <button type="button" class="edit-alerts" data-id="{{id}}" on-click="editAlert"> <i class="icon-bell-alt {{isAlertSet(this) ? 'green' : ''}}"></i> </button> {{/if}} </div> <div class="row-fluid"> <table class="table table-condensed table-bordered table-striped analytics-table" id="csAnalytics-line-table"> <tbody id="csAnalytics_line_TableBody"> {{#if isEditAlertActive(this.id)}} <AnalyticAlertEditor colspan="5" payload="{{alert_payload}}" roiid="{{id}}" who="{{this.who}}" when="{{this.when ? this.when : '*'}}" throttle_type="{{this.throttle_type ? this.throttle_type : 2}}" account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{this.throttle_seconds ? this.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{this.throttle_hour_limit ? this.throttle_hour_limit : 5}}" users="{{getUserList()}}" mode="{{this.mode ? this.mode : ['all']}}" level="{{this.level ? this.level : 1}}"> </AnalyticAlertEditor> {{/if}} </tbody> </table> </div> {{/region}} <p class="red">{{error_text}}</p> </script>   <script type="text/ractive" id="TimeSlider-template"> <div class="span12 time-slider-container"> <div class="time-slider-widget"></div> </div> </script>   <script type="text/template" id="TunnelModal-template"> <div class="modal-header"> <button class="close" on-click="closeModal">×</button> <h3> {{title}} </h3> </div> <div class="modal-body"> <div class="row-fluid"> <div class="span12"> <div class="span12"> <p class="info-loading"> {{#if !tunnel_loaded && !tunnel_closing}} {{translateText('Please wait while we open a connection with this camera')}} {{elseif tunnel_closing}} {{translateText('Please wait while we close a connection with this camera')}} {{else}} {{translateText('We have created a tunnel that will open in a new window.')}} {{translateText('If this does not appear, please check if your browser is blocking popups,')}} {{translateText('or')}}<a href="#" on-click="openTunnel"> {{translateText('click here to open')}}</a> {{/if}} </p> </div> </div> </div> </div> <div class="modal-footer"> <p class="red">{{error_msg}}</p> <button class="btn btn-warning" on-click="closeModal">Cancel</button> <button class="btn btn-success" on-click="closeModal">Close</button> </div> </script>   <script id="template-twoFactorUpdate" type="text/ractive"> {{#if this.password_entered}} <div class="modal-header"> <h3>{{translateText("Verify your Security Code")}}</h3> </div> <div class="modal-body"> <p>{{code_message}}</p> <input class="span1" maxlength="4" type="text" value="{{code}}"/> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button class="btn btn-warning" on-click="cancelUpdate">{{translateText("Cancel")}}</button> <button class="btn btn-success" on-click="twoFactorCodeSubmit">{{translateText("Verify Code")}}</button> </div> {{else}} <div class="modal-header"> <h3>{{updateText()}}</h3> </div> <div class="modal-body"> <form> <div style="position: fixed;width: 1px;left: -100vw;"> <input type="text" tabindex="-1" id="bogus_username" style="width:1%"/> <input type="password" tabindex="-1" id="bogus_password" style="width:1%"/> </div> <input type="text" class="input-password" autocomplete="off" value="{{user_password}}"/> <p class="red">{{methodMessage()}}</p> </form> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button class="btn btn-warning" on-click="cancelUpdate">{{translateText("Cancel")}}</button> <button class="btn btn-success" on-click="submitUpdate">{{translateText("Send Security Code")}}</button> </div> {{/if}} </script>   <script type="text/template" id="UserListItemView-template"> <tr> <td><%- this.model.get('first_name') %> <%- this.model.get('last_name') %></td> <td><%- this.model.getEmailForDisplay() %></td> <%if(!(userList.getCurrentUser().checkFeatureFlag('distributor_dashboard') && userList.getCurrentUser().get('is_distributor'))){%> <td> <% if(this.model.get('admin')) { print('<i class="icon-ok"></i>') } else { print(' ') } %> </td> <%}%> <td><%= this.t(this.model.get('display_status')) %></td> <td><%= deviceList.getDisplayTime(this.model.get('last_login'), false, true)%></td> <td> <% if (userList.getCurrentUser().get('id') !== this.model.get('id')) { %> <%if(userList.getCurrentUser().checkEditDeleteUser(this.model)){%> <button class="info" id="user_info_<%= this.model.get('id') %>" title="<%= this.t('change user settings') %>"><i class="icon-cog"></i></button> <%}%> <button class="<%=(this.model.isPending() ? 'reconfirm': 'reset')%>" id="user_reset_<%= this.model.get('id') %>" title="<%=(this.model.isPending() ? this.t('re-send confirmation email') : this.t('send password reset email'))%>"><i class="icon-envelope"></i></button> <%if(userList.getCurrentUser().checkEditDeleteUser(this.model)){%> <button class="ignore" id="user_ignore_<%= this.model.get('id') %>" title="<%= this.t('remove user from account') %>"><i class="icon-trash"></i></button> <%}%> <% if ((userList.getCurrentUser().isOwnedByMasterAccount() || userList.getCurrentUser().checkFeatureFlag('audit_log')) || (userList.getCurrentUser().checkFeatureFlag('distributor_dashboard') && userList.getCurrentUser().get('is_distributor')) && userList.getCurrentUser().get('is_view_audit_trail')) { %> <button type="button" class="audit-user" id="user_audit_<%= this.model.get('id') %>" title="<%= this.t('audit user') %>"><i class="icon-book"></i></button> <% } %> <%} else if (userList.getCurrentUser().checkFeatureFlag('audit_log') || (userList.getCurrentUser().checkFeatureFlag('distributor_dashboard') && userList.getCurrentUser().get('is_distributor'))){%> <button type="button" class="audit-user" id="user_audit_<%= this.model.get('id') %>" title="<%= this.t('audit user') %>"><i class="icon-book"></i></button> <% } %> </td> </tr> </script>   <script type="text/template" id="UserListView-template"> <article class="row-fluid"> <div class="widget"> <header class="widget-title"><i class="icon-sitemap"></i> <span><%= this.t('Users') %></span> <i id="launchAddUserModalSmall" title="<%= this.t('Add User') %>" class="icon-plus-sign add-icon pull-right launchAddUserModal"></i> </header> <div class="widget-content clearfix" id="users-list-table"> <table class="table table-striped"> <thead> <tr> <th><%= this.t('Name') %></th> <th><%= this.t('E-mail Address') %></th> <%if(!(userList.getCurrentUser().checkFeatureFlag('distributor_dashboard') && userList.getCurrentUser().get('is_distributor'))){%> <th><%= this.t('Administrator') %></th> <%}%> <th><%= this.t('Status') %></th> <th><%= this.t('Last Login') %></th> <th><%= this.t('Actions') %></th> </tr> </thead> <tbody id='users-list-rows'> </tbody> </table> <%if(userList.getCurrentUser().isDemoUser()){%> <a class="btn btn-info pull-right" id="dummyCSVButton" style="margin-left: 10px;"href="#"><i style="margin-right:5px;" class="icon-download"></i><%= this.t('Download User List') %></a> <%}else if (userList.getCurrentUser().checkFeatureFlag('export_users') && userList.getCurrentUser().checkExportUsers()) {%> <%var currTime = new Date(Date.now()); var userTime = deviceList.getDisplayTime(currTime, false);%> <a class="btn btn-info pull-right" style="margin-left: 10px;"href="<%='/g/list/user/export?account_id='+userList.getCurrentUser().get('active_account_id')%>" download="<%=utils.t('User_List_for_') + _.escape(userList.getCurrentUser().account.get("name")) + '(' + userTime + ')' + '.csv'%>"><i style="margin-right:5px;" class="icon-download"></i><%= this.t('Download User List') %></a> <%}%> <button id="launchAddUserModal" href="#" class="btn btn-success pull-right launchAddUserModal"><i class="icon-plus-sign"></i> <%= this.t('Add User') %></button> </div> </div> </article> </script>  <script type="text/template" id="UsersPermissionsView-template"> <div class="container-fluid" id="translate-users"></div> </script>  <script id="template-warningDialogue" type="text/ractive"> <div class="modal-header"> <h3>{{header_text}}</h3> </div> <div class="modal-body"> <p>{{{body_text}}}</p> {{! unescaped to allow rendering of HTML passed in}} </div> <div class="modal-footer"> <button type="button" class="btn {{#if !cancel_button_class}} btn-warning {{else}} {{cancel_button_class}} {{/if}}" on-click="cancel"> {{#if !cancel_label}} {{translateText("Cancel")}} {{else}} {{cancel_label}} {{/if}} </button> <button type="button" class="btn {{#if !accept_button_class}} btn-danger {{else}} {{accept_button_class}} {{/if}}" on-click="proceed"> {{#if !accept_label}} {{translateText("Accept")}} {{else}} {{accept_label}} {{/if}} </button> {{#if custom_button}} <button type="button" class="btn {{custom_button.class}}" on-click="custom_button_action"> {{custom_button.text}} </button> {{/if}} </div> </script>   <script type="text/ractive" id="InitialLoadingTable-template"> <table class="table table-striped"> <thead> <tr> {{#each initialLoadingTableInfo as row}} <th width="{{row.width}}">{{row.name}}</th> {{/each}} </tr> </thead> <tbody> {{#each rowLengthArray}} <tr> {{#each initialLoadingTableInfo}} <td><div class="dashboard__skeleton-box"></div></td> {{/each}} </tr> {{/each}} </tbody> </table> </script> <script type="text/ractive" id="EEN-PTZ-DropDown-template"> <div class="{{device_id}}-layout-ptz-dropdown lp-dropdown {{#dropdown_show}}open{{/}} {{^show}}hidden{{/}}" style="opacity: {{opacity}}" title="{{translateText('Toggle Viewport')}}" on-mouseenter="@this.set('opacity', 1)" on-mouseleave="@this.set('opacity', .6)" on-click="dropdown"> <ul class="dropdown-menu dropdown_{{device_id}} {{^dropdown_show}}hidden{{/}}" role="menu" aria-lablledby="dropdownMenu"> <li class="ptz-title">{{translateText("Viewports")}}</li> <li class="divider"></li> <li class="ptz-save {{^save_enabled}}disabled{{/}} {{^save_show}}hidden{{/}}"> <a href="#" on-click="save-viewport">{{translateText('Save')}}</a> </li> <li class="divider {{^save_show}}hidden{{/}}"></li> {{#each stations: index}} {{#id}} <li class="ptz-drop"><a href="#" on-click="goto" data-station="{{index}}">{{name}}</a></li> {{else}} {{#name}} <li class="ptz-drop divider"></li> <li class="ptz-title">{{name}}</li> {{/}} <li class="ptz-drop divider"></li> {{/}} {{/each}} </ul> <a href="#" data-toggle="dropdown" class="dropdown-toggle ptz-drop-toggle"> <i class="icon-chevron-down big-icon icon-chevron-pane"></i> </a> </div> </script> <script type="text/ractive" id="EEN-PTZ-PTZ-template"> <div class="ptz-controls-wrapper {{^control_show}}hidden{{/}}" style="top: {{control_position.top}}; left: {{control_position.left}}; bottom: {{control_position.bottom}}; right: {{control_position.right}};"> <div class="een-prev-ptz {{device_id}}-layout-ptz-buttons {{^control_pt_show}}hidden{{/}}" style="color: {{#active}}lightgreen{{else}}white{{/}}; opacity: {{opacity}}" on-mouseover="@this.set('opacity', 1)" on-mouseout="@this.set('opacity', .6)" on-click="toggle"> <i class="icon-virtual-ptz {{#active}}active{{/}} big-icon"></i> </div> <PTZDropDown stations="{{stations}}" composite_type="{{composite_type}}" device_id="{{device_id}}" show="{{control_chevron_show}}" ptz_enabled="{{ptz_enabled}}" save_show="{{control_save_show}}" save_enabled="{{save_enabled}}" /> </div> </script>  <script type="text/ractive" id="AnalyticsCameraCompatibility-template"> {{#message}} <span id="csAnalytics-compatible-msg" class="{{ class }}">{{#if icon}}{{{ icon }}} {{/if}}{{ text }}</span> {{/message}} {{#if support_section}} <div id="csAnalytics-compatible-btn-wrapper" class="btn-group"> <button id="csAnalytics-compatible-btn-submit" class="btn btn-success" on-click="@this.fire('request_support')"> {{ translateText("Request Analytics Optimization") }} </button> </div> {{/if}} </script>   <script type="text/ractive" id="AnalyticsCounter-template"> <div class="ana-count" style="position:{{position}}; display:block; line-height: 1.2; padding: 1px; font-size: 20px; color: yellowgreen; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; top: {{top}}px;left:{{left}}px; margin-right: {{margin-right}};"> {{#if loading}} {{translateText("loading")}}... {{else}} {{#if counts && delta !== undefined}} <div class="ana-delta"> <span class="delta-text">{{delta}}</span> <i class="icon-delta"></i> </div> {{/if}} {{#if counts}} {{#if line_settings.in_dir}} <div class="ana-count"> {{{getArrowFromDir(line_settings.in_dir)}}} {{counts.num_in}} {{{getArrowFromDir(line_settings.out_dir)}}} {{counts.num_out}} </div> {{/if}} {{/if}} {{#if show_crossing}} <div class="ana-flash ana-count"> <i class="icon-crossing {{checkActive('crossing')}}"></i> </div> {{/if}} {{#if show_intrusion}} <div class="ana-flash ana-count"> <i class="icon-intrusion {{checkActive('intrusion')}}"></i> </div> {{/if}} {{#if show_loitering}} <div class="ana-flash ana-count"> <i class="icon-loitering {{checkActive('loitering')}}"></i> </div> {{/if}} {{#if show_tampering}} <div class="ana-flash"> <i class="icon-tampering {{checkActive('tampering')}}"></i> </div> {{/if}} {{/if}} </div> </script>   <script type="text/ractive" id="AuditlogDetail-template"> {{>getLayoutPartial()}} {{! Event Type Templates}} {{#partial generic}} <div class="row-fluid"> {{#each data:key}} {{#if .}}{{#with . as item}} {{>key}} {{/with}}{{/if}} {{/each}} </div> {{/partial}} {{#partial user_device}} <div class="row-fluid"> <div class="span6"> {{#with data.users as item}} {{>users}} {{/with}} </div> <div class="span6"> {{#with data.devices as item}} {{>devices}} {{/with}} </div> </div> {{/partial}} {{#partial user_location}} <div class="row-fluid"> <div class="span6"> {{#with data.users as item}} {{>users}} {{/with}} </div> <div class="span6"> {{#with data.location as location}} {{>location_settings}} {{/with}} </div> </div> <div class="row-fluid"> <div class="span6"> {{#if data.location.added_users}} {{#with data.location.added_users as item, "true" as added}} {{>users}} {{/with}} {{/if}} </div> <div class="span6"> {{#if data.location.removed_users}} {{#with data.location.removed_users as item, "true" as removed}} {{>users}} {{/with}} {{/if}} </div> </div> <div class="row-fluid"> <div class="span6"> {{#if data.location.added_devices}} {{#with data.location.added_devices as item, "true" as added}} {{>devices}} {{/with}} {{/if}} </div> <div class="span6"> {{#if data.location.removed_devices}} {{#with data.location.removed_devices as item, "true" as removed}} {{>devices}} {{/with}} {{/if}} </div> </div> <div class="row-fluid"> <div class="span12"> {{#with settings as item}} {{>diff}} {{/with}} </div> </div> {{/partial}} {{#partial user_device_diff}} <div class="row-fluid"> <div class="span6"> {{#with data.users as item}} {{>users}} {{/with}} </div> <div class="span6"> {{#with data.devices as item}} {{>devices}} {{/with}} </div> </div> <div class="row-fluid"> <div class="span12"> {{#with settings as item}} {{>diff}} {{/with}} </div> </div> {{/partial}} {{#partial user_diff}} <div class="row-fluid"> <div class="span12"> {{#with data.users as item}} {{>users}} {{/with}} </div> </div> <div class="row-fluid"> <div class="span12"> {{#if settings}} {{#with settings as item}} {{>diff}} {{/with}} {{/if}} </div> </div> {{/partial}} {{#partial user_layout}} <div class="row-fluid"> <div class="span6"> {{#with data.users as item}} {{>users}} {{/with}} </div> <div class="span6"> {{#with data.layout as layout}} {{>layout_settings}} {{/with}} </div> </div> {{#if data.layout.configuration.panes.0}} {{#with data.layout.configuration.panes as panes}} {{#with data.devices as devices}} {{>layout_panes}} {{/with}} {{/with}} {{/if}} {{/partial}} {{#partial user_device_videoURL}} {{>user_device}} <h5> {{#if data.video.video_type == 'historical'}} History Browser {{elseif data.video.video_type == 'live'}} Live {{/if}} Video: </h5> <div><a on-click="@this.launchHistoryBrowser(data.devices, data.video)" href="">Jump to viewed video start</a></div> <div><span class="text-dimmed">Video start:</span> {{isoTimestamp(data.video.start_ts)}}</div> <div><span class="text-dimmed">Video end:</span> {{isoTimestamp(data.video.end_ts)}}</div> {{/partial}} {{#partial user_device_download}} {{>user_device}} {{#with data.video_download as download}} {{>video_download}} {{/with}} {{/partial}} {{#partial user_switch_command}} <div class="row-fluid"> <div class="span6"> {{#with data.users as item}} {{>users}} {{/with}} </div> <div class="span6"> <h5>Managed Switch</h5> {{#if data.managed_switch.command}} <div><span class="text-dimmed">Name:</span> {{data.managed_switch.name}}</div> <div><span class="text-dimmed">GUID:</span> {{data.managed_switch.guid}}</div> <div> <strong class="capitalize">{{data.managed_switch.command}}</strong> port(s): {{#each data.managed_switch.ports:key}} {{#if key > 0}}, {{getPortNumber(.)}}{{else}}{{getPortNumber(.)}}{{/if}} {{/each}} </div> {{else}} <div><span class="text-dimmed">Old name:</span> {{data.managed_switch.old_values.name || '[unset]'}}</div> <div><span class="text-dimmed">New name:</span> {{data.managed_switch.new_values.name}}</div> {{/if}} </div> </div> {{/partial}} {{! Detail Items}} {{#partial devices}} <div class=""> <h5>{{#if added}}Added {{/if}}{{#if removed}}Removed {{/if}}Devices</h5> {{#each item}} {{#if .esn}} <div class="audit-detail-item audit-device-detail"> <div><span class="text-dimmed">Name:</span> {{.name}} ({{.esn}})</div> <div><span class="text-dimmed">Make:</span> {{.make}}</div> <div><span class="text-dimmed">Model:</span> {{.model}}</div> </div> {{else}} No device data available {{/if}} {{/each}} {{/partial}} {{#partial users}} {{#each item}} <h5>{{#if .created_new}}Created New {{/if}}{{#if added}}Added {{/if}}{{#if removed}}Removed {{/if}}Users</h5> <div class="audit-detail-item audit-user-detail"> <div><span class="text-dimmed">Name:</span> {{.first_name}} {{.last_name}}</div> <div><span class="text-dimmed">Email:</span> {{.email}}</div> <div><span class="text-dimmed">ID:</span> {{.id}}</div> </div> {{/each}} {{/partial}} {{#partial diff}} <h5>Settings Changes</h5> {{#if item}} <table class="table audit-settings-table"> <thead> <th class="col-setting">Setting</th> <th class="col-diff">Previous Value</th> <th class="col-diff">New Value</th> </thead> <tbody> {{#each item}} <tr> <td>{{ .path.join(' > ') }}</td> <td><div class="show-more">{{ getDiff(this.old_value) }}</div></td> <td><div class="show-more">{{ getDiff(this.new_value) }}</div></td> </tr> {{/each}} </tbody> </table> {{else}} No data available {{/if}} {{/partial}} {{#partial layout_settings}} <h5>Layout Settings</h5> <div><span class="text-dimmed">Name:</span> {{layout.name}}</div> <div><span class="text-dimmed">ID:</span> {{layout.id}}</div> <div><span class="text-dimmed">Cameras per row:</span> {{layout.configuration.settings.camera_row_limit}}</div> <div><span class="text-dimmed">Show camera name:</span> {{layout.configuration.settings.camera_name}}</div> <div><span class="text-dimmed">Borders:</span> {{layout.configuration.settings.camera_border}}</div> <div><span class="text-dimmed">Custom ID:</span> {{layout.configuration.settings.custom_id}}</div> <div><span class="text-dimmed">Aspect ratio:</span> {{layout.configuration.settings.camera_aspect_ratio}}</div> {{/partial}} {{#partial location_settings}} <h5>Location Settings</h5> <div><span class="text-dimmed">Name:</span> {{location.name}}</div> <div><span class="text-dimmed">ID:</span> {{location.id}}</div> {{/partial}} {{#partial layout_panes}} <h5>Layout Panes</h5> <div class="audit-layout-panes"> {{#each panes}} {{#if .cameras}} <div class="audit-layout-pane"> <div>Camera: {{.name || devices[.cameras[0]].name}}</div> <div>ID: {{.cameras}}</div> <div>Size: {{.size}}</div> <div>Position in layout: {{@key}}</div> </div> {{/if}} {{/each}} </div> {{/partial}} {{#partial video_download}} <h5>Video Download Details</h5> <div><span class="text-dimmed">Format:</span> {{download.video_format}}</div> <div><span class="text-dimmed">Download Type:</span> {{download.download_type}}</div> <div><span class="text-dimmed">Description:</span> {{download.video_description}}</div> <div><span class="text-dimmed">Notes:</span> {{download.notes}}</div> <div><span class="text-dimmed">ID:</span> {{download.download_id}}</div> {{/partial}} </script>   <script type="text/ractive" id="Dashboard-template"> <main class="dashboard widget"> <header class="widget-title"> <div class="dashboard__header"> <div class="dashboard__header__left"> <DashboardTitle/> </div> <div class="dashboard__header__right"> <PaginationBarApi collection="{{collection}}" current_page={{state.get('current_page')}} size={{state.get('size')}} quantity={{state.get('total_size')}} is_last_page={{state.get('is_last_page')}} loading="{{state.get('loading')}}" /> <DashboardActions device_list_loading="{{device_list_loading}}" /> </div> </div> </header> <div class="dashboard__items widget-content"> {{#if state.get('loading') && !state.get('initial_loading')}} <div class="dashboard__loading-mask"> <div class="dashboard__loading-positioning"> <img class="dashboard__loading-image" src="/_images/spinning.gif" alt=""> </div> </div> {{/if}} {{#if state.get('error') && state.get('initial_loading')}} <div class="dashboard__no-results row-fluid text-center"> <h3>{{translateText('Error')}}</h3> <p>{{translateText('An error occurred while downloading the device list, please try again.')}}</p> <button class="btn btn-info" type="button" on-click="@this.tryAgainFetchList()">{{translateText('Reload')}}</button> </div> {{elseif state.get('initial_loading')}} <InitialLoadingTable rowLength="6" initialLoadingTableInfo="{{initialLoadingTableInfo}}" /> {{elseif collection.length}} <table class="table table-striped"> <thead> <tr> <th id='camera-table-status' style="width:5%;">{{translateText('Status')}}</th> <th id='camera-table-status-indent' style="width:5%"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th id='camera-table-name' style="width:25%">{{translateText('Name')}}</th> <th id='camera-table-tags' style="width:25%">{{translateText('Tags')}}</th> <th id='camera-table-location' style="width:20%;"> <span on-click="@this.set('location_info_type', 'location')" class=" device-location-col {{#if location_info_type === 'location'}}device-location-col-selected{{/if}} " > {{translateText('Location')}} </span> / <span on-click="@this.set('location_info_type', 'address')" class=" device-location-col {{#if location_info_type === 'address'}}device-location-col-selected{{/if}} " > {{translateText('Address')}} </span> </th> <th style="width:20%; min-width: 200px;"> {{translateText('Actions')}} </th> </tr> </thead> <tbody id="device-widget-component-light"> {{#each collection}} <DashboardRow item="{{this}}" location_info_type="{{location_info_type}}" user="{{user}}" doTalkdown="{{doTalkdown}}" /> {{/each}} </tbody> </table> {{elseif state.get('no_results')}} <div class="dashboard__no-results row-fluid"> <h3 class="text-center">{{translateText('No results found')}}</h3> </div> {{elseif !state.get('loading') && !state.get('total_size')}} <div class="row-fluid"> <div class="span6"> <div style="margin-left: 15px;"> <h3>{{translateText('Add Bridge')}}</h3> <p>{{translateText('A Bridge is needed to connect your cameras to a cloud data center.')}}</p> <p>{{translateText('Make sure the WAN port of your Bridge is connected to the internet and then press the Add Bridge button.')}}</p> </div> </div> <div id="wrapper-bridges-img" class="span6"> <img src="{{no_bridge_image}}" alt=""> </div> </div> {{/if}} </div> <footer class="widget-title"> <div class="dashboard__footer"> <div class="dashboard__footer__left"> </div> <div class="dashboard__footer__right"> <PaginationBarApi collection="{{collection}}" current_page={{state.get('current_page')}} size={{state.get('size')}} quantity={{state.get('total_size')}} is_last_page={{state.get('is_last_page')}} loading="{{state.get('loading')}}" /> <div class="pull-right"> {{#if (!state.get('initial_loading'))}} <PageSize collection="{{collection}}" size="{{state.get('size')}}" /> {{/if}} </div> </div> </div> </footer> <audio id="talkdown-audio" autoplay></audio> <div id="speakerNotification-component"></div> </main> </script>  <script type="text/ractive" id="DashboardActions-template"> {{#if show_dropdown }} <div class="dashboard__actions"> <div class="btn-group device-dropdown-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-testid="page-dashboard-header-dropdown-toggle-button-add-devices" > <i class="fas fa-ellipsis-h"></i> </a> <ul class="dropdown-menu pull-right"> {{#if show_bridge_option}} <li on-click="@this.addBridge()" data-testid="page-dashboard-header-dropdown-menu-add-bridge" > <a>{{translateText('Add Bridge')}}</a> </li> {{/if}} {{#if show_camera_option && !device_list_loading}} <li on-click="@this.addRtspCamera()" data-testid="page-dashboard-header-dropdown-menu-add-rtsp-camera" > <a>{{translateText('Add Cameras')}}</a> </li> {{/if}} {{#if show_camera_direct_option}} <li on-click="@this.openDirectCameraModal()" data-testid="page-dashboard-header-dropdown-menu-add-direct-camera" > <a>{{translateText('Add Camera Direct')}}</a> </li> {{/if}} {{#if show_mass_edit_option}} <li on-click="@this.goToMassEdit('bridge')"><a>{{translateText('Mass Edit Bridges')}}</a></li> <li on-click="@this.goToMassEdit('camera')"><a>{{translateText('Mass Edit Cameras')}}</a></li> {{/if}} </ul> </div> </div> {{elseif show_bridge_option}} <div class="dashboard__actions"> <i on-click="@this.addBridge()" class="icon-plus-sign add-icon" title="{{translateText('Add Bridge')}}" data-testid="page-dashboard-header-button-add-bridge" ></i> </div> {{/if}} </script>  <script type="text/ractive" id="DashboardRow-template"> {{#if item.firstCloudCamera}} <DirectBridgeRow/> {{/if}} <tr data-esn="{{item.deviceID}}"> {{#if item.deviceType === 'camera'}} {{#if item.deviceParent}} <ChildCameraRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}"/> {{else}} <CameraRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}"/> {{/if}} {{elseif item.deviceType === 'multiview_camera'}} <MultiviewCameraRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}"/> {{elseif item.deviceType === 'cloud_camera'}} <DirectCameraRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}"/> {{elseif item.deviceType === 'speaker'}} <SpeakerRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}" doTalkdown="{{doTalkdown}}" /> {{elseif item.deviceType === 'bridge'}} <BridgeRow item="{{item}}" location_info_type="{{location_info_type}}" user="{{user}}"/> {{else}} <NotSupportedRow item="{{item}}"/> {{/if}} </tr> {{#if (item.deviceFisheyeViewports.length)}} {{#each item.deviceFisheyeViewports as viewport}} <tr data-esn="{{item.deviceID}}" data-composite-id="{{ viewport.id }}"> <FisheyeViewportCameraRow item="{{item}}" viewport="{{viewport}}" location_info_type="{{location_info_type}}" user="{{user}}" /> </tr> {{/each}} {{/if}} </script>  <script type="text/ractive" id="DashboardTitle-template"> <i class="icon-hdd"></i> {{translateText('Bridges')}} / <i class="icon-facetime-video"></i> {{translateText('Cameras')}} </script>  <script type="text/ractive" id="BridgeRow-template"> <td class="table-device-status"> {{! STATUS COL }} <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </td> <td class="table-device-icon"> {{! ICON COL }} <i class="{{bridge_icon_column_parameters.classes}}" title="{{bridge_icon_column_parameters.title}}"> </i> </td> <td> {{! NAME COL }} <strong>{{item.deviceName}}</strong> {{#if summary_message}} ({{summary_message}}) {{/if}}  </td> <td> {{! SERIAL COL }} {{item.deviceSerial}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkBridgeUpdate(item)}} <button type="button" class="btn" on-click="@this.openBridgeSettings()" title="{{translateText('change bridge settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{! TODO: entire model check }} {{#if user.is_edit_all_and_add}} <button type="button" class="btn" on-click="@this.replaceBridge(item)" title="{{translateText('replace bridge')}}"> <i class="icon-exchange"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteBridge()" title="{{translateText('remove bridge from account')}}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="CameraRow-template"> {{#if hasBridge}} <td class="offset-cell offset-with-line"></td> {{/if}} <td class="table-device-status"> {{! STATUS COL }} <div {{#if has_preview_bubble}} class="status-clickable" on-click="@this.showPreview(@node)"{{/if}}> <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </div> </td> {{#if !hasBridge}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} {{item.deviceName}} {{#if has_associated_speaker}} <i class="icon-volume icon-volume-device device-speaker-icon"></i> {{/if}} </td> <td> {{! TAGS COL }} {{#each item.deviceTags as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span> {{/each}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceRecordedVideo(item) && !item.isLiveViewOnly()}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) || user.checkPTZOnlyShowSettings(item) }} <button type="button" class="btn" on-click="@this.openCameraSettings()" title="{{has_composites ? translateText('change parent camera settings') : translateText('change camera settings')}}" > <i class="{{has_composites ? 'icon-cogs' : 'icon-cog'}}"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) && user.checkDeviceVPNForAttachedCamera(item) && !item.isAnalog()}} <button type="button" {{#if !has_vpn}}disabled{{/if}} on-click="@this.openVPN()" title="{{translateText('open VPN to camera')}}" > <i class="een-icon-tunnel"></i> </button> {{/if}} {{#if user.checkShowCameraMetrics(item)}} <button type="button" class="btn" on-click="@this.openAnalytics()" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCamera()" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="ChildCameraRow-template"> {{#if hasBridge}} <td class="offset-cell offset-with-line"></td> {{/if}} <td class="offset-cell"> {{! STATUS COL }} </td> {{#if !hasBridge}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} <span class="table-device-child-camera-status {{#if has_preview_bubble}}status-clickable{{/if}}" {{#if has_preview_bubble}}on-click="@this.showPreview(@node)"{{/if}}> <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </span> {{item.deviceName}} {{#if has_associated_speaker}} <i class="icon-volume icon-volume-device device-speaker-icon"></i> {{/if}} </td> <td> {{! TAGS COL }} {{#each item.deviceTags as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span> {{/each}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceRecordedVideo(item) && !item.isLiveViewOnly()}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) || user.checkPTZOnlyShowSettings(item) }} <button type="button" class="btn" on-click="@this.openCameraSettings()" title="{{has_composites ? translateText('change parent camera settings') : translateText('change camera settings')}}" > <i class="{{has_composites ? 'icon-cogs' : 'icon-cog'}}"></i> </button> {{/if}} {{#if user.checkShowCameraMetrics(item)}} <button type="button" class="btn" on-click="@this.openAnalytics()" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCamera()" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="DirectBridgeRow-template"> <tr data-esn="CameraDirectBridge"> <td class="table-device-status"> <i class="icon-ok-circle green big-icon" title="bridge online"></i> </td> <td class="table-device-icon"> <i class="bridge-camera-direct-list-row-icon icon-large" title=""></i> </td> <td> <strong>{{ translateText('Direct to Cloud Cameras') }}</strong> </td> <td></td> <td></td> <td></td> </tr> </script>  <script type="text/ractive" id="DirectCameraRow-template"> <td class="offset-cell offset-with-line"></td> <td class="table-device-status"> {{! STATUS COL }} <div {{#if has_preview_bubble}} class="status-clickable" on-click="@this.showPreview(@node)"{{/if}}> <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </div> </td> <td> {{! NAME COL }} {{item.deviceName}} </td> <td> {{! TAGS COL }} {{#each item.deviceTags as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span> {{/each}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceRecordedVideo(item) && !item.isLiveViewOnly()}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) || user.checkPTZOnlyShowSettings(item) }} <button type="button" class="btn" on-click="@this.openCameraSettings()" title="{{has_composites ? translateText('change parent camera settings') : translateText('change camera settings')}}" > <i class="{{has_composites ? 'icon-cogs' : 'icon-cog'}}"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCamera()" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="FisheyeViewportCameraRow-template"> <td class="offset-cell offset-with-line"></td>{{! STATUS COL }} <td></td> <td class="offset-with-indentation"> {{! NAME COL }} {{viewport.name}} </td> <td> {{! TAGS COL }} {{#each viewport.tags as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span> {{/each}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceRecordedVideo(item) && !item.isLiveViewOnly()}} <button type="button" class="btn" on-click="@this.openHistory()" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) || user.checkPTZOnlyShowSettings(item) }} <button type="button" class="btn" on-click="@this.openCameraViewportSettings()" title="{{translateText('change viewport settings')}}" > <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCameraComposite()" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="MultiviewCameraRow-template"> {{#if hasBridge}} <td class="offset-cell offset-with-line"></td> {{/if}} <td class="table-device-status"> {{! STATUS COL }} <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </td> {{#if !hasBridge}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} <strong>{{item.deviceName}}</strong> </td> <td> {{! TAGS COL }} {{#each item.deviceTags as tag}} <span class="tag"><a href="#/layout_tag/{{tag}}">{{tag}}</a></span> {{/each}} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if user.checkDeviceUpdate(item)}} <button type="button" class="btn" on-click="@this.openCameraSettings()" title="{{translateText('change parent camera settings')}}" > <i class="icon-cogs"></i> </button> {{/if}} {{#if has_available_child_views}} <button class="btn btn-info btn-small new-child-view-btn" title="{{translateText('New View')}}" on-click="@this.openCameraSettings(camera, 'views')"> <i class="icon-plus"></i> </button> {{/if}} {{#if user.checkDeviceUpdate(item) && user.checkDeviceVPNForAttachedCamera(item) && !item.isAnalog()}} <button type="button" {{#if !has_vpn}}disabled{{/if}} on-click="@this.openVPN()" title="{{translateText('open VPN to camera')}}" > <i class="een-icon-tunnel"></i> </button> {{/if}} {{#if user.checkShowCameraMetrics(item)}} <button type="button" class="btn" on-click="@this.openAnalytics()" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteCamera()" title="{{translateText('remove camera from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="NotSupportedRow-template"> <td colspan="10"> Device not supported <b>{{item.deviceType}}</b> </td> </script>  <script type="text/ractive" id="SpeakerRow-template"> {{#if hasBridge}} <td class="offset-cell offset-with-line"></td> {{/if}} <td class="table-device-status"> {{! STATUS COL }} <div> <i class="{{status_column_parameters.classes}}" title="{{status_column_parameters.title}}"> </i> </div> {{webRTC_speaker}} </td> {{#if !hasBridge}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} {{item.deviceName}} </td> <td> {{! TAGS COL }} </td> <td> {{! LOCATION COL}} {{location_info}} </td> <td> {{! ACTIONS COL }} {{#if (user.checkDeviceUpdate(item) || user.checkPTZOnlyShowSettings(item)) && item.isAbleToTalkdown() }} <button type="button" class="btn" on-click="doTalkdown(item.deviceID, item.deviceExtra)" title="{{translateText('directly talk to speaker')}}"> <i class="icon-microphone" id="{{item.deviceID}}-talkdown-icon"></i> </button> {{/if}} {{#if user.checkSpeakerOnlyShowSettingsByID(item.deviceID) }} <button type="button" class="btn" on-click="@this.openSpeakerSettings()" title="{{translateText('change speaker settings')}}" > <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkDeviceVPNForAttachedCamera(item)}} <button type="button" {{#if !has_vpn}}disabled{{/if}} on-click="@this.openVPN()" title="{{translateText('open VPN to speaker')}}" > <i class="een-icon-tunnel"></i> </button> {{/if}} {{#if user.checkAddDeleteDevices()}} <button type="button" class="btn" on-click="@this.deleteSpeaker()" title="{{translateText('remove speaker from account') }}"> <i class="icon-trash"></i> </button> {{/if}} </td> </script>  <script type="text/ractive" id="DewarpDashboardSettingsComponent-template"> <form class="form-horizontal">  <div class="control-group"> <label class="control-label">{{translateText('Name')}}:</label> <div class="controls"> <div class="row-fluid"> <input class="span6" type="text" maxlength="25" value="{{name}}" placeholder="{{translateText('Name')}}" /> {{#if compositeEditError}} <p class="text-error">{{ translateText('Please enter a valid name for the viewport') }}</p> {{/if}} </div> </div> </div>  <div class="control-group"> <label class="control-label">{{translateText('Tags')}}:</label> <div class="controls"> <div class="row-fluid"> <input name="tags" class="span8" id="dewarpDashboardSettings__tags" value="{{_normalized_tags}}" style="display: none;" /> </div> </div> </div>  <div class="control-group"> <label class="control-label">{{translateText('Notes')}}:</label> <div class="controls"> <div class="row-fluid"> <textarea class="span12" id="dewarpDashboardSettings__notes" maxlength="50">{{notes}}</textarea> </div> </div> </div>  <div class="control-group"> <div class="controls"> <div class="row-flouid"> <button on-click="delete" class="btn btn-inverse">{{translateText('Delete Viewport')}}</button> </div> </div> </div> </form> </script>  <script type="text/ractive" id="DistributorUserAccess-template"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{{translateText('Disable User')}}}:</label> <div class="controls"> <div class="row-fluid"> <input type="checkbox" name="optionsRadios" value="option1" checked="{{is_disabled}}"/> </div> </div> </div> <div class="control-group"> <label class="control-label">{{{translateText('Employee ID')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span8"> <input type="text" maxlength="50" value="{{employee_id}}"> </div> </div> </div> </div> <div class="control-group"> <div class="controls"> <button class="ignore btn btn-inverse" title="{{{translateText('remove user from account')}}}" type="button" on-click="@this.delete_user()"> {{{translateText('Delete User')}}} </button> </div> </div> </form> </script>  <script type="text/ractive" id="LocationAddButton-template"> <i on-click="@this.openModal()" class="icon-plus-sign add-icon location-add-button" title="{{translateText('Add Location')}}"></i> </script>  <script id="DeleteLocation-template" type="text/ractive"> <div class="container-fluid"> <div class="widget-content"> <div class="row-fluid"> <div class="span12"> <p> {{translateText("WARNING: About to delete device from location.")}} </p> <p> {{translateText("This will delete the device from the location, if it is a bridge it will also delete all connected cameras from this location.")}} </p> <p> {{translateText("Are you REALLY SURE you want to do this?")}} </p> </div> </div> </div> </div> </script>  <script type="text/ractive" id="LocationDetailMapView-template"> <div class="location-wrapper-map-container"> <div id="CameraMap__map"></div> </div> </script> <script type="text/ractive" id="LocationDetailView-template"> <div class="location-details-row-wrapper"> <div class="row-fluid {{#if show_location_details}}location-details-row{{else}}hidden{{/if}}" > <div class="{{#if total_device_number < 1}}hidden{{else}}content-grid-panel detail-panel{{/if}}"> <div class="locations-dropdown control-group"> <LocationStatistics /> </div> {{#unless map_address}} {{translateText('No Address')}} {{#if user.checkEditLocationGroup()}} <button type="button" class="btn btn-success" on-click="@this.parent.editLocation(current_location)"> <i class="fas fa-plus"></i> {{translateText('Add Address')}} </button> {{/if}} {{/unless}} </div> <div class="content-grid-panel"> {{#if any_camera_location}} <LocationDetailMapView camera_with_location={{any_camera_location}} current_location={{current_location}} /> {{elseif map_address}} <iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?key={{google_maps_api_key}}&q={{map_address}}"> </iframe> {{else}} <div class="empty-state"> <div class="feature-icon-outer"> <div class="feature-icon-inner"> <i class="fas fa-map-marker-alt"></i> </div> </div> {{#unless map_address}} <br /> <br /> {{translateText('No Address')}} <br /> {{#if user.checkEditLocationGroup()}} <button type="button" class="btn btn-success" on-click="@this.parent.editLocation(current_location)"> <i class="fas fa-plus"></i> {{translateText('Add Address')}} </button> {{/if}} {{/unless}} </div> {{/if}} </div> </div> <div class="locations-details-arrow"> <i on-click="@this.toggle('show_location_details')" class="fas {{#show_location_details}}icon-angle-up{{else}}icon-angle-down{{/}}"></i> </div> </div> <div class="row-fluid"> {{#if location_devices.cameras.length || location_devices.bridges.length}} <LocationDeviceTable camera_models="{{location_devices.cameras}}" user="{{user}}" bridge_models="{{location_devices.bridges}}" ui="{{ui}}" current_location="{{current_location}}" /> {{/if}} </div> </script>  <script type="text/ractive" id="LocationDeviceTable-template"> <div class="location-devices"> {{#if ui.view === 'table'}} <LocationSingleListViewComponent location_camera_list="{{camera_models}}" ui="{{ui}}" user="{{user}}" current_location="{{current_location}}" /> {{elseif ui.view === 'grid'}} <LocationSingleGridViewComponent camera_models="{{camera_models}}" ui="{{ui}}" user="{{user}}" current_location="{{current_location}}" /> {{elseif ui.view === 'hierarchy'}} <LocationSingleHierarchyViewComponent camera_models="{{camera_models}}" bridge_models="{{bridge_models}}" ui="{{ui}}" user="{{user}}" current_location="{{current_location}}" /> {{/if}} </div> </script>   <script type="text/ractive" id="LocationGroupModal-template"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" on-click="@this.onClose()">×</button> {{#if is_edit}} <h3>{{translateText('Edit Location')}}</h3> {{else}} <h3>{{translateText('Add New Location')}}</h3> {{/if}} </div> <div class="modal-body"> <div class="locations-header-buttons-wrapper float-right"> <HelpLink data_link="location_main_page"/> </div> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a href="#locations-detail-tab" data-toggle="tab"> {{translateText('Location Details')}} </a> </li> <li> <a href="#location-cameras-tab" data-toggle="tab"> {{#if is_edit || is_transition}} {{translateText('Edit Cameras')}} {{else}} {{translateText('Add Cameras')}} {{/if}} </a> </li> {{#if is_transition}} <li> <a href="#location-devices-tab" data-toggle="tab"> {{translateText('Edit Devices')}} </a> </li> {{/if}} </ul> <div class="tab-content"> <div class="tab-pane active" id="locations-detail-tab" class-is-transition="is_transition && is_edit"> {{! I have no idea what I'm doing with this bootstrap but this seems to work }} <form id="locations-detail-tab-form" class="row-fluid"> <div class="controls controls-row"> <label>{{translateText('Location Name')}}</label> <input type="text" class="span10" data-testid="modal-add-edit-location-form-input-name" required value={{location.name}} > </div> {{! ADDRESS FIELDS }} <div class="controls controls-row"> <label>{{translateText('Street Address')}}</label> <input id="locationModal__street_address" type="text" class="span10" data-testid="modal-add-edit-location-form-input-street-address" value={{location.address.streetAddress}} > </div> <div class="controls controls-row"> <input type="text" class="span10" data-testid="modal-add-edit-location-form-input-street-address-2" value={{location.address.streetAddress2}} > </div> <div class="row-fluid"> <div class="controls controls-row span5"> <label>{{translateText('City')}}</label> <input type="text" class="span12" data-testid="modal-add-edit-location-form-input-city" value={{location.address.city}} > </div> <div class="controls controls-row span6"> <label>{{translateText('State / Province / Region')}}</label> <input type="text" class="span10" data-testid="modal-add-edit-location-form-input-region" value={{location.address.region}} > </div> </div> <div class="row-fluid"> <div class="controls controls-row span5"> <label>{{translateText('ZIP / Postal Code')}}</label> <input type="text" class="span12" data-testid="modal-add-edit-location-form-input-postal-code" value={{location.address.postalCode}} > </div> <div class="controls controls-row span6"> <label>{{translateText('Country')}}</label> <input type="text" class="span10" data-testid="modal-add-edit-location-form-input-country" value={{location.address.country}} > </div> </div> <div class="row-fluid"> <div class="controls"> <label class="checkbox"> <input type="checkbox" data-testid="modal-add-edit-location-form-checkbox-default" checked="{{location.isDefault}}" > {{translateText('Make this the default location for the account')}} </label> </div> </div> {{! END ADDRESS FIELDS }} </form> </div> <div class="tab-pane" id="location-cameras-tab"> <SelectLocationCameras isolated_camera_list="{{isolated_camera_list}}" selected_cameras="{{selected_cameras}}" super_search="{{super_search}}" original_set="{{original_set}}" is_new="{{false}}" hide_existing_cameras="{{hide_existing_cameras}}" hide_label="{{translateText('Hide cameras already in location')}}"> </div> {{#if is_transition}} <div class="tab-pane" id="location-devices-tab"> <SelectLocationDevices isolated_camera_list="{{isolated_camera_list}}" isolated_bridges_list="{{isolated_bridges_list}}" selected_bridges="{{selected_bridges}}" selected_cameras="{{selected_cameras}}" super_search="{{super_search}}" original_set="{{original_set}}" original_set_bridges="{{original_set_bridges}}" is_new="{{false}}" hide_existing_devices="{{hide_existing_devices}}" hide_label="{{translateText('Hide devices already in location')}}"> </div> {{/if}} </div> </div> </div> <div class="modal-footer"> <p class="red">{{error_message}}</p> <button type="button" class="btn btn-warning" on-click="@this.onClose()" data-dismiss="modal" data-testid="modal-add-edit-location-footer-button-cancel" > {{translateText('Cancel')}} </button> <button type="button" class="btn btn-success" on-click="@this.saveLocation()" data-testid="modal-add-edit-location-footer-button-save" > {{translateText('Save')}} </button> </div> </div> </script>   <script type="text/ractive" id="SelectLocationCameras-template"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{translateText('Filter:')}}</label> <div class="controls"> <input type="text" autocomplete="off" maxlength="100" value="{{search_filter}}"> </div> </div> <div class="control-group"> <div class="controls"> {{#unless is_new}} <label class="checkbox"> <input type="checkbox" checked="{{hide_existing_cameras}}">{{hide_label}} </label> {{/unless}} </div> </div> </form> <div id="add-cameras-list"> {{#each super_search.getWorkingSet(isolated_camera_list)}} <div class="row-fluid {{#if shouldHideCamera(this.get('deviceID'), this.get('deviceLocationId'), this.get('deviceType')) }}choose-camera-hidden{{/if}}" on-click="@this.selectRow(this.get('deviceID'))"> <div class="span1 choose-camera-select"> <input type="checkbox" name={{selected_cameras}} value="{{this.get('deviceID')}}" {{#if !currentUser().checkDeviceRead(this) }}disabled{{/if}}> </div> <div class="span2 choose-camera-image"> <img src="/asset/prev/image.jpeg?id={{this.get('deviceID')}}&timestamp=now&asset_class=all" > </div> <div class="span8 choose-camera-filtered"> <p>{{this.get('deviceName')}}</p> {{#each this.getCustomTags().sort()}} <span class="tag"><a> {{this.toLowerCase()}} </a></span> {{/each}} </div> </div> {{/each}} </div> </script>   <script type="text/ractive" id="SelectLocationDevices-template"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">{{translateText('Filter:')}}</label> <div class="controls"> <input type="text" autocomplete="off" maxlength="100" value="{{search_filter}}"> </div> </div> <div class="control-group"> <div class="controls"> {{#unless is_new}} <label class="checkbox"> <input type="checkbox" checked="{{hide_existing_devices}}">{{hide_label}} </label> {{/unless}} </div> </div> </form> <div id="add-devices-list"> <table class="table table-striped"> <thead> <tr> <th style="width: 2%">{{translateText('Selected')}}</th> <th style="width: 30px"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th style="width: 30px"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th>{{translateText('Name')}}</th> </tr> </thead> <tbody> {{#each hierarchy_devices_list}} {{#if !shouldHideDevice(this.bridge.get('deviceID')) && (this.bridge.filter_display || this.bridge.hierarchy_display) }} {{#with bridge}} {{> bridge_row}} {{/with}} {{#each cameras}} {{#with (@index == cameras.length - 1) as last_child, (switches.length > 0) as bridge_with_switches}} {{> camera_row}} {{/with}} {{/each}} {{#each switches}} {{#with (@index == switches.length - 1) as last_parent}} {{> switch_row}} {{/with}} {{#each cameras}} {{#with (@index == cameras.length - 1) as last_child}} {{> camera_row}} {{/with}} {{/each}} {{/each}} {{/if}} {{/each}} </tbody> </table> </div> {{#partial switch_row}} <tr> <td></td> <td class="offset-cell"> <div class="offset-with-line last-cell"></div> </td> <td class="table-device-icon"> <i class="fas fa-server icon-large switch-list-row-icon"></i> </td> <td> {{! NAME COL }} {{managed_switch.name}} </td> </tr> {{/partial}} {{#partial camera_row}} {{#if (shouldHideCamera(this.deviceID)) && (this.filter_display || this.hierarchy_display) && !this.isParentCamera() }} <tr> <td> <div class="text-center"> <input type="checkbox" name={{selected_cameras}} value="{{this.get('deviceID')}}" {{#if !currentUser().checkDeviceRead(this) }}disabled{{/if}}> </div> </td> <td class="{{#if this.level !== 'is_under_switch'}} offset-cell {{/if}} {{#if this.level === 'is_under_bridge' && bridge_with_switches}} offset-with-line {{/if}}"> {{#if bridge_with_switches && this.level === 'is_under_bridge'}} <div class="offset-with-line last-cell"></div> {{/if}} </td> <td class="offset-cell offset-with-line"></td> <td> {{! NAME COL }} {{#if this.deviceParent}} {{! child view camera }} {{this.deviceName}} ({{translateText("View")}}: {{this.deviceChildViewName}}) {{elseif this.deviceType === 'multiview_camera'}} <strong>{{this.deviceName}}</strong> {{else}} {{this.deviceName}} {{/if}} </td> </tr> {{/if}} {{/partial}} {{#partial bridge_row}} <tr data-esn="{{this.deviceID}}"> <td> <div class="text-center"> <input type="checkbox" name={{selected_bridges}} value="{{this.deviceID}}" on-change="@this.selectChildCameras(selected_bridges.includes(this.deviceID), this.deviceCameras)" {{#if !currentUser().checkDeviceRead(this)}}disabled{{/if}}> </div> </td> <td class="table-device-icon"> {{! ICON COL }} {{#if this.health_summary}} <i class="{{bridge_icons[this.health_summary.status]}} icon-large bridge-list-row-icon" title="{{this.health_summary.message}}"></i> {{else}} <i class="far fa-hdd icon-large bridge-list-row-icon"></i> {{/if}} </td> <td></td> <td> {{! NAME COL }} <strong>{{this.deviceName}}</strong> </td> </tr> {{/partial}} </script>   <script type="text/ractive" id="partial-mca-camera-status"> {{#if camera.device_state}} {{#if camera.is_mca_camera_mounted}} <i class="icon-bodycam icon-bodycam-orange big-icon" title="{{translateText('wearable camera volume is mounted')}}"> </i> {{elseif camera.is_status_streaming}} <i class="icon-bodycam icon-bodycam-green big-icon" title="{{translateText('connected wearable camera')}}"> </i> {{elseif !camera.is_status_on}}  <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif !camera.is_status_cloud_registered}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif camera.is_status_password}} <i class="icon-lock red big-icon" title="{{translateText('camera password required')}}"> </i> {{else}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{/if}} {{/if}} </script> <script type="text/ractive" id="LocationSelect-template"> <select class="span12" value="{{selectedLocationId}}" {{#is_disabled }}disabled{{/is_disabled}} data-testid="{{data_test_id}}" > {{#if is_no_location_visible }} <option value=""> {{translateText('No location')}} </option> {{/if}} {{#locations}} <option value="{{this.id}}"> {{this.name}} </option> {{/}} </select> </script>  <script type="text/ractive" id="LocationSingleGridViewComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-facetime-video"></i> {{translateText('Cameras')}} <span class="pull-right"> <div class="devices-view-toggle"> <div> <i class="fas fa-th-large {{#if ui.view === 'grid'}} active{{/if}}" title="{{translateText('view previews')}}" on-click="@this.parent.changeLocationView('grid')"> </i> </div> <div> <i class="fas fa-list-ul {{#if ui.view === 'table'}} active{{/if}}" title="{{translateText('view as list')}}" on-click="@this.parent.changeLocationView('table')"> </i> </div> <div> <i class="icon icon-sitemap {{#if ui.view === 'hierarchy'}} active{{/if}}" title="{{translateText('view as hierarchy table')}}" on-click="@this.parent.changeLocationView('hierarchy')"> </i> </div> </div> </span> <span class="pull-right"> <div class="preview-grid-search"> <div class="minimal-slider" title="{{translateText('preview size')}}" as-slider="'ui.grid_size', ui.slider_start, ui.slider_stop, ui.slider_step"> </div> </div> </span> </header> <div class="widget-content"> <div class="preview-grid"> {{#each devices.cameras}} {{#if filter_display && deviceType !== 'speaker'}} <div class="preview-panel" style="width:calc({{preview_width}}% - 10px);"> <div class="preview-image"> <div class="location-preview" data-esn="{{deviceID}}" as-preview="deviceID, layout_settings"> </div> </div> </div> {{/if}} {{/each}} </div> </div> </div> </script>   <script type="text/ractive" id="LocationSingleHierarchyViewComponent-template"> <div class="widget"> <header class="widget-title"> <i class="icon-hdd"></i> {{translateText('Bridges')}} / <i class="icon-facetime-video"></i> {{translateText('Cameras')}} <span class="pull-right"> <div class="devices-view-toggle"> <div> <i class="fas fa-th-large {{#if ui.view === 'grid'}} active{{/if}}" title="{{translateText('view previews')}}" on-click="@this.parent.changeLocationView('grid')"> </i> </div> <div> <i class="fas fa-list-ul {{#if ui.view === 'table'}} active{{/if}}" title="{{translateText('view as list')}}" on-click="@this.parent.changeLocationView('table')"> </i> </div> <div> <i class="icon icon-sitemap {{#if ui.view === 'hierarchy'}} active{{/if}}" title="{{translateText('view as hierarchy table')}}" on-click="@this.parent.changeLocationView('hierarchy')"> </i> </div> </div> </span> </header> <div class="widget-content"> <table class="table table-striped"> <thead> <tr> <th id='camera-table-status' class="clickable" style="width:3%" on-click="@this.sortBy(@this.available_attributes.STATUS)">{{translateText('Status')}}</th> <th id='camera-table-status-indent'style="width:3%"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th id='camera-table-status-indent'style="width:3%"></th> {{! ICON COL / CAMERA STATUS - no header text }} <th id='camera-table-name' class="clickable" on-click="@this.sortBy(@this.available_attributes.DEVICE_NAME)" style="width:25%">{{translateText('Name')}}</th> <th id='camera-table-tags' class="clickable" on-click="@this.sortBy(@this.available_attributes.TAGS)" style="width:25%">{{translateText('Tags')}}</th> <th style="width:20%; min-width: 200px;"> {{translateText('Actions')}} </th> <th style="width: 1%"></th> </tr> </thead> <tbody> {{#each sorted_hierarchy_devices_list}} {{#with bridge}} {{> bridge_row}} {{/with}} {{#each cameras}} {{#with (@index == cameras.length - 1) as last_child, (switches.length > 0) as bridge_with_switches}} {{> camera_row}} {{/with}} {{/each}} {{#if bridge.filter_display || bridge.hierarchy_display}} {{#each switches}} {{#with (@index == switches.length - 1) as last_parent}} {{> switch_row}} {{/with}} {{#each cameras}} {{#with (@index == cameras.length - 1) as last_child}} {{> camera_row}} {{/with}} {{/each}} {{/each}} {{/if}} {{/each}} {{#if sorted_hierarchy_cameras_list.length > 0}} <tr data-esn="no_bridge" class-children-are-hidden="ui.hide_children_cameras"> <td colspan="6" class="disabled"> <i class="far fa-hdd icon-large header-row-icon"></i> <strong class="text-italic">{{translateText('Bridge Not Assigned to this Location')}}</strong> </td> <td> <button class="btn" on-click="@this.toggleShowDevicesUnderBridge('no_bridge')" title="{{translateText('show/hide children devices')}}"><i class="fas icon-angle-down"></i></button> </td> </tr> {{#each sorted_hierarchy_cameras_list}} {{#with (@index == sorted_hierarchy_cameras_list.length - 1) as last_child}} {{> camera_row}} {{/with}} {{/each}} {{/if}} </tbody> </table> </div> </div> {{#partial switch_row}} <tr data-parent-id="{{managed_switch.bridges.length ? managed_switch.bridges[0] : ''}}"> <td class="offset-cell"> <div class="offset-with-line last-cell"></div> </td> <td class="table-device-status"> {{! STATUS COL }} {{#if managed_switch.state}} {{#if managed_switch.state}} <i class="icon-ok-circle green big-icon" title="{{translateText('switch state')}}"></i> {{else}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('switch offline')}}"></i> {{/if}} {{/if}} </td> <td class="table-device-icon"> <i class="fas fa-server icon-large switch-list-row-icon"></i> </td> <td> {{! NAME COL }} {{managed_switch.name}} </td> <td></td> <td> {{! ACTIONS COL }} {{#if user.checkShowAction() }} <button class="btn" on-click="@this.openSwitchSettings(managed_switch)" title="{{translateText('change switch settings')}}"> <i class="icon-cog"></i> </button> {{/if}} </td> <td></td> </tr> {{/partial}} {{#partial camera_row}} {{#if (this.deviceStatus == 'ATTD') && (this.filter_display || this.hierarchy_display)}} <tr data-esn="{{this.deviceID}}" data-parent-id="{{this.deviceBridges.length && !this.noAccessToBridge ? this.deviceBridges[0][0] : 'no_bridge'}}" class-hidden="this.deviceBridges.length && !this.noAccessToBridge && ui.hide_children_cameras" > <td class="offset-cell {{#if this.level == 'is_under_bridge' && bridge_with_switches}} offset-with-line {{/if}}"> {{#if bridge_with_switches && this.level == 'is_under_bridge'}} <div class="offset-with-line last-cell"></div> {{/if}} </td> <td class="offset-cell offset-with-line"> </td> <td class="table-device-status {{#if this.deviceParent}}offset-cell{{/if}}"> {{! STATUS COL }} {{#if !this.deviceParent}} {{! Parent/regular camera }} {{#with this as camera}} {{#if camera.deviceType === 'mca_camera'}} {{> partial-mca-camera-status}} {{elseif camera.deviceType === 'speaker' }} {{> partial-speaker-status}} {{else}} <div {{#if show_preview_bubble}} class="status-clickable" {{#if camera.deviceType !== 'speaker'}} on-click="@this.showPreview(camera.deviceID, @node)"{{/if}}{{/if}}> {{> partial-camera-status}} </div> {{/if}} {{/with}} {{/if}} </td> <td> {{! NAME COL }} {{#if this.deviceParent}} {{! child view camera }} {{#with this as camera}} <span class="table-device-child-camera-status status-clickable" on-click="@this.showPreview(camera.deviceID, @node, true)"> {{> partial-camera-status}} </span> {{/with}} {{this.deviceName}} ({{translateText("View")}}: {{this.deviceChildViewName}}) {{elseif this.deviceType === 'multiview_camera'}} <strong>{{this.deviceName}}</strong> {{else}} {{this.deviceName}} {{/if}} </td> <td> {{! TAGS COL }} {{#each this.deviceTags.sort()}} {{#unless excluded_tags.indexOf(this.toLowerCase()) !== -1}} <span class="tag"><a href="#/layout_tag/{{this.toLowerCase()}}"> {{this.toLowerCase()}}</a></span> {{/unless}} {{/each}} </td> <td> {{! ACTIONS COL }} {{#if user.checkShowAction() }} {{#if user.checkDeviceRecordedVideoByID(this.deviceID) && this.deviceType != 'multiview_camera' && !this.isLiveViewOnly() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if this.hasEditPermissions() }} {{#if this.isAbleToTalkdown() }} <button type="button" class="btn" on-click="@this.doTalkdown(this)" title="{{translateText('directly talk to speaker')}}"> <i class="icon-microphone" id="{{this.deviceID}}-talkdown-icon" style="display: block;"></i> </button> {{/if}} {{#if this.deviceType === 'multiview_camera' || (user.isCameraDewarpingEnabled() && !!composites && composites.length > 0)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change parent camera settings')}}"> <i class="icon-cogs"></i> </button> {{#if available_child_views}} <button class="btn btn-info btn-small new-child-view-btn" title="{{translateText('New View')}}" on-click="@this.openCameraSettings(camera, 'views')"> <i class="icon-plus"></i> </button> {{/if}} {{elseif this.deviceType === 'speaker' && user.checkSpeakerOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change speaker settings')}}"> <i class="icon-cog"></i> </button> {{elseif user.checkPTZOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettingsWithCustomTab(this, '#csLocationTabLabel', '#csLocation')" title="{{translateText('change camera settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkDeviceVPN(this) && !this.isCloudCamera() && !this.deviceParent && !this.isAnalog()}} <button type="button" on-click="@this.openVPN(this)" {{#if this.deviceType === 'speaker'}} title="{{translateText('open VPN to speaker')}}" {{else}} title="{{translateText('open VPN to camera')}}" {{/if}} > <i class="een-icon-tunnel"></i> </button> {{/if}} {{/if}} {{#if user.checkShowCameraMetricsByID(this.deviceID) && !this.isCloudCamera() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openAnalytics(this)" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkEditLocationGroup() && this.deviceType !== 'speaker'}} <button type="button" class="btn" on-click="@this.deleteDeviceFromLocation(this, current_location)" title="{{translateText('remove camera from location') }}"> <i class="icon-trash"></i> </button> {{/if}} {{/if}} </td> <td></td> </tr> {{/if}} {{/partial}} {{#partial bridge_row}} {{#if this.filter_display || this.hierarchy_display}} <tr data-esn="{{this.deviceID}}" class-children-are-hidden="ui.hide_children_cameras"> <td class="table-device-status"> {{! STATUS COL }} {{#if this.device_state}} {{#if this.is_status_cloud_registered}} <i class="icon-ok-circle green big-icon" title="{{translateText('bridge online')}}"></i> {{else}} <i class="icon-exclamation-sign red big-icon" title="{{translateText('internet offline')}}"></i> {{/if}} {{/if}} </td> <td class="table-device-icon"> {{! ICON COL }} {{#if this.health_summary}} <i class="{{bridge_icons[this.health_summary.status]}} icon-large bridge-list-row-icon" title="{{this.health_summary.message}}"></i> {{else}} <i class="far fa-hdd icon-large bridge-list-row-icon"></i> {{/if}} </td> <td></td> <td class-text-italic="this.deviceNotAttachedToLocation"> {{! NAME COL }} <strong>{{this.deviceName}}</strong> </td> <td class-text-italic="this.deviceNotAttachedToLocation"> {{! SERIAL COL }} {{this.deviceSerial}} </td> <td> {{! ACTIONS COL }} {{#if user.checkShowAction() }} {{#if user.checkBridgeUpdateByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openBridgeSettingsWithCustomTab(this, '#editBridge__locationTabLabel', '#editBridge__location')" title="{{translateText('change bridge location settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkEditLocationGroup() && !this.deviceNotAttachedToLocation}} <button type="button" class="btn" on-click="@this.deleteDeviceFromLocation(this, current_location)" title="{{translateText('remove bridge from location')}}"> <i class="icon-trash"></i> </button> {{/if}} {{/if}} </td> <td> <button class="btn" on-click="@this.toggleShowDevicesUnderBridge(this.deviceID)" title="{{translateText('show/hide children devices')}}"><i class="fas icon-angle-down"></i></button> </td> </tr> {{/if}} {{/partial}} </script>   <script type="text/ractive" id="partial-mca-camera-status"> {{#if camera.device_state}} {{#if camera.is_mca_camera_mounted}} <i class="icon-bodycam icon-bodycam-orange big-icon" title="{{translateText('wearable camera volume is mounted')}}"> </i> {{elseif camera.is_status_streaming}} <i class="icon-bodycam icon-bodycam-green big-icon" title="{{translateText('connected wearable camera')}}"> </i> {{elseif !camera.is_status_on}}  <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif !camera.is_status_cloud_registered}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{elseif camera.is_status_password}} <i class="icon-lock red big-icon" title="{{translateText('camera password required')}}"> </i> {{else}} <i class="icon-bodycam icon-bodycam-black big-icon" title="{{translateText('disconnected wearable camera')}}"> </i> {{/if}} {{/if}} </script> <script type="text/ractive" id="partial-speaker-status"> {{#if camera.deviceExtra && camera.speaker_status === 'REDY'}} <i class="icon-ok-circle green big-icon" title="{{translateText('speaker connected')}}"> </i> {{elseif camera.deviceExtra && camera.speaker_status === 'PASS'}} <i class="icon-exclamation-sign orange big-icon" title="{{translateText('bad password')}}"> </i> {{elseif camera.deviceExtra && camera.speaker_status === 'BUSY'}} <i class="icon-ban-circle orange big-icon" title="{{translateText('device is busy')}}"> </i> {{else}} <i class="icon-remove-circle red big-icon" title="{{translateText('speaker disconnected')}}"> </i> {{/if}} </script>  <script type="text/ractive" id="LocationSingleListViewComponent-template"> <div class="location-list--single-list-view row-fluid"> <div class="widget"> <header class="widget-title"> <i class="icon-facetime-video"></i> {{translateText('Cameras')}} <span class="pull-right"> <div class="devices-view-toggle"> <div> <i class="fas fa-th-large {{#if ui.view === 'grid'}} active{{/if}}" title="{{translateText('view previews')}}" on-click="@this.parent.changeLocationView('grid')"> </i> </div> <div> <i class="fas fa-list-ul {{#if ui.view === 'table'}} active{{/if}}" title="{{translateText('view as list')}}" on-click="@this.parent.changeLocationView('table')"> </i> </div> <div> <i class="icon icon-sitemap {{#if ui.view === 'hierarchy'}} active{{/if}}" title="{{translateText('view as hierarchy table')}}" on-click="@this.parent.changeLocationView('hierarchy')"> </i> </div> </div> </span> </header> <div class="widget-content"> <table class="table table-striped"> <thead> <tr> <th class="clickable" on-click="@this.sortBy(@this.available_attributes.DEVICE_NAME)">{{translateText('Name')}}</th> <th class="clickable" on-click="@this.sortBy(@this.available_attributes.STATUS)">{{translateText('Status')}}</th> <th class="clickable" on-click="@this.sortBy(@this.available_attributes.TAGS)">{{translateText('Tags')}}</th> <th style="width:20%; min-width: 200px;"> {{translateText('Actions')}} </th> </tr> </thead> <tbody> {{#each current_location_camera_list}} {{#if filter_display}} <tr> <td> {{! Name column }} {{deviceName}} </td> <td class="no-wrap"> {{! Status column }} {{#if device_state}} {{#if deviceType !== 'speaker'}} {{#if is_status_streaming}} <div class="camera-status-circle status-ok"></div> {{translateText('Online')}} {{elseif !is_status_on}} <div class="camera-status-circle status-warning"></div> {{#if is_status_bad_analog}} {{translateText('Bad analog signal')}} {{else}} {{translateText('Off')}} {{/if}} {{else}} <div class="camera-status-circle status-bad"></div> {{#if !is_status_cloud_registered}} {{translateText('Internet offline')}} {{elseif is_status_password}} {{translateText('Password required')}} {{else}} {{translateText('Offline')}} {{/if}} {{/if}} {{else}} {{#if speaker_status === 'REDY'}} <div class="camera-status-circle status-ok"></div> {{translateText('Online')}} {{elseif speaker_status === 'PASS'}} <div class="camera-status-circle status-warning"></div> {{translateText('bad password')}} {{elseif speaker_status === 'BUSY'}} <div class="camera-status-circle status-warning"></div> {{translateText('device is busy')}} {{else}} <div class="camera-status-circle status-bad"></div> {{translateText('speaker disconnected')}} {{/if}} {{/if}} {{/if}} </td> <td> {{! Tags column }} {{#each deviceTags.sort()}} {{#unless excluded_tags.indexOf(this.toLowerCase()) !== -1}} <span class="tag"><a href="#/layout_tag/{{this.toLowerCase()}}"> {{this.toLowerCase()}}</a></span> {{/unless}} {{/each}} </td> <td> {{! ACTIONS COL }} {{#if user.checkShowAction() }} {{#if user.checkDeviceRecordedVideoByID(this.deviceID) && this.deviceType != 'multiview_camera' && !this.isLiveViewOnly() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openHistory(this)" title="{{translateText('view camera history')}}"> <i class="icon-time"></i> </button> {{/if}} {{#if this.hasEditPermissions() }} {{#if this.isAbleToTalkdown() }} <button type="button" class="btn" on-click="@this.doTalkdown(this)" title="{{translateText('directly talk to speaker')}}"> <i class="icon-microphone" id="{{this.deviceID}}-talkdown-icon" style="display: block;"></i> </button> {{/if}} {{#if this.deviceType === 'multiview_camera' || (user.isCameraDewarpingEnabled() && !!composites && composites.length > 0)}} <button type="button" class="btn" on-click="@this.openCameraSettingsWithCustomTab(this, '#csLocationTabLabel', '#csLocation')" title="{{translateText('change parent camera settings')}}"> <i class="icon-cogs"></i> </button> {{#if available_child_views}} <button class="btn btn-info btn-small new-child-view-btn" title="{{translateText('New View')}}" on-click="@this.openCameraSettings(camera, 'views')"> <i class="icon-plus"></i> </button> {{/if}} {{elseif this.deviceType === 'speaker' && user.checkSpeakerOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettings(this)" title="{{translateText('change speaker settings')}}"> <i class="icon-cog"></i> </button> {{elseif user.checkPTZOnlyShowSettingsByID(this.deviceID)}} <button type="button" class="btn" on-click="@this.openCameraSettingsWithCustomTab(this, '#csLocationTabLabel', '#csLocation')" title="{{translateText('change camera settings')}}"> <i class="icon-cog"></i> </button> {{/if}} {{#if user.checkDeviceVPN(this) && !this.isCloudCamera() && !this.deviceParent && !this.isAnalog()}} <button type="button" on-click="@this.openVPN(this)" {{#if this.deviceType === 'speaker'}} title="{{translateText('open VPN to speaker')}}" {{else}} title="{{translateText('open VPN to camera')}}" {{/if}} > <i class="een-icon-tunnel"></i> </button> {{/if}} {{/if}} {{#if user.checkShowCameraMetricsByID(this.deviceID) && !this.isCloudCamera() && this.deviceType != 'speaker'}} <button type="button" class="btn" on-click="@this.openAnalytics(this)" title="{{translateText('open analytics graphs') }}"> <i class="icon-bar-chart"></i> </button> {{/if}} {{#if user.checkEditLocationGroup() && this.deviceType !== 'speaker'}} <button type="button" class="btn" on-click="@this.deleteDeviceFromLocation(this, current_location)" title="{{translateText('remove camera from location') }}"> <i class="icon-trash"></i> </button> {{/if}} {{/if}} </td> </tr> {{/if}} {{/each}} </tbody> </table> </div> <footer class="widget-title"> <div class="pull-right"> <select id="location-list--page-size-select" class="page-size-select pull-right" value="{{size}}" on-change="@this.backToFirstPage" > <option>10</option> <option>25</option> <option>50</option> <option>75</option> <option>100</option> </select> <label for="location-list--page-size-select" class="page-size-select--label pull-left">{{ translateText('Page size') }}:</label> </div> <span class="pagination-bar--wrapper"> <PaginationBar page={{ page }} size={{ size }} quantity={{ sorted_location_camera_list.length }}/> </span> </footer> </div> </div> </script>   <script type="text/ractive" id="LocationsManage-template"> <article class="location-list row-fluid"> <div class="widget"> <header class="widget-title"> <i class="icon-sitemap"></i> <span>{{ translateText('Locations') }}</span> (<span>{{ locations_length }}</span> {{ translateText('Total') }}) {{#if user.checkEditLocationGroup()}} <i class="icon-plus-sign add-icon pull-right orange add-location" on-click="@this.addLocation()" title="{{translateText('Add Location')}}" data-testid="page-locations-header-button-add-location" ></i> {{/if}} <div class="pull-right"> <div class="pull-left"> <input class="pull-left" maxlength="100" value="{{ search_phrase }}" placeholder="{{ translateText('Search') }}" autocomplete="off" type="text" > </div> </div> <span class="pull-right pagination-bar--wrapper"> <PaginationBar page={{ page }} size={{ size }} quantity={{ locations_length }}/> </span> </header> <div class="widget-content clearfix"> <table class="table table-striped"> <thead> <tr> <th class="name-col clickable" on-click="@this.sortBy(@this.available_attributes.NAME)">{{ translateText('Name') }}</th> <th class="address-col clickable" on-click="@this.sortBy(@this.available_attributes.STREET_ADDRESS)">{{translateText('Address')}}</th> <th class="cameras-col clickable" on-click="@this.sortBy(@this.available_attributes.CAMERAS)">{{translateText('Cameras')}}</th> <th class="bridges-col clickable" on-click="@this.sortBy(@this.available_attributes.BRIDGES)">{{translateText('Bridges')}}</th> <th class="actions-col">{{ translateText('Actions') }}</th> </tr> </thead> <tbody> {{#current_list}} <tr> <td><a href="#" on-click="@this.viewLocation(this)">{{.name}}</a></td> <td> {{#if @this.isSomeFieldFilled(this.address)}} {{#if this.address.streetAddress}} <div>{{this.address.streetAddress}}</div> {{/if}} {{#if this.address.streetAddress2}} <div>{{this.address.streetAddress2}}</div> {{/if}} {{#if this.address.city || this.address.region || this.address.postalCode}} <div> {{this.address.city}}{{#if this.address.city && this.address.region}}, {{/if}}{{this.address.region}} {{this.address.postalCode}} </div> {{/if}} {{#if this.address.country}} <div>{{this.address.country}}</div> {{/if}} {{else}} <i>({{translateText('No address')}})</i> {{/if}} </td> <td> {{#with @this.aggregateDeviceStatuses(this.cameras, 'camera') as status}} {{#if status.online || status.offline || status.off}} <a href="#" on-click="@this.viewLocation(this, 'table')"> <span class="count green" {{^status.online}}hidden{{/}}>{{status.online}}</span> <span class="count red" {{^status.offline}}hidden{{/}}>{{status.offline}}</span> <span class="count orange" {{^status.off}}hidden{{/}}>{{status.off}}</span> </a> {{else}} <i>({{translateText('No Cameras')}})</i> {{/if}} {{/with}} </td> <td> {{#with @this.aggregateDeviceStatuses(this.bridges, 'bridge') as status}} {{#if status.online || status.offline || status.off}} <a href="#" on-click="@this.viewLocation(this, 'hierarchy')"> <span class="count green" {{^status.online}}hidden{{/}}>{{status.online}}</span> <span class="count red" {{^status.offline}}hidden{{/}}>{{status.offline}}</span> <span class="count orange" {{^status.off}}hidden{{/}}>{{status.off}}</span> </a> {{else}} <i>({{translateText('No Bridges')}})</i> {{/if}} {{/with}} </td> <td> <button type="button" on-click="@this.viewLocation(this)"> <i class="fas fa-eye"></i> </button> {{#if user.checkEditLocationGroup()}} <button type="button" on-click="@this.editLocation(this)" title="{{translateText('edit location')}}"> <i class="icon-cog"></i> </button> <button type="button" on-click="@this.deleteLocation(this.id)" title="{{translateText('delete location')}}"> <i class="icon-trash"></i> </button> {{/if}} </td> </tr> {{/current_list}} </tbody> </table> </div> <footer class="widget-title"> {{#if user.checkEditLocationGroup()}} <i class="icon-plus-sign add-icon pull-right orange add-location" on-click="@this.addLocation()" title="{{translateText('Add Location')}}" data-testid="page-locations-footer-button-add-location" ></i> {{/if}} <div class="pull-right"> <select id="location-list--page-size-select" class="page-size-select pull-right" value="{{size}}" on-change="backToFirstPage" > <option>10</option> <option>25</option> <option>50</option> <option>75</option> <option>100</option> </select> <label for="location-list--page-size-select" class="page-size-select--label pull-left">{{ translateText('Page size') }}:</label> </div> <span class="pagination-bar--wrapper"> <PaginationBar page={{ page }} size={{ size }} quantity={{ locations_length }}/> </span> </footer> </div> </article> </script>   <script type="text/ractive" id="LocationStatistics-template"> <div id="location-statistics-widget-collapse" class="widget-content clearfix location-statistics-summary-container"> <div class="location-statistics-chart-item {{#if bridge_count < 1}}hidden{{/if}}"> <div class="location-statistics-chart"> <div id="location-statistics-bridge-summary">{{! highcharts element}}</div> </div> <div class="location-statistics-chart-label">{{bridge_summary_label}}</div> </div> <div class="location-statistics-chart-item {{#if camera_count < 1}}hidden{{/if}}"> <div class="location-statistics-chart"> <div id="location-statistics-camera-summary">{{! highcharts element}}</div> </div> <div class="location-statistics-chart-label">{{camera_summary_label}}</div> </div> <div class="location-statistics-chart-item {{#if shared_camera_count < 1}}hidden{{/if}}"> <div class="location-statistics-chart"> <div id="location-statistics-camera-shared-summary">{{! highcharts element}}</div> </div> <div class="location-statistics-chart-label">{{shared_camera_summary_label}}</div> </div> </div> </script>   <script type="text/ractive" id="LocationDash-template"> {{#if locations.length > 0}} <div class="content-header"> <div class="locations-header-left"> {{#if current_location}} <h4 on-click="@this.manageLocations()"> <a > {{translateText('Locations')}} </a> </h4> <h4 class="separator"> / </h4> <select value="{{location_selector_idx}}" class="span4 location-select"> {{#each locations}} <option value="{{@index}}"> {{this.name}} {{#if this.address.city || this.address.street_address || this.address.region || this.address.postal_code || this.address.country}} - {{/if}} {{this.address.street_address}} {{#if this.address.city || this.address.region || this.address.postal_code}} {{this.address.city}}{{#if this.address.city && this.address.region}},{{/if}} {{this.address.region}} {{this.address.postal_code}}{{#if this.address.country}},{{/if}} {{/if}} {{this.address.country}} </option> {{/each}} </select> {{/if}} {{^current_location}} <h4> {{translateText('Locations')}} </h4> {{/current_location}} </div> <div class="locations-header-buttons-wrapper"> {{#if current_location}} <HelpLink data_link="location_individual_page"/> {{#if user.checkEditLocationGroup()}} <button type="button" on-click="@this.editLocation(current_location)" class="btn btn-info"> <i class="icon-cog"></i> </button> {{/if}} {{else}} <HelpLink data_link="location_main_page"/> {{/if}} </div> </div> {{#if current_location}} <LocationDetailView current_location={{current_location}} ui="{{ui}}" /> {{else}} <LocationsManage locations="{{locations}}" user="{{user}}" page="{{page}}" size="{{size}}" search_phrase="{{search_phrase}}" /> {{/if}} {{elseif locations !== null}} <div class="content-grid-panel empty-state"> <div class="feature-icon-outer"> <div class="feature-icon-inner"> <i class="fas fa-map-marker-alt"></i> </div> </div> <h3>{{translateText('Locations')}}</h3> <p> {{translateText('Group devices by location to view a custom, filtered dashboard.')}} </p> <p> {{! TODO: uncomment when help file is added }}  </p> {{#if user.checkEditLocationGroup()}} <button type="button" class="btn btn-success" on-click="@this.addLocation()"> <i class="fas fa-plus"></i> {{translateText('Add Location')}} </button> {{/if}} </div> {{/if}} </script>   <script type="text/ractive" id="MassEditForm-template"> <form class="mass-edit-form"> {{#if device_ids.length > 0}} <label>{{main_label}}</label> <div class='main-row'> <select class="row-elem" value="{{ selectedSetting }}"> {{#each settings}} <option value="{{name}}">{{getLabel(name)}}</option> {{/each}} </select> {{>field_input current_form_control}} </div> <div class='main-row'> {{#if additional_field && current_form_control.control_value.additional_field}} {{>field_input additional_field}} {{/if}} </div> {{else}} <label>{{translateText('No devices have been selected')}}</label> {{/if}} {{#partial field_input}} {{#if type === 'text_input'}} <input class="row-elem" type="text" value="{{control_value}}"> {{elseif type === 'textarea'}} <textarea class="row-elem row-textarea" value="{{control_value}}"> {{elseif type === 'select'}} <select class="row-elem" value="{{control_value}}"> {{#each options}} {{#if typeof . === 'object' && . !== null}} <option value="{{.}}">{{getLabel(.name)}}</option> {{else}} <option value="{{.}}">{{getLabel(.)}}</option> {{/if}} {{/each}} </select> {{#if control_value.timepicker}} <div class="row-slider" as-timeRangeSlider="init_time_start_minutes, init_time_end_minutes, 'time_start', 'time_end'"> </div> {{elseif control_value.range && bandwidth_settings.indexOf(name) >= 0}} <div class="row-slider" as-bandwidthSlider="control_value.name, control_value.range, 'bandwidth_slider_value'"> <div> {{/if}} {{elseif type === 'checkbox'}} <input class="row-elem" type="checkbox" checked="{{control_value}}"> {{elseif type === 'list'}} <div class="row-elem"> <input as-tagsInput="{}, @keypath + '.control_value'" value=""> </div> {{elseif type === 'slider'}} <div class="row-slider" as-simpleSlider="init_slider_value, range, step_values[name], @keypath + '.control_value'"> {{/if}} {{/partial}} </form> </script>   <script type="text/ractive" id="MassEditList-template"> <div class="container-fluid"> <article class="row-fluid"> <div class="widget mass-edit-list"> <header class="widget-title"> {{#if device_type === 'camera'}} <i class="icon-facetime-video"></i> {{{translateText('Mass Edit Cameras')}}} {{else}} <i class="icon-hdd"></i> {{{translateText('Mass Edit Bridges')}}} {{/if}} <span class="pull-right"> <button type="button" on-click="mass_edit" class="btn btn-info">{{{translateText('Mass Edit')}}}</button> <button type="button" on-click="return" class="btn btn-warning">{{{translateText('Cancel')}}}</button> </span> </header> <div class="widget-content"> <table class="table table-striped"> <thead> <tr> <th class='status-header'>{{{translateText('Status')}}}</th> <th class='status-indent-header'></th> {{! ICON COL / CAMERA STATUS - no header text }} <th class='name-header'>{{{translateText('Name')}}}</th> <th class='tags-header'>{{{translateText('Tags')}}}</th> <th class='location-header'> <span on-click="@this.set('ui.show_location', false)" class="device-location-col {{#if !ui.show_location}}device-location-col-selected{{/if}}"> {{{translateText('Location')}}} </span> / <span on-click="@this.set('ui.show_location', true)" class="device-location-col {{#if ui.show_location}}device-location-col-selected{{/if}}"> {{{translateText('Address')}}} </span> </th> <th class='actions-header'> <span>{{{translateText('Selection')}}}</span> <button type="button" class="btn btn-mini select-all-btn" on-click="@this.toggleAllSelection(show_select_all)"> {{#if show_select_all}} {{{translateText('Select All')}}} {{else}} {{{translateText('Unselect All')}}} {{/if}} </button> </th> </tr> </thead> <tbody> {{#each devices}} {{#if device_type === 'bridge' || cameras.length}} {{#with bridge}} {{> bridge_row}} {{/with}} {{/if}} {{#if device_type === 'camera'}} {{#each cameras}} {{#with (@index == cameras.length - 1) as last_parent, child_view_cameras.length as children}} {{#with composites as composites}} {{#with camera}} {{#if !this.deviceShare}} {{> camera_row}} {{#each child_view_cameras}} {{#with (@index == child_view_cameras.length - 1) as last_child}} {{> camera_row}} {{/with}} {{/each}} {{/if}} {{/with}} {{/with}} {{/with}} {{/each}} {{/if}} {{/each}} {{#if device_type === 'camera'}} {{#grouped_shares:account}} {{#with this as shared_cameras}} {{#if isAnyDeviceVisible(shared_cameras)}} <tr> <td colspan="6"> <i class="icon-user header-row-icon"></i> <strong>{{{translateText('Shared from')}}}: {{account}}</strong> </td> </tr> {{/if}} {{#each shared_cameras}} {{#with (@index == shared_cameras.length - 1) as last_parent, child_view_cameras.length as children}} {{#with composites as composites}} {{#with this as camera}} {{> camera_row}} {{#each child_view_cameras}} {{#with (@index == child_view_cameras.length - 1) as last_child}} {{> camera_row}} {{/with}} {{/each}} {{/with}} {{/with}} {{/with}} {{/each}} {{/with}} {{/grouped_shares}} {{/if}} </tbody> </table> </div> </div> </article> </div> {{#partial bridge_row}} {{#if this.filter_display || this.hierarchy_display}} <tr data-esn="{{this.deviceID}}"> <td class="table-device-status"> {{! STATUS COL }} {{#if this.device_state}} {{#if this.is_status_cloud_registered}} <i class="icon-ok-circle green big-icon" title="{{{translateText('bridge online')}}}"></i> {{else}} <i class="icon-exclamation-sign red big-icon" title="{{{translateText('internet offline')}}}"></i> {{/if}} {{/if}} </td> <td> {{! ICON COL }} {{#if this.health_summary}} <i class="{{ui.bridge_icons[this.health_summary.status]}} icon-large bridge-list-row-icon" title="{{this.health_summary.message}}"> </i> {{else}} <i class="far fa-hdd icon-large bridge-list-row-icon"></i> {{/if}} </td> <td> {{! NAME COL }} <strong>{{this.deviceName}}</strong> ({{this.attached_cameras_message}}{{this.available_cameras_message}}) <div class="red">{{this.new_bridge_warning}}</div> </td> <td> {{! SERIAL COL }} {{this.deviceSerial}} </td> <td> {{! LOCATION COL}} {{#if ui.show_location}} {{#if location_grouping}} {{this.deviceExtra.location_address}} {{else}} {{this.deviceLocation[4]}} {{/if}} {{else}} {{#if location_grouping}} {{this.deviceExtra.location_name}} {{else}} {{this.deviceLocation[6]}} {{! Location name}} {{/if}} {{/if}} </td> <td> {{! SELECTION COL }} {{#if device_type === 'bridge'}} <input checked="{{this.get('deviceID') in selected_devices}}" class="mass-edit-selection" type="checkbox" on-change="['selectionChange', this]"> {{/if}} </td> </tr> {{/if}} {{/partial}} {{#partial camera_row}} {{#if (this.deviceStatus == 'ATTD') && (this.filter_display || this.hierarchy_display)}} <tr data-esn="{{this.deviceID}}"> {{! TODO: Fix this stupid line logic/css}} {{#if ui.bridges_present}} {{! show connecting line from cameras to bridge }} {{#with (last_parent && ((this.deviceParent && last_child))) as last_cell}} <td class="offset-cell {{#if !last_cell}} offset-with-line {{/if}}"> {{#if last_cell}} <div class="offset-with-line last-cell"></div> {{/if}} </td> {{/with}} {{/if}} <td class="{{#if this.deviceParent}}offset-cell{{/if}}"> {{! STATUS COL }} {{#if !this.deviceParent}} {{! Parent/regular camera }} {{#with this as camera}} {{#if camera.deviceType === 'mca_camera'}} {{> partial-mca-camera-status}} {{else}} <div {{#if ui.show_preview_bubble}} class="status-clickable" on-click="@this.showPreview(camera.deviceID, @node)" {{/if}}> {{> partial-camera-status}} </div> {{/if}} {{/with}} {{/if}} </td> {{#if !ui.bridges_present}} {{! offset table cells when there are no bridges }} <td></td> {{/if}} <td> {{! NAME COL }} {{#if this.deviceParent}} {{! child view camera }} {{#with this as camera}} <span class="table-device-child-camera-status status-clickable" on-click="@this.showPreview(camera.deviceID, @node, true)"> {{> partial-camera-status}} </span> {{/with}} {{this.deviceName}} ({{translateText("View")}}: {{this.deviceChildViewName}}) {{elseif this.deviceType === 'multiview_camera'}} <strong>{{this.deviceName}}</strong> {{else}} {{this.deviceName}} {{/if}} </td> <td> {{! TAGS COL }} {{#each this.deviceTags.sort()}} {{#unless excluded_tags.indexOf(this.toLowerCase()) !== -1}} <span class="tag"><a href="#/layout_tag/{{this.toLowerCase()}}"> {{this.toLowerCase()}}</a></span> {{/unless}} {{/each}} </td> <td> {{! LOCATION COL}} {{#if ui.show_location}} {{#if location_grouping}} {{this.deviceExtra.location_address}} {{else}} {{this.deviceLocation[4]}} {{/if}} {{else}} {{#if location_grouping}} {{this.deviceExtra.location_name}} {{else}} {{this.deviceLocation[6]}} {{! Location name}} {{/if}} {{/if}} </td> <td> {{! SELECTION COL }} <input checked="{{this.get('deviceID') in selected_devices}}" class="mass-edit-selection" type="checkbox" on-change="['selectionChange', this]"> </td> </tr> {{/if}} {{/partial}} </script>   <script type="text/ractive" id="Modals-GenericModal-template"> <div class="modal-loading-wrapper" style="display: {{#loading}}block{{else}}none{{/}};"> <div class="modal-loading-background"></div> <div class="modal-loading-indicator">Loading please wait...</div> </div> <div class="modal-header"> <h3>{{title}}</h3> </div> <div class="modal-body"> <# body /> </div> <div class="modal-footer"> <div class="message {{footer_class}} {{^footer_show}}hidden{{/}}">{{footer_label}}</div> <button type="button" class="btn {{cancel_class}} {{^cancel_show}}hidden{{/}}" on-click="cancel">{{cancel_label}}</button> <button type="button" class="btn {{apply_class}} {{^apply_show}}hidden{{/}}" on-click="apply">{{apply_label}}</button> <button type="button" class="btn {{commit_class}} {{^commit_show}}hidden{{/}}" on-click="commit">{{commit_label}}</button> </div> </script> <script type="text/ractive" id="Modals-WarningModal-template"> </script> <script type="text/ractive" id="PermissionsSection-template"> <div class="permissions accordion" id="accordion{{section_id}}" as-collapse> <div class="class permissions section accordion-group"> <div class="permissions section-heading accordion-heading" data-toggle="collapse" href="#collapse{{section_id}}"> <div class="permissions section-heading-body"> <div class="permissions custom-checkbox"> <input id="root{{section_id}}" class="root-checkbox" type="checkbox"> <label on-click="rootClick" for="root{{section_id}}">{{{root.name}}}</label> </div> <i class="permissions toggle-icon accordion-toggle fas {{toggle_icon_class}}" data-toggle="collapse" href="#collapse{{section_id}}"> </i> </div> <div class="permissions section-message description {{section_msg_class}}"> <span id="section{{section_id}}-msg" class="text-success">{{{section_msg}}}</span> </div> </div> <div id="collapse{{section_id}}" class="accordion-body collapse"> <div class="permissions section-inner accordion-inner"> {{#permissions_structure}} {{>permission_list}} {{/permissions_structure}} {{#partial permission_list}} <ul class="permissions sub-ul"> {{#permissions}} {{>permission_list_items}} {{/permissions}} </ul> {{/partial}} {{#partial permission_list_items}} <li> <div class="permissions custom-checkbox"> <input on-change="permChange" type="checkbox" id="{{this.name}}" checked="{{~/section_permissions[this.name]}}"> <label for="{{this.name}}">{{{permission_details[this.name].label}}}</label> </div> <div class="permissions description">{{{permission_details[this.name].description}}}</div> <p class="permissions description text-success">{{~/permission_msgs[this.name]}}</p> </li> {{#if this.permissions}} {{>permission_list}} {{/if}} {{/partial}} </div> </div> </div> </div> </script> <script type="text/ractive" id="UserPermissions-template"> {{#if has_role_enabled}} <div class="alert-permissions alert alert-warning"> <i class="alert-permissions__icon icon-exclamation-sign"></i> <span class="alert-permissions__content">{{translateText('Roles are enabled. Use the')}} <span class="alert-permissions__link" on-click="@this.openNewWebapp()">{{translateText('enhanced web interface')}}</span> {{translateText('to manage permissions')}}.</span> </div> {{else}} {{#if current_user.get('is_account_superuser') || (!current_user.account.get('is_master') && current_user.get('is_edit_admin_users'))}} <div class="permissions custom-checkbox"> <input on-change="adminChange" id="is_account_superuser" class="root-checkbox" type="checkbox" checked={{is_account_superuser}}> <label for="is_account_superuser">{{{permission_details.is_account_superuser.label}}}</label> <div class="permissions description"> {{{permission_details.is_account_superuser.description}}} </div> </div> <hr class="permissions separator"> {{/if}} {{#available_sections:i}} <PermissionsSectionComponent user_permissions="{{@this.get('usr_perms')}}" permission_details="{{@this.get('permission_details')}}" root="{{root}}" section_id="{{i}}" permissions_structure="{{tree}}"/> {{/available_sections}} {{/if}} </script> <script type="text/ractive" id="AddReseller-template"> <ResellerDetails is_new_reseller="true"/> </script>  <script type="text/ractive" id="ContactInfoView-template"> <div class="control-group"> <label class="control-label"> {{title}}: </label> <div class="controls"> <div class="row-fluid control-group"> <div class="span7"> <input type="email" maxlength="60" value="{{contact_email}}" placeholder="{{translateText('Email')}}" required> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{contact_first_name}}" placeholder="{{translateText('First Name')}}" required> </div> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{contact_last_name}}" placeholder="{{translateText('Last Name')}}" required> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input value="{{contact_phone}}" class="span12" maxlength="255" type="tel" placeholder="{{translateText('Phone')}}" {{#if is_billing}}required{{/if}} > </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span12" maxlength="60" value="{{contact_address1}}" placeholder="{{translateText('Address')}} 1" {{#if is_billing}}required{{/if}}> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <input type="text" class="span12" maxlength="60" value="{{contact_address2}}" placeholder="{{translateText('Address')}} 2"> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{contact_city}}" placeholder="{{translateText('City')}}" {{#if is_billing}}required{{/if}}> </div> <div class="span6"> <div class="span12 bfh-selectbox bfh-states" data-country="{{title_without_spacebars}}add-reseller-country" data-state="{{contact_state}}"> <input type="hidden" id="{{title_without_spacebars}}add-reseller-state-value"> <a class="bfh-selectbox-toggle span12" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="{{contact_state}}"> </span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> <div class="row-fluid control-group"> <div class="span12"> <div class="span6"> <input type="text" class="span12" value="{{contact_postal_code}}" maxlength="60" placeholder="{{translateText('ZIP / Postal Code')}}" {{#if is_billing}}required{{/if}}> </div> <div class="span6"> <div id="{{title_without_spacebars}}add-reseller-country" class="span12 bfh-selectbox bfh-countries" data-country="{{contact_country}}"> <input type="hidden" id="{{title_without_spacebars}}add-reseller-country-value"> <a class="span12 bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#"> <span class="bfh-selectbox-option input-medium" data-option="{{contact_country}}"> </span> <b class="caret"></b> </a> <div class="bfh-selectbox-options"> <div role="listbox"> <ul role="option"> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </script> <script type="text/ractive" id="EditReseller-template"> <div id="edit-reseller-details"></div> </script>  <script type="text/ractive" id="ResellerList-template"> <div class="container-fluid reseller-list"> <article class="row-fluid"> <div class="widget"> <header class="widget-title"> <i class="icon-sitemap"></i> <span>{{ translateText('Reseller Accounts') }}</span> (<span>{{ reseller_quantity }}</span> {{ translateText('Total') }}) {{#if is_edit_distributor}} <button type="button" on-click="@this.addReseller()" class="btn btn-success pull-right add-reseller"> <i class="fas fa-plus"></i> {{ translateText('Add Reseller') }} </button> {{/if}} <div class="pull-right"> <div class="pull-left"> <input class="pull-left" maxlength="100" value="{{ search_phrase }}" placeholder="{{ translateText('Search') }}" autocomplete="off" type="text"> </div> </div> {{#if reseller_quantity > size}} <span class="pull-right resellers-pag-bar"> <PaginationBar page={{ page }} size={{ size }} quantity={{ reseller_quantity }}/> </span> {{/if}} </header> <div class="widget-content clearfix"> <table class="table table-striped"> <thead> <tr> <th class="name-col">{{ translateText('Reseller Name') }}</th> <th class="status-col">{{ translateText('Status') }}</th> <th class="actions-col">{{ translateText('Actions') }}</th> </tr> </thead> <tbody> {{#current_list}} <ResellerListItem reseller="{{ . }}" is_edit_distributor="{{ is_edit_distributor }}"/> {{/current_list}} </tbody> </table> </div> <footer class="widget-title"> {{#if is_edit_distributor}} <button type="button" on-click="@this.addReseller()" class="btn btn-success pull-right add-reseller"> <i class="fas fa-plus"></i> {{ translateText('Add Reseller') }} </button> {{/if}} {{#if reseller_quantity > size}} <span class="resellers-pag-bar"> <PaginationBar page={{ page }} size={{ size }} quantity={{ reseller_quantity }}/> </span> {{/if}} </footer> </div> </article> </div> </script>   <script type="text/ractive" id="ResellerListItem-template"> <tr> <td>{{ reseller.name }}</td> <td>{{ status }}</td> <td class="actions-column"> {{#if is_edit_distributor}} <button class="account-edit" on-click="@this.editReseller()" title="{{ translateText('change reseller settings') }}"> <i class="icon-cog"></i> </button> {{/if}} {{#if !reseller.is_active}} <button title="{{ translateText('re-send confirmation email') }}" on-click="@this.resendEmail()"><i class="icon-envelope"></i></button> {{/if}} </td> </tr> </script>  <script type="text/ractive" id="ResellerDetails-template"> <form class="form-horizontal reseller-details"> <div class="control-group"> <label class="control-label">{{translateText('Reseller Name')}}:</label> <div class="controls"> <div class="control-group"> <input type="text" value="{{name}}" maxlength="60" autocomplete="off" placeholder="{{translateText('Reseller Name')}}*" required> </div> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Reseller ID')}}:</label> <div class="controls"> <div class="control-group"> <input type="text" value="{{reseller_id}}" maxlength="60" autocomplete="off" placeholder="{{translateText('Reseller ID')}}"> </div> </div> </div> {{#if is_new_reseller}} <div class="control-group"> <label class="control-label">{{translateText('Region')}}:</label> <div class="controls"> <div class="control-group"> <select type="text" value="{{region}}" required> <option value="USA">{{translateText('United States')}}</option> <option value="Canada">{{translateText('Canada')}}</option> <option value="EU">{{translateText('Europe')}}</option> <option value="APAC">{{translateText('Asia Pacific')}}</option> <option value="UK">{{translateText('United Kingdom')}}</option> </select> </div> </div> </div> <div class="control-group"> <label class="control-label">{{translateText('Admin User')}}:</label> <div class="controls"> <div class="row-fluid control-group"> <div class="span7"> <input type="email" maxlength="60" value="{{user_email}}" placeholder="{{translateText('Email')}}{{^is_new_reseller}}*{{/is_new_reseller}}" required> </div> </div> <div class="row-fluid control-group" {{#if !user_valid_email}}hidden{{/if}}> <div class="span12"> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{user_first_name}}" placeholder="{{translateText('First Name')}}*" required> </div> <div class="span6"> <input type="text" class="span12" maxlength="60" value="{{user_last_name}}" placeholder="{{translateText('Last Name')}}*" required> </div> </div> </div> <p class="reseller-info">{{translateText('An Admin User can only be created during Reseller account creation.')}}</p> </div> </div> {{/if}} {{#if is_enabled_edition && distributor_available_editions}} <div class="control-group"> <label class="control-label">{{translateText('Editions')}}:</label> <div class="controls"> <div class="control-group"> <select as-multiSelect="available_edition_ids,'available_edition_ids'" type="text" multiple="multiple" required > {{#each distributor_available_editions}} <option value="{{.id}}">{{.name}}</option> {{/each}} </select> </div> </div> </div> {{/if}} {{#if is_enabled_L2PP_billing && is_new_reseller}} <ul id="reseller-details--tabs" class="nav nav-tabs"> <li id="tab__contact-info" class="active"> <a href="#tab-content__contact-info" data-toggle="tab">{{translateText('Contact Info')}}</a> </li> <li id="tab__billing_info"> <a href="#tab-content__billing-info" data-toggle="tab">{{translateText('Billing Info')}}</a> </li> </ul> <div class="tab-content" id="masterAccountSecurity-panes"> <div class="tab-pane active" id="tab-content__contact-info"> <div id="contact_info_component">  </div> </div> <div class="tab-pane" id="tab-content__billing-info"> <div id="billing_contact_info_component">  </div> </div> </div> {{else}} <div id="contact_info_component">  </div> {{/if}} </form> </script> <script type="text/ractive" id="AccountAccess-template"> <HelpLink class="pull-right" data_link="user_settings_non_admin_access"/> {{#if is_admin}} <p>{{{translateText('Admins always have access to all accounts.')}}}</p> {{else}} <div class="row-fluid"> <div class="span11"> <p class="span10">{{{translateText("You can control this user's access to individual accounts.")}}}</p> <div class="pull-right"> <p class="access-menu-label {{#if !is_allowed_to_grant_all_accounts}}text-dimmed{{/if}}"> {{{translateText('All')}}} </p> <input type="checkbox" name="All Accounts" class="access-checkbox" checked="{{is_all_items_access}}" {{#if !is_allowed_to_grant_all_accounts}}disabled{{/if}}> </div> </div> </div> <div class="row-fluid"> <div class="span5"> <p class="access-menu-label">{{{translateText('No Access')}}}</p> </div> <div class="span5 offset1"> <p class="access-menu-label">{{{translateText('Access')}}}</p> {{^is_new_user}} <p class="access-menu-label pull-right">{{{translateText('Temporary Access')}}}</p> {{/}} </div> <div class="red {{#if !is_warning_visible}}hide{{/if}}" id="account_all_access_msg"> <p>{{{translateText("WARNING: About to grant access of ALL accounts to this user. Any accounts added in the future will also automatically be included.")}}}</p> <p>{{{translateText("This cannot be undone without disabling ALL and reassigning.")}}}</p> <p>{{{translateText("Are you REALLY SURE you want to do this?")}}}</p> </div> </div> <div id="editUserModal__accounts_menu"></div> {{/if}} </script> <script type="text/ractive" id="CameraAccess-template"> <HelpLink class="pull-right" data_link="user_settings_cameras"/> {{#if is_admin}} <p>{{{translateText('Admins always have access to all cameras.')}}}</p> {{else}} <p>{{{translateText("You can control this user's access to individual cameras.")}}}</p> <div class="row-fluid"> <div class="span5"> <p class="access-menu-label">{{{translateText('No Access')}}}</p> </div> <div class="span5 offset1"> <p class="access-menu-label">{{{translateText('Access')}}}</p> <div class="pull-right"> <p class="access-menu-label {{#if !is_allowed_to_grant_all_cameras}}text-dimmed{{/if}}"> {{{translateText('All')}}} </p> <input type="checkbox" name="All Cameras" class="access-checkbox" checked="{{is_all_items_access}}" {{#if !is_allowed_to_grant_all_cameras}}disabled{{/if}}> </div> </div> <div class="red {{#if !is_warning_visible}}hide{{/if}}" id="camera_all_access_msg"> <p>{{{translateText("WARNING: About to grant access of ALL cameras to this user. Any cameras added in the future will also automatically be included.")}}}</p> <p>{{{translateText("This cannot be undone without disabling ALL and reassigning.")}}}</p> <p>{{{translateText("Are you REALLY SURE you want to do this?")}}}</p> </div> </div> <div class="row-fluid" id="editUserModal__cameras_menu"></div> {{/if}} </script> <script type="text/ractive" id="GeneralAccess-template"> <HelpLink class="pull-right" data_link="user_settings_permissions"/> <form class="form-horizontal general-access-component"> {{#if user_id}} <div class="control-group"> <label class="control-label">{{{translateText('Disable User')}}}:</label> <div class="controls"> <div class="row-fluid"> <input type="checkbox" name="optionsRadios" id="editUserModal_accountStatus" value="option1" checked="{{is_disabled}}"/> </div> </div> </div> {{/if}} <div class="control-group"> <label class="control-label">{{{translateText('Access Period')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span8"> <select class="span12" id="editUserModal__access_time" value="{{access_time}}"> <option value="all">{{{translateText('24 hours')}}}</option> <option value="work">{{{translateText('Work hours')}}} ({{formatted_work_hours}})</option> <option value="nonwork">{{{translateText('Non-Work hours')}}}</option> <option value="custom">{{{translateText('Custom')}}}</option> </select> </div> <div class="span2"> ({{timezone}}) </div> </div> <div class="row-fluid {{#if access_time !== 'custom'}}hide{{/if}}" id="editUserModal__access_time_custom"> <MultipleDayTimeSelector periods="{{custom_access_period}}" default_period="{{default_period}}"/> </div> </div> </div> {{#if is_locations_feature_enabled}} <div class="control-group"> <label class="control-label">{{{translateText('Location')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span8"> <LocationSelect onSelect='{{onLocationSelect}}' is_no_location_visible="true" selectedLocationId='{{user_model.location_id}}' data_test_id="modal-user-settings-form-select-location" /> </div> <div class="span2 location-add-button-center"> <LocationAddButton beforeOpen='{{hideUserModal}}' onResult='{{onAddNewLocation}}'/> </div> </div> </div> </div> {{/if}} <div class="control-group"> <label class="control-label">{{{translateText('Employee ID')}}}:</label> <div class="controls"> <div class="row-fluid"> <div class="span8"> <input type="text" maxlength="50" value="{{employee_id}}" id="editUserModal__employeeID"> </div> </div> </div> </div> {{#if user_id}} <div class="control-group"> <div class="controls"> <button class="ignore btn btn-inverse" id="user_ignore_{{user_id}}" title="{{{translateText('remove user from account')}}}" type="button"> {{{translateText('Delete User')}}} </button> </div> </div> {{/if}} </form> </script> <script type="text/ractive" id="LayoutAccess-template"> <HelpLink class="pull-right" data_link="user_settings_layouts"/> {{#if is_admin}} <p>{{{translateText('Admins always have access to all layouts.')}}}</p> {{else}} <p>{{{translateText("You can control this user's access to layouts. Giving access to a layout automatically gives access to all cameras in the layout.")}}}</p> <div class="row-fluid"> <div class="span5"> <p class="access-menu-label">{{{translateText('No Access')}}}</p> </div> <div class="span5 offset1"> <p class="access-menu-label">{{{translateText('Access')}}}</p> <div class="pull-right"> <p class="access-menu-label {{#if !is_allowed_to_grant_all_layouts}}text-dimmed{{/if}}"> {{{translateText('All')}}} </p> <input type="checkbox" name="All Layouts" class="access-checkbox" checked="{{is_all_items_access}}" {{#if !is_allowed_to_grant_all_layouts}}disabled{{/if}}> </div> </div> <div class="red {{#if !is_warning_visible}}hide{{/if}}" id="layout_all_access_msg"> <p>{{{translateText('WARNING: About to grant access of ALL layouts to this user. Any layouts added in the future will also automatically be included.')}}}</p> <p>{{{translateText('This cannot be undone without disabling ALL and reassigning.')}}}</p> <p>{{{translateText('Are you REALLY SURE you want to do this?')}}}</p> </div> </div> <div class="row-fluid" id="editUserModal__layouts_menu"></div> {{/if}} </script> <script type="text/ractive" id="LocationAccess-template"> <HelpLink class="pull-right" data_link="user_settings_locations"/> {{#if is_admin}} <p>{{{translateText('Admins always have access to all locations.')}}}</p> {{else}} <p>{{{translateText("You can control this user's access to locations.")}}}</p> <div class="row-fluid"> <div class="span5"> <p class="access-menu-label">{{{translateText('No Access')}}}</p> </div> <div class="span5 offset1"> <p class="access-menu-label">{{{translateText('Access')}}}</p> <div class="pull-right"> <p class="access-menu-label"> {{{translateText('All')}}} </p> <input type="checkbox" name="All Locations" class="access-checkbox" checked="{{is_all_items_access}}" > </div> </div> <div class="red {{#if !is_warning_visible}}hide{{/if}}" id="camera_all_access_msg"> <p>{{{translateText("WARNING: About to grant access of ALL locations to this user. Any locations added in the future will also automatically be included.")}}}</p> <p>{{{translateText("This cannot be undone without disabling ALL and reassigning.")}}}</p> <p>{{{translateText("Are you REALLY SURE you want to do this?")}}}</p> </div> </div> <div class="row-fluid" id="editUserModal__locations_menu"></div> {{/if}} </script>  <script type="text/ractive" id="VideoSearch-template"> <div class="widget"> <header class="widget-title"> <i class="icon icon-search"></i> <span>{{videosearch_title}}</span> <div class="float-right"> <HelpLink data_link="video_search_page"/> </div> </header> <div class="widget-content"> <iframe id="video-search-target" class="widget-content-iframe-with-header" src={{videosearch_url}}></iframe> </div> </div> </script>   <script type="text/ractive" id="FloorPlans-template"> <div class="widget"> <header class="widget-title"> <div class="float-right"> <HelpLink data_link="floor_plans_page"/> </div> </header> <div class="widget-content"> <iframe id="floor-plans-iframe" class="widget-content-iframe" src={{floor_plans_url}} allowfullscreen allow="geolocation"></iframe> </div> </div> </script>   <script type="text/ractive" id="HelpCenter-template"> <div class="widget"> <header class="widget-title"> <i class='icon-question-circle'></i> {{translateText('Help Center')}} </header> <div class="widget-content"> <iframe id="help-center-iframe" class="widget-content-iframe" src={{help_center_url}} allowfullscreen></iframe> </div> </div> </script>   <script type="text/ractive" id="cli-template"> <div class="wrapper"> <div class="cli"> <header class="cli__header"> <h2 class="cli__title">{{ translateText("Command Line Interface") }}</h2> <p class="lead">{{ translateText("Select your OS") }}</p> </header> <ul class="cli__link-group"> <li class="cli__link"> <i class="icon-windows fa-windows"></i> <a href="{{ windows_url }}" class="btn btn-info" download> <i class="icon-download-alt"></i> {{ translateText("Windows") }} </a> </li> <li class="cli__link"> <i class="icon-apple fa-apple"></i> <a href="{{ macos_url }}" class="btn btn-info" download> <i class="icon-download-alt"></i> {{ translateText("MacOS") }} </a> </li> <li class="cli__link"> <i class="icon-linux fa-linux"></i> <a href="{{ linux_url }}" class="btn btn-info" download> <i class="icon-download-alt"></i> {{ translateText("Linux") }} </a> </li> </ul> <section class="cli__help-section"> <div class="widget"> <header class="widget-title"><span>{{ translateText("Help Section") }}</span></header> <div class="widget-content cli-widget"> <iframe class="cli__iframe" src="{{ cli_iframe_url }}"></iframe> <span class='cli_loading'><img src="/_images/spinning.gif" /></span> </div> </div> <section> </div> </div> </script>   <script type="text/ractive" id="LPRSearch-template"> <div class="widget"> <div class="widget-content"> <iframe id="lpr-iframe" class="widget-content-iframe" src={{lpr_search_url}}></iframe> </div> </div> </script>   <script type="text/ractive" id="LPRSummaryView-template"> <div class="widget"> <div class="widget-content"> <iframe id="lpr-iframe" class="widget-content-iframe" src={{lpr_summary_url}}></iframe> </div> </div> </script>   <script type="text/ractive" id="ReportsGUIView-template"> <div class="widget"> <header class="widget-title"> <div class="float-right"> <HelpLink data_link="reports_page"/> </div> </header> <div class="widget-content"> <iframe id="reports-gui-iframe" class="widget-content-iframe" src={{reports_gui_url}}></iframe> </div> </div> </script>   <script type="text/ractive" id="AIFiltering-template"> <div class="ai-filtering-tab"> <div class="row-fluid"> <span class="pull-right" id="csCamera-help" data_link="camera_settings_aifiltering"> <i class="icon-question-sign een-help-link"></i> </span> </div> {{#if alert_actions && alert_actions.length}} <div class="ai-filtering-tab__active-action__wrapper"> {{#each alert_actions: index}} <AIFilteringEditorActionRow init_settings="{{this}}" index="{{index}}" recipients="{{recipients}}" /> {{/each}} </div> {{/if}} <div class-hidden="(alert_actions || []).length >= 3"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Name of Action')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="" autocomplete="off" required value="{{alert_name}}" /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Action type')}}: </div> <div class="span4"> <select value="{{selected_alert_type}}" class="ai-filtering-tab__form__select" > <option value="notification">{{translateText('Notification')}}</option> {{#if is_immix_available}} <option value="immix">{{translateText('Immix')}}</option> {{/if}} <option value="webhook">{{translateText('Webhook')}}</option> </select> </div> </div>  <div class-hidden="selected_alert_type !== 'notification'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Recipients')}}: </div> <div class="span4 custom-multiselect ai-filtering-tab__form__multiselect-wrapper"> <select id="ai-filtering-tab__parent__recipients-input" class="span12 ai-filtering-tab__form__select hidden" multiple="multiple" > <option value="select-all-option">All</option> {{#each recipients}} <option value="{{.id}}">{{.name}}</option> {{/each}} </select> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Notification type')}}: </div> <div class="span4 custom-multiselect ai-filtering-tab__form__multiselect-wrapper"> <select id="ai-filtering-tab__parent__notification-type-input" class="span12 ai-filtering-tab__form__select hidden" multiple="multiple" > <option value="select-all-option">All</option> <option value="email">{{translateText('Email')}}</option> <option value="push">{{translateText('Push notification')}}</option> </select> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Re-arm (minutes)')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" placeholder="" min="1" max="65535" autocomplete="off" value="{{settings.re_arm_in_minutes}}" /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Max per hour')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" min="1" max="65535" placeholder="" autocomplete="off" value="{{settings.max_per_hour}}" /> </div> </div> </div>   <div class-hidden="selected_alert_type !== 'immix'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('IP adress/URL')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="192.168.123.132" autocomplete="off" value="{{settings.url}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Email')}}: </div> <div class="span4"> <input type="email" class="ai-filtering-tab__form__input" placeholder="{{translateText('email@domain.com')}}" autocomplete="off" value="{{settings.email}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Port')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" placeholder="443" autocomplete="off" value="{{settings.port}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Object Bounding Box')}}: </div> <div class="span1"> <input type="checkbox" class="ai-filtering-tab__form__input" checked="{{settings.bounding_box_enabled}}" /> </div> </div> </div>   <div class-hidden="selected_alert_type !== 'webhook'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('URL')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="{{translateText('domain.com')}}" autocomplete="off" value="{{settings.url}}" required /> </div> </div> </div>  {{#if error_message }} <div class="row-fluid"> <div class="span2"> </div> <div class="span4"> <p class="red text-right">{{error_message}}</p> </div> </div> {{/if}} {{#if selected_alert_type }} <div class="row-fluid"> <div class="span2"> </div> <div class="span4 ai-filtering-tab__form__add-action-wrapper"> <button type="button" class="btn btn-info" on-click="@this.addAction()" > {{translateText('Add action')}} </button> </div> </div> {{/if}} </div> </div> </script>   <script type="text/ractive" id="AIFilteringEditorActionRow-template"> <div class-hidden="is_edit"> <div class="row-fluid" > <div class="span2 ai-filtering-tab__row_label"> {{#if index === 0}} {{translateText('Alert actions')}}: {{/if}} </div> <div class="span4"> <div class="ai-filtering-tab__active-action__item"> {{ init_settings.name }} </div> </div> <div class="span2"> <button type="button" class="btn ai-filtering-tab__active-action__action" on-click="@this.toggleEditMode()" title="{{translateText('Edit action') }}" > <i class="icon-pencil"></i> </button> <button type="button" class="btn ai-filtering-tab__active-action__action" on-click="@this.deleteAction()" title="{{translateText('Remove action') }}" > <i class="icon-trash"></i> </button> </div> </div> {{#if error_message }} <div class="row-fluid"> <div class="span2"> </div> <div class="span4"> <p class="red text-right">{{error_message}}</p> </div> </div> {{/if}} </div> <div class="ai-filtering-tab__edit_action_wrapper" class-hidden="!is_edit">  <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Name of Action')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="" autocomplete="off" required value="{{edited_settings.name}}" /> </div> <div class="span2"> <button type="button" class="btn ai-filtering-tab__active-action__action" on-click="@this.toggleEditMode()" title="{{translateText('Edit action') }}" > <i class="icon-pencil"></i> </button> <button type="button" class="btn ai-filtering-tab__active-action__action" on-click="@this.deleteAction()" title="{{translateText('Remove action') }}" > <i class="icon-trash"></i> </button> </div> </div>  <div class-hidden="edited_settings.type !== 'notification'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Recipients')}}: </div> <div class="span4 custom-multiselect ai-filtering-tab__form__multiselect-wrapper"> <select id="ai-filtering-tab__recipients-input" class="span12 ai-filtering-tab__form__select hidden" multiple="multiple" > <option value="select-all-option">All</option> {{#each recipients}} <option value="{{.id}}">{{.name}}</option> {{/each}} </select> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Notification type')}}: </div> <div class="span4 custom-multiselect ai-filtering-tab__form__multiselect-wrapper"> <select id="ai-filtering-tab__notification-type-input" class="span12 ai-filtering-tab__form__select hidden" multiple="multiple" > <option value="select-all-option">All</option> <option value="email">{{translateText('Email')}}</option> <option value="push">{{translateText('Push notification')}}</option> </select> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Re-arm (minutes)')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" placeholder="" min="1" max="65535" autocomplete="off" value="{{edited_settings.settings.rearmSeconds}}" /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Max per hour')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" min="1" max="65535" placeholder="" autocomplete="off" value="{{edited_settings.settings.maxPerHour}}" /> </div> </div> </div>   <div class-hidden="edited_settings.type !== 'immix'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('IP adress/URL')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="192.168.123.132" autocomplete="off" value="{{edited_settings.settings.url}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Email')}}: </div> <div class="span4"> <input type="email" class="ai-filtering-tab__form__input" placeholder="{{translateText('email@domain.com')}}" autocomplete="off" value="{{edited_settings.settings.email}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Port')}}: </div> <div class="span4"> <input type="number" class="ai-filtering-tab__form__input" placeholder="443" autocomplete="off" value="{{edited_settings.settings.port}}" required /> </div> </div> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('Object Bounding Box')}}: </div> <div class="span1"> <input type="checkbox" class="ai-filtering-tab__form__input" value="{{edited_settings.settings.bounding_box_enabled}}" checked="{{edited_settings.settings.bounding_box_enabled}}" /> </div> </div> </div>   <div class-hidden="edited_settings.type !== 'webhook'"> <div class="row-fluid"> <div class="span2 ai-filtering-tab__row_label"> {{translateText('URL')}}: </div> <div class="span4"> <input type="text" class="ai-filtering-tab__form__input" placeholder="{{translateText('domain.com')}}" autocomplete="off" value="{{edited_settings.settings.url}}" required /> </div> </div> </div> {{#if error_message }} <div class="row-fluid"> <div class="span2"> </div> <div class="span4"> <p class="red text-right">{{error_message}}</p> </div> </div> {{/if}} <div class="row-fluid"> <div class="span6 ai-filtering-tab__form__add-action-wrapper"> <button type="button" class="btn btn-warning" on-click="@this.cancelEdit()" > {{translateText('Cancel')}} </button> <button type="button" class="btn btn-success" on-click="@this.saveEdit()" > {{translateText('Save')}} </button> </div> </div> </div> </script> <script type="text/ractive" id="EEN-Debug-Container-template"> <div class="debug-toolbar"> <div class="debug-toolbar-background"></div> </div> <div on-click="body-click" class-active="show" class="debug-body-container {{^show}}hidden{{/}}"> <div class="debug-body-background"></div> <div class="debug-body"><#Body/></div> </div> </script> <script type="text/ractive" id="Debug-PreviewPane-Loitering-icon"> <a href="#" on-click="icon-click">Loitering</a> </script> <script type="text/ractive" id="Debug-PreviewPane-Loitering-template"> <div> <button on-click="feed">{{caption}}</button> </div> </script> <script type="text/ractive" id="Debug-PreviewPane-ObjectTracking-icon"> <a href="#" on-click="icon-click">Object Tracking</a> </script> <script type="text/ractive" id="Debug-PreviewPane-ObjectTracking-template"> <div> <button on-click="track" {{disabled}}>{{caption}}</button> </div> </script> <script type="text/ractive" id="Debug-PreviewPane-Dewarp-icon"> <a href="#" on-click="icon-click">Dewarp</a> </script> <script type="text/ractive" id="Debug-PreviewPane-Dewarp-template"> {{#partial pane_lookat}} <div class="pane-lookat"> <label>X: <input type="text" placeholder="X Value" size="3" value="{{x}}" /></label> <label>Y: <input type="text" placeholder="Y Value" size="3" value="{{y}}" /></label> <label>Z: <input type="text" placeholder="Z Value" size="3" value="{{z}}" /></label> </div> {{/partial}} <div id="Debug-PreviewPane-Dewarp"> <div on-click="propagation" style="width: 100%; height: 100%"> <button on-click="refresh">Refresh</button> {{#each panes: idx}} {{#with lookAt}} <div class="pane-lookat-title">Pane {{idx}}</div> {{> pane_lookat}} {{/with}} {{/each}} Config settings: <br /> <textarea style="width: 100%; height: 225px;">{{JSON.stringify(config, null, 4)}}</textarea> </div> </div> </script> <script type="text/ractive" id="Debug-PreviewPane-Preview-icon"> <a href="#" on-click="icon-click">Preview</a> </script> <script type="text/ractive" id="Debug-PreviewPane-Preview-template"> <div> Camera ESN: {{esn}} <br /> Plugins Enabled: <ul> {{#each plugins}} <li>{{@key}}: {{.}}</li> {{/each}} </ul> </div> </script> <script type="text/ractive" id="Debug-PreviewPane-Websocket-icon"> <a href="#" on-click="icon-click">Websocket</a> </script> <script type="text/ractive" id="Debug-PreviewPane-Websocket-template"> <div> <button on-click="drop">{{caption}}</button> </div> <div> <span>Websocket Distributed Tracing: {{#@global.WebApp.config.websocket_distributed_tracing_enabled}}True{{else}}False{{/}}</span> </div> </script>  <script type="text/ractive" id="EEN-Common-Modal-GenericModal-template"> <div class="modal-loading-wrapper" style="display: {{#loading}}block{{else}}none{{/}};"> <div class="modal-loading-background"></div> <div class="modal-loading-indicator">{{loading_label}}</div> </div> <div class="modal-header"> <button class="close" type="button" on-click="cancel">x</button> <h3>{{title}}</h3> </div> <div class="modal-body {{body_class}}"> {{#if body_text}} <p>{{{body_text}}}</p> {{/if}} <# modal_body/> </div> <div class="modal-footer"> <p class="message {{footer_class}} {{^footer_show}}hidden{{/}}">{{footer_label}}</p> <button type="button" class="btn {{cancel_class}} {{^cancel_show}}hidden{{/}}" on-click="cancel">{{cancel_label}}</button> <button type="button" class="btn {{apply_class}} {{^apply_show}}hidden{{/}}" on-click="apply">{{apply_label}}</button> <button type="button" class="btn {{commit_class}} {{^commit_show}}hidden{{/}}" on-click="commit">{{commit_label}}</button> </div> </script> <script type="text/ractive" id="EEN-DeviceSettings-Dewarp-template"> <HelpLink class="pull-right" data_link="camera_settings_dewarping"/> <form class="form-horizontal"> <div class="row-fluid control-group"> <label class="span2 control-label" data-testid="modal-camera-settings-tab-fisheye-input-label-orientation" > {{ translateText('Orientation') }}: </label> <div class="span3"> <select class="span10" value="{{orientation}}"> <option value="wall">Wall</option> <option value="ceiling">Ceiling</option> <option value="floor">Floor</option> </select> </div> </div>  <div class="row-fluid"> <div class="roi-container" id="EEN-DeviceSettings-Dewarp-template-layout-view"></div> </div>   <div class="row-fluid"> <div class="span2"> <h5 data-testid="modal-camera-settings-tab-fisheye-header-viewports" > {{ translateText('Viewports') }} </h5> </div> <div class="span10"> <i on-click="['add_composite', 'show']" class="icon-plus-sign add-icon pull-right" title={{translateText('Create new viewport')}} data-testid="modal-camera-settings-tab-fisheye-button-add-viewport" ></i> </div> </div> {{edit_mode}} <div id="EEN-DeviceSettings-Dewarp-template-composite-listings"> <table class="table table-condensed table-bordered table-striped"> <thead> <tr> <th class="column-order" data-testid="modal-camera-settings-tab-fisheye-table-header-order" > {{ translateText('Order') }} </th> <th class="" data-testid="modal-camera-settings-tab-fisheye-table-header-name" > {{ translateText('Name') }} </th> <th class="column-type" data-testid="modal-camera-settings-tab-fisheye-table-header-type" > {{ translateText('Type') }} </th> <th class="column-tags" data-testid="modal-camera-settings-tab-fisheye-table-header-tags" > {{ translateText('Tags') }} </th> <th class="column-options" data-testid="modal-camera-settings-tab-fisheye-table-header-options" > {{ translateText('Options') }} </th> </tr> </thead> <tbody> <tr class-hidden="showAdd"> <td class="column-order"></td> <td> <input type="text" value="{{composite_add.name}}" placeholder="View 1" /> <p class-hidden="!compositeAddError" class="text-error">{{ translateText('Please enter a valid name for the viewport') }}</p> </td> <td class="column-type"> {{>composite_select}} </td> {{#if state === 'add'}} <td class="column-tags"> <input name="tags" as-tagsInput="tags_input_settings, 'composite_add.tags'" value=""> </td> {{/if}} <td class="column-options"> <button on-click="['add_composite', 'add']" type="button"><i class="icon-check"></i></button> <button on-click="['remove_composite', -1]" type="button"><i class="icon-trash"></i></button> </td> </tr> {{#each sorted}} <tr class="{{#if ~/selected_idx === @index}}selected{{/if}}" on-click="['show_composite', @index]"> <td class="column-order"> <i class="icon-arrow-up" on-click="priorityUp" {{#if @index <= 0}}disabled{{/if}} on-click="['move_up', @index]"></i> <i class="icon-arrow-down" on-click="priorityDown" on-click="['move_down', @index]"></i> <span class="priority">{{this.priority_text}}</span> </td> <td> {{#if ~/editable_idx === @index}} <input type="text" class-dimm-row="!name" value="{{name}}" placeholder="View 1" /> {{^name.trim()}} <p class="text-error">{{ translateText('Please enter a valid name for the viewport') }}</p> {{/}} {{else}} <span class="{{^name}}dim-row{{/}}"> {{#name}} {{name}} {{else}} View 1 {{/}} </span> {{/if}} </td> <td class="column-type"> {{#if ~/editable_idx === @index}} {{>composite_select}} {{else}} {{@this.getCompositeType(.)}} {{/if}} </td> {{#if ~/editable_idx === @index}} <td class="column-tags"> <input name="tags" as-tagsInput="tags_input_settings, 'sorted.' + @index + '.tags'" value="{{tags.join(',')}}"> </td> {{else}} <td class="column-tags"> {{#each tags}} <span class="tag">{{.}}</span> {{/each}} </td> {{/if}} <td class="column-options"> <button on-click="['edit', @index]" type="button"><i class="{{#if ~/editable_idx === @index}}icon-check{{else}}icon-pencil{{/if}}"></i></button> <button on-click="['remove_composite', @index]" type="button"><i class="icon-trash"></i></button> </td> </tr> {{/each}} </tbody> </table> </div>  </form> {{#partial composite_select}} <select value="{{composite_type}}"> <option disabled selected value="fisheye"> -- {{translateText('Select Viewport Type')}} -- </option> <option value="single">{{translateText('Single')}}</option> <option value="panorama" {{#if orientation !== 'wall'}}disabled{{/if}}> {{translateText('Single Panorama')}} </option> <option value="double" {{#if orientation === 'wall'}}disabled{{/if}}> {{translateText('Double Panorama')}} </option> <option value="quad"> {{translateText('Quad')}} </option> </select> {{/partial}} </script> <script type="text/ractive" id="EEN-DeviceSettings-Extension-template"> <form class="form-horizontal extension"> {{#if is_device_features_analytic}} <p class="red text-center"> {{translateText('Warning: Accuracy of device analytics is dependent on device. Contact your device manufacturer for further details.')}} </p> {{/if}} <div class="schema-form" style="margin-bottom: 10px;"></div> {{#if hasAlert()}} <div class="row-fluid control-group"> <table class="table table-condensed table-bordered table-striped"> <tbody> <tr> <td class=""> <AnalyticAlertEditor payload="{{alert_payload}}" roiid="{{region.id}}" who="{{region.who}}" when="{{region.when ? region.when : '*'}}" throttle_type="{{region.throttle_type ? region.throttle_type : 2}}" account_alert_modes="{{accountAlertModes()}}" throttle_seconds="{{region.throttle_seconds ? region.throttle_seconds : 15 * 60}}" throttle_hour_limit="{{region.throttle_hour_limit ? region.throttle_hour_limit : 5}}" users="{{getUserList()}}" mode="{{region.mode ? region.mode : ['all']}}" template="#ExtensionAlertEditor-template" level="{{region.level ? region.level : 1}}"> </AnalyticAlertEditor> </td> </tr> </tbody> </table> </div> {{/if}} </form> </script>  <script type="text/ractive" id="ExtensionAlertEditor-template"> <tr> <td colspan="{{colspan}}"> <div class="span7 alert-column"> <div class="span12" style="display:none"> <label class="span5" for="editCamera__motion_alert"> {{ translateText('Enable Alerts') }}: </label> <div class="span1"> <input type="checkbox" class="alert-active" on-click="save" checked="{{active}}" twoway="true"/> </div></div> <div class="span12"> <label class="span5" for=""> {{ translateText('When') }}: </label> <div class="row-fluid control-group span7"> <select class="span12 when" value="{{['*', 'work', 'nonwork'].indexOf(when) > -1 ? when : 'custom'}}" twoway="true"> <option value="*">{{ translateText('24 hours') }}</option> <option value="work">{{ translateText('Work hours')}}({{getWorkHours()}})</option> <option value="nonwork">{{ translateText('Non-work hours') }}</option> <option value="custom">{{ translateText('Custom hours') }}</option> </select> </div> </div> {{#if ['*', 'work', 'nonwork'].indexOf(when) === -1}} <TimeSlider start="{{when_start}}" end="{{when_end}}" on-change="save"></TimeSlider> {{/if}} <div class="span12"> <label class="span5" for="editCamera__analytic_alert_throttle_none"> {{ translateText('Re-arm') }}: </label> <div class="span7"> <div class="span12"> <div class="span6"> <select class="span12 throttle_type" value="{{throttle_type}}" twoway="true"> <option value="1"> {{ translateText('Immediate') }} </option> <option value="2"> {{ translateText('After') }} </option> <option value="3"> {{ translateText('After quiet for') }} </option> </select> </div> <div class="span6"> <div class="span6"> <input type="number" min="1" style="height:25px;" class="span12 throttle_seconds" maxlength="5" name="{{throttle_type}}" value="{{parseInt(throttle_type) === 1 ? '' : typeof throttle_seconds === 'number' ? throttle_seconds / 60 : 15 }}" twoway="true" {{#if (parseInt(throttle_type) === 1)}}disabled{{/if}}> </div> <div class="span6" style="margin-top:5px">{{ translateText('minutes') }}</div> </div> </div> </div> </div> <div class="span12"> <label class="span5" for="analytic_alert_throttle_hour_limit"> {{ translateText('Max Per Hour') }}: </label> <div class="span7" style="text-align: left"> <input type="text" style="height: 25px;" class="span3 throttle_hour_limit" maxlength="3" twoway="true" name="editCamera__analytic_alert_throttle_hour_limit" value="{{typeof throttle_hour_limit === 'number' ? throttle_hour_limit: ''}}"> </div> </div> </div> <div class="span4 alert-column"> <div class="span12" style="display:none"></div> <div class="span12 css-motion-alert-who"> <label class="span4" for="editCamera__analytic_alert_who"> {{ translateText('Who') }}: </label> <div class="span7"> <select class="span12 analytic_alert_who" multiple="multiple"> <option value="select-all-option">{{ translateText('All') }}</option> {{#each users}} <option value="{{ this.get('id') }}">{{this.getDisplayName(true)}}</option> {{/each}} </select> </div> </div> <div class="span12 css-motion-alert-mode"> <label class="span4" for="analytic_alert_mode"> {{ translateText('Mode') }}: </label> <div class="span7"> <select class="span12 analytic_alert_mode" multiple="multiple"> <option value="select-all-option">{{ translateText('All') }}</option> {{#each account_alert_modes}} <option value="{{ this }}">{{ this }}</option> {{/each}} </select> </div> </div> <div class="span12"> <label class="span4" for="editCamera__analytic_alert_level"> {{ translateText('Level') }}: </label> <div class="span4"> <select class="span12 level" name="analytic_alert_level" value="{{level}}" twoway="true"> <option value="1">{{ translateText('High') }}</option> <option value="2">{{ translateText('Low') }}</option> </select> </div> </div> </div> </td> </tr> </script>  <script type="text/ractive" id="EEN-DeviceSettings-InputOutput-template"> {{#each entries}} <form class="form-horizontal"> <div class="row-fluid control-group"> <label class="span3 control-label" data-testid="modal-camera-settings-tab-io-{{mode}}-enable-camera" > {{#if mode === modes.INPUT}} {{translateText('Enable Camera Input')}} {{elseif mode === modes.OUTPUT}} {{translateText('Enable Camera Output')}} {{/if}} {{@index + 1}} </label> <div class="span1"> <input type="checkbox" checked={{config.enable}}/> </div> <label class="span1 control-label" data-testid="modal-camera-settings-tab-io-{{mode}}-name" > {{translateText('Name:')}} </label> <div class="span2"> <input class="span12" type="text" value="{{config.username}}"/> </div> <div class="span2"> <select class="span12" value={{config.polarity}}> {{#if mode === modes.INPUT}} <option value="active_high">{{translateText('Normally Open')}}</option> <option value="active_low">{{translateText('Normally Closed')}}</option> {{elseif mode === modes.OUTPUT}} <option value="normally_open">{{translateText('Normally Open')}}</option> <option value="normally_closed">{{translateText('Normally Closed')}}</option> {{/if}} {{@index + 1}} </select> </div> <div class="span3"> <div class="span4"> {{#if mode === modes.OUTPUT}} <button class="btn-info" on-click="handleTestButton" data-index="{{@index}}" data-name={{name}} data-testid="modal-camera-settings-tab-io-{{mode}}-test-button" > Test </button> <b> {{#if output_statuses[@index]}} {{output_statuses[@index]}} {{/if}} </b> {{/if}} </div> <div class="span5"> <a class="btn-link collapsed" data-toggle="collapse" data-target="#{{getIOAdvancedCollapseID(this)}}"> <div class="io-setting-collapse-icon-container"> <i class="fas icon-angle-up io-setting-collapse-icon if-not-collapsed"></i> <i class="fas icon-angle-down io-setting-collapse-icon if-collapsed"></i> </div> </a> </div> <div class="span3"> {{#if @index === 0}} {{#if mode === modes.INPUT}} <span class="pull-right" id="csCamera-help" data_link="camera_settings_input"> <i class="icon-question-sign een-help-link"></i> </span> {{elseif mode === modes.OUTPUT}} <span class="pull-right" id="csCamera-help" data_link="camera_settings_output"> <i class="icon-question-sign een-help-link"></i> </span> {{/if}} {{/if}} </div> </div> </div> <div id="{{getIOAdvancedCollapseID(this)}}" class="row-fluid collapse"> <div class="span12 pull-right io-setting-add-right-padding io-setting-add-bottom-padding"> <div class="row-fluid control-group"> <label class="span4 control-label" data-testid="modal-camera-settings-tab-io-{{mode}}-trigger-video-recording" > {{translateText('Trigger Video Recording')}} </label> <div class="span1"> <input type="checkbox" checked={{config.record}}/> </div> <label class="span2 control-label io-setting-add-left-padding" data-testid="modal-camera-settings-tab-io-{{mode}}-icon-on-screen" > {{translateText('Icon On Screen')}} </label> <div class="span2 io-setting-add-left-padding"> <input type="checkbox" checked={{config.alert}}/> <div class="span10 float-right io-setting-sub-right-margin"> <div class="btn-group"> <button class="btn dropdown-toggle span12 io-setting-control-dropdown io-setting-icon-{{config.x_alert_icon}} {{!config.alert ? 'disabled' : ''}}" data-toggle="dropdown"> <span class="caret io-setting-control-dropdown-caret"></span> </button> <ul data-entry-index="{{@index}}" on-click="handleIconChange" class="dropdown-menu io-setting-icon-dropdown"> {{#if mode === modes.INPUT}} <li data-icon-id="dot" class="io-setting-control io-setting-icon-dot"></li> <li data-icon-id="door" class="io-setting-control io-setting-icon-door"></li> <li data-icon-id="bell" class="io-setting-control io-setting-icon-bell"></li> {{elseif mode === modes.OUTPUT}} <li data-icon-id="siren" class="io-setting-control io-setting-icon-siren"></li> <li data-icon-id="light" class="io-setting-control io-setting-icon-light"></li> <li data-icon-id="door" class="io-setting-control io-setting-icon-door"></li> <li data-icon-id="bell" class="io-setting-control io-setting-icon-bell"></li> {{/if}} </ul> </div> </div> </div> <div class="span3"> </div> </div> <div class="row-fluid control-group"> {{#each this.alerts}} <IOAlertEditor roiid="{{../../name}}" who="{{this.who}}" when="{{this.when}}" throttle_type="{{this.throttle_type}}" throttle_seconds="{{this.throttle_seconds}}" throttle_hour_limit="{{this.throttle_hour_limit}}" mode="{{this.mode}}" level="{{this.level}}" > </IOAlertEditor> {{/each}} </div> </div> </div> </form> {{/each}} </script>  <script type="text/ractive" id="IOAlertEditor-template"> <div class="row-fluid control-group"> <label class="span4 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-alert-enable" > {{ translateText('Enable Alerts') }} </label> <div class="span1"> <input type="checkbox" class="alert-active" on-click="save" checked="{{is_active}}" twoway="false"/> </div> <div class="span7"> </div> </div> <div class="{{alerts_active ? "" : "hide"}}"> <div class="row-fluid control-group"> <div class="span2"> </div> <label class="span2 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-when" > {{ translateText('When') }}: </label> <div class="span2"> <select on-change="save" class="when span12" value="{{when}}" twoway="true"> <option value="*">{{ translateText('24 hours') }}</option> <option value="work">{{ translateText('Work hours')}} ({{getWorkHours()}})</option> <option value="nonwork">{{ translateText('Non-work hours') }}</option> <option value="custom">{{ translateText('Custom hours') }}</option> </select> {{#if when === 'custom'}} <TimeSlider start="{{when_start}}" end="{{when_end}}" on-change="save"></TimeSlider> {{/if}} </div> <label class="span2 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-who" > {{ translateText('Who') }}: </label> <div class="span4"> <div class="span12 css-motion-alert-who"> <select on-change="save" class="motion_alert_who" multiple="multiple"> <option value="select-all-option">All</option> {{#each users}} <option value="{{ this.get('id') }}">{{this.getDisplayName(true)}}</option> {{/each}} </select> </div> </div> </div> <div class="row-fluid control-group"> <div class="span2"> </div> <label class="span2 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-rearm" > {{ translateText('Re-arm') }}: </label> <div class="span2"> <div class="span12"> <div class="span6"> <select on-change="save" class="span12 throttle_type" value="{{throttle_type}}" twoway="true"> <option value="1"> {{ translateText('Immediate') }} </option> <option value="2"> {{ translateText('After') }} </option> <option value="3"> {{ translateText('After quiet for') }} </option> </select> </div> <div class="span6"> <div class="span10"> <input type="number" on-change="save" min="1" class="span12 throttle_seconds" maxlength="5" name="{{throttle_type}}" value="{{parseInt(throttle_type) === 1 ? '' : typeof throttle_seconds === 'number' ? throttle_seconds / 60 : 15 }}" twoway="false" {{#if (parseInt(throttle_type) === 1)}}disabled{{/if}}> </div> <div class="span2 io-alert-minutes">{{ translateText('minutes') }}</div> </div> </div> </div> <label class="span2 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-mode" > {{ translateText('Mode') }}: </label> <div class="span4"> <div class="span12 css-motion-alert-mode"> <select on-change="save" class="span12 motion_alert_mode" multiple="multiple"> <option value="select-all-option">All</option> {{#each account_alert_modes}} <option value="{{ this }}">{{ this }}</option> {{/each}} </select> </div> </div> </div> <div class="row-fluid control-group"> <div class="span2"> </div> <label class="span2 control-label io-alert-max-per-hour" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-max-per-hour" > {{ translateText('Max Per Hour') }}: </label> <div class="span2"> <input on-change="save" type="number" class="span6 throttle_hour_limit" min="0" max="999" maxlength="3" twoway="false" name="editCamera__motion_alert_throttle_hour_limit" value="{{throttle_hour_limit}}"> </div> <label class="span2 control-label" data-testid="modal-camera-settings-tab-io-{{io_mode}}-input-label-level" > {{ translateText('Level') }}: </label> <div class="span4"> <select on-change="save" class="span12 level" name="motion_alert_level" value="{{level}}" twoway="false"> <option value="1">{{ translateText('High') }}</option> <option value="2">{{ translateText('Low') }}</option> </select> </div> </div> </div> </script>   <script type="text/ractive" id="InputOutputControls-template"> {{#each entries.inputs}} <i data-type="{{this.x_type}}" data-index={{this.x_index}} data-name="{{this.name}}" data-username="{{this.config.username}}" data-mode={{this.x_mode}} title="{{this._x_username}}" class="io-control-input-toggle {{this.config._x_alert_icon}}" on-click="_userIconClick"></i> {{/each}} {{#each entries.outputs}} <i data-type="{{this.x_type}}" data-index={{this.x_index}} data-name="{{this.name}}" data-username="{{this.config.username}}" data-mode={{this.x_mode}} title="{{this._x_username}}" class="io-control-output-toggle {{this.config._x_alert_icon}}" on-click="_userIconClick"></i> {{/each}} </script>      <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> <script src="_js/build/app-dependencies_a6675cd6.js"></script> <script> var current_user_data; var branding = new BrandingSupport(); branding.updateBrandByDomain(); /* * Hook into xhr so that we can change the host to the right cluster regarless of brand domain * or reseller->sub situations */ var origOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function() { try { var url = arguments[1]; // any call to /api/v2 without a host, we should go direct to cluster if(window.userList && url.match(/^\/api\/v2\/drivefs/) && location.host.match(/\.eagleeyenetworks\.com$/)) { var new_host = userList.getCurrentUser().account.get('default_cluster'); url = location.protocol + "\/\/" + new_host + "." + location.host.split(".").slice(1).join('.') + url; this.withCredentials = true; } arguments[1] = url; } catch (err) { console.warn("non-fatal issue hijacking xhrRequest", err); } origOpen.apply(this, arguments); }; // track viewport size var analytics = new SiteAnalytics(); var viewport_size = { 'width': Math.max(document.documentElement.clientWidth, window.innerWidth || 0), 'height': Math.max(document.documentElement.clientHeight, window.innerHeight || 0) }; analytics.collectByGoogleAnalytics('Viewport Size', viewport_size, 'Main'); </script> <script src="_js/build/backbone.combined_6e0673c4.js"></script> <script src="_js/build/bootstrap-plugins_42461d22.js"></script> <script src="_js/build/bootstrap-formhelpers_4dd67b5c.js"></script> <script src="_js/build/jquery-plugins_f6aecb68.js"></script> <script> !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); posthog.init('phc_ziFxZGCxvRMdAJ9HaygHhUCrkVxqKwO9usoEeoTDOPU', { api_host: 'https://us.i.posthog.com', capture_pageview: false, }) </script>  </body> </html>

CINXE.COM