cadviewer-angular

<div class="wrapper">   <div class="nav2 navbar-inverse navbar-default navbar-static-top " id="navbar_id"> <div class="navbar-collapse"> <ul class="nav navbar-nav nav-left"> <li class="nav-launcher"></li> <li> <div class="dropdown"> <div class="dropdown-toggle" type="button" id="drop_selection" data-toggle="dropdown" aria-expanded="true"><a href="#"><i class="fa fa-bars"></i></a> </div> <ul class="dropdown-menu" role="menu" id="selections_list" aria-labelledby="drop_selection" > </ul> </div> </li> <li> <div id="user_logoCV"><img src=cvjs_imagesLocation+"logo_cv_d.png"></div> </li> <li><div id="site_name" class="hint--bottom" data-hint="undefined">%Site%<div></li> <li> <div class="dropdown"> <div class="dropdown-toggle" type="button" id="drop_floor" data-toggle="dropdown" aria-expanded="true"><a href="#">%Floor% <span class="caret"></span></a> </div> <ul class="dropdown-menu" role="menu" id="floors_list" aria-labelledby="drop_floor" > </ul> </div> </li> <li> <div class="dropdown"> <div class="dropdown-toggle" type="button" id="drop_locations_sensors" data-toggle="dropdown" aria-expanded="true"><a href="#">Locations <span class="caret"></span></a> </div> <ul class="dropdown-menu" role="menu" id="locations_sensors_list" aria-labelledby="drop_floor" > </ul> </div> </li> <li> <div class="dropdown"> <div class="dropdown-toggle" type="button" id="drop_locations" data-toggle="dropdown" aria-expanded="true"><a href="#">%Location% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="locations" aria-labelledby="drop_locations" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_1"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_1" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 1% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_1_list" aria-labelledby="dropmenu_custom_1" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_2"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_2" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 2% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_2_list" aria-labelledby="dropmenu_custom_2" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_3"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_3" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 3% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_3_list" aria-labelledby="dropmenu_custom_3" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_4"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_4" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 4% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_4_list" aria-labelledby="dropmenu_custom_4" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_5"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_5" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 5% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_5_list" aria-labelledby="dropmenu_custom_5" > </ul> </div> </li> <li> <div class="dropdown" id="dropdown_custom_6"> <div class="dropdown-toggle" type="button" id="dropmenu_custom_6" data-toggle="dropdown" aria-expanded="true"><a href="#">%Custom 6% <span class="caret"></span></a> </div> <ul class="dropdown-menu scrollable-menu" role="menu" id="custom_5_list" aria-labelledby="dropmenu_custom_6" > </ul> </div> </li> </ul> <ul class="pull-right nav-right"> <li> <div id="iconSearch"> <img src=cvjs_imagesLocation+"menu_cv_search_right.png"> </div> </li> </ul> </div> </div>  <div id="infoModal" class="modal fade"> <div class="modal-dialog modal-dialog-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Information</h4> </div> <div class="modal-body"> <p><img id="logo" src=cvjs_imagesLocation+"logo_cv240x60.gif" border="1" width="240" height="60" /></p> <p><strong><h3>CADViewer JS Floor Plan</h3></strong></p> <p class="text-default"><small>v2.4.10</small></p> <p class="text-default"><small>© 2016 Tailor Made Software, Ltd. All Rights Reserved.</small></p> </div> </div> </div> </div> <div id="clusterModal" class="modal fade"> <div class="modal-dialog modal-dialog-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Cluster Details</h4> </div> <div class="modal-body"> <table> <tbody> <tr> <td><small>Organization:</small></td> <td>%Organization%</td> </tr> <tr> <td><small>Location:</small></td> <td>%Location%</td> </tr> <tr> <td><small>Cluster Name:</small></td> <td>%ClusterName%</td> </tr> <tr> <td><small>Time Zone:</small></td> <td>%TimeZone%</td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="searchModal" class=""> <div class="modal-dialog modal-dialog-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" id="searchModalCloseButton" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Search Locations</h4> </div> <div class="modal-body"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-md-12"> <div class="input-group"> <input id="searchfield_tag" type="text" class="form-control"> <span class="input-group-btn"> <button id="search_button" class="btn btn-default" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> <div class="row search-results-header"> <div class="col-md-12 search-results-count"> <div id="SearchQuantity">0 item(s)</div> </div> </div> <div id="SearchResultsList" class="search-results-list fixedHeight-xl"> </div> </div> </div> </form> </div> </div> </div> </div> <div id="locInfoModal" class="modal fade"> <div class="modal-dialog modal-dialog-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Location Details</h4> </div> <div class="modal-body"> <ul class="nav nav-tabs nav-tabs-custom-colored" id="tabContent"> <li id="loc_top_light" role="presentation" ><a href="#loc-lightControl-pane" data-toggle="tab">Light Controls</a></li> <li id="loc_top_sensor" role="presentation"><a href="#loc-sensorData-pane" data-toggle="tab">Sensor Data</a></li> <li id="loc_top_info" role="presentation"><a href="#loc-info-pane" data-toggle="tab">Information</a></li> </ul> <div class="tab-content"> <div class="tab-pane active lightingPane" id="loc-lightControl-pane"> <div class="row"> <div class="col-md-12"> <p> <span id="location_locinfomodal1" class="location-title">%Location%</span> <span class="timestamp pull-right"><small id="refresh_light_tag">HH:MM ampm</small> <a><i id="refresh_light" class="fa fa-refresh"></i></a></span> </p>  <div class="well" id="no_scenes_modal"> <div id="lightLevel"> <small>Light Level (0 - 100):</small> <span id="slider-value0" class="pull-right label label-default label-slider"></span> </div> <div class="slider" id="slider0_area"> <div id="range-slider0"></div> </div> </div>  <div class="well" id="scenes_present_modal"> <p><small>Active Scene:</small></p> <p> <form id="scene_form"> <div id="sceneSelect-action"> <select name='mydropdown' id="sceneSelect_dropdown" class="form-control"> <option value='LightsOn'>On</option> <option value='LightsOff'>Off</option> <option value='' disabled='disabled'>—</option> <option value='Default'>Default lighting policy</option> <option value='Presentation'>Presentation</option> <option value='' disabled='disabled' selected>No scene selected</option> </select> </div> </form> </p> <hr> <div id="lightLevel"> <small>Light Level (0 - 100):</small> <span id="slider-value1" class="pull-right label label-default label-slider"></span> </div> <div class="slider" id="slider1_area"> <div id="range-slider1"></div> </div> </div> </div> </div> </div> <div class="tab-pane" id="loc-sensorData-pane"> <div class="row"> <div class="col-md-12"> <p> <span id="location_locinfomodal2" class="location-title">%Location%</span> <span class="timestamp pull-right"><small id="refresh_location_tag">HH:MM ampm</small> <a><i id="refresh_location" class="fa fa-refresh"></i></a></span> </p> <div class="well"> <p><small>Occupancy</small></p> <p class="senDataDetail1" id="motions_ago">%Motion%</p> <p class="senDataDetail2"><small>since motion last detected</small></p> <p><small>Temperature</small></p> <p class="senDataDetail1" id="temp_now">%Temp%</p> <p class="senDataDetail2"><span id="ctemp_now">%TempCelsius%</span> </p> <p><small>Power Consumption</small></p> <p class="senDataDetail1" id="power_now">%Power%</p> <p class="senDataDetail2" id="cpower_now">%PowerMetric%</p> </div> </div> </div> </div> <div class="tab-pane" id="loc-info-pane"> <div class="row"> <div class="col-md-12"> <p><span id="location_locinfomodal3" class="location-title">%Location%</span></p> <div class="well"> <p><small>Type</small></p> <p class="senDataDetail1" id="location_type"></p> <p><small>Capacity</small></p> <p class="badge" id="location_occupancy"></p> <p><small>Tags</small></p> <p class="senDataDetail1" id="location_tags"></p>  </div> </div> </div> </div> </div>  </div>  </div> </div> </div> <div id="siteInfoModal" class="modal fade"> <div class="modal-dialog modal-dialog-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Site Details</h4> </div> <div class="modal-body"> <ul class="nav nav-tabs nav-tabs-custom-colored" id="tabContent"> <li class="active"><a href="#site-sensorData-pane" data-toggle="tab">Sensor Data</a></li> <li><a href="#site-info-pane" data-toggle="tab">Information</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="site-sensorData-pane"> <div class="row"> <div class="col-md-12"> <p> <span id="site_BldgName" class="site-title">%Location%</span> <span class="timestamp pull-right"><small id="refresh_site_tag">HH:MM ampm</small> <a><i id="refresh_site" class="fa fa-refresh"></i></a></span> </p> <div class="well"> <p><small>Occupancy</small></p> <p class="senDataDetail1" id="site_motions_ago">%Motion%</p> <p class="senDataDetail2"><small>since motion last detected</small></p> <p><small>Temperature</small></p> <p class="senDataDetail1" id="site_temp_now">%Temp%</p> <p class="senDataDetail2"><span id="site_ctemp_now">%TempCelsius%</span> </p> <p><small>Power Consumption</small></p> <p class="senDataDetail1" id="site_power_now">%Power%</p> <p class="senDataDetail2" id="site_cpower_now">%PowerMetric%</p> </div> </div> </div> </div> <div class="tab-pane" id="site-info-pane"> <div class="row"> <div class="col-md-12"> <p><span id="site_BldgName2" class="site-title"></span></p> <div class="well"> <p><small>Address</small></p> <div class="senDataDetail1" id="site_CompanyName"></div> <div id="site_Address"></div> <p class="senDataDetail2"> <span id="site_CityName"></span> <span id="site_StateName"></span> <span id="site_ZipCode"></span> </p> <p><small>Contact</small></p> <div class="senDataDetail1" id="site_FacMgrName"></div> <div id="site_FacMgrTitle"></div> <div id="site_FacMgrEmail"></div> <div class="senDataDetail2" id="site_FacMgrPhone"></div> </div> </div> </div> </div> </div>  </div>  </div> </div> </div> <div id="mapDataModal" class="modal fade"> <div class="modal-dialog modal-dialog-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Data Maps</h4> </div> <div class="modal-body"> <ul class="nav nav-tabs nav-tabs-custom-colored" id="tabContent"> <li role="presentation" class="active"><a href="#sensor-dataMap-pane" data-toggle="tab">Sensor Data</a></li> <li role="presentation" id="outlineMarkersPane" ><a href="#loc-dataMap-pane" data-toggle="tab">Outlines/Markers</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="sensor-dataMap-pane"> <div id="sensorMapPanel"> <div id="senDataModal">  <p> <small> Display Sensor Data By Type </small> </p> <div class="well"> <table> <tbody> <tr> <td> <input type="radio" value="none" id="none" name="mapDataRadioButton" checked> </td> <td> <p>None</p> </td> </tr> <tr> <td> <input type="radio" value="occupancy" id="occupancy" name="mapDataRadioButton"> </td> <td><p>Occupancy</p> <div class="occupancy-colors"> <span class="hint--top low2 color-chip" data-hint="> 10 min"></span> <span class="hint--top low1 color-chip" data-hint="7.5 to 10 min"></span> <span class="hint--top mid0 color-chip" data-hint="5 to 7.5 min"></span> <span class="hint--top high1 color-chip" data-hint="2.5 to 5 min"></span> <span class="hint--top high2 color-chip" data-hint="< 2.5 min"></span> </div> </td> </tr> <tr> <td> <input type="radio" value="power" id="power" name="mapDataRadioButton"> </td> <td><p>Power</p> <div class="power-colors"> <span class="hint--top low2 color-chip" data-hint="< 0.1 W/sq ft | 1.08 W/sq m"></span> <span class="hint--top low1 color-chip" data-hint="0.1 to 0.2 W/sq ft | 1.1 to 2.2 W/sq m"></span> <span class="hint--top mid0 color-chip" data-hint="0.2 to 0.4 W/sq ft | 2.2 to 4.3 W/sq m"></span> <span class="hint--top high1 color-chip" data-hint="0.4 to 0.5 W/sq ft | 4.3 to 5.4 W/sq m"></span> <span class="hint--top high2 color-chip" data-hint="> 0.5 W/sq ft | 5.4 W/sq m"></span> </div> </td> </tr> <tr> <td> <input type="radio" value="temperature" id="temperature" name="mapDataRadioButton"> </td> <td><p>Temperature</p> <div class="temperature-colors"> <span class="hint--bottom low2 color-chip" data-hint="< 70 °F | 21 °C"></span> <span class="hint--bottom low1 color-chip" data-hint="70 to 72 °F | 21 to 22 °C"></span> <span class="hint--bottom mid0 color-chip" data-hint="72 to 77 °F | 22 to 25 °C"></span> <span class="hint--bottom high1 color-chip" data-hint="77 to 81 °F | 25 to 27 °C"></span> <span class="hint--bottom high2 color-chip" data-hint="> 81 °F | 27 °C"></span> </div> </td> </tr> </tbody> </table> <div style="padding-top:10px" id="locSenToggle" class="hide"> <small>Visualize Data By:(select one)</small> <div class="btn-group btn-group-sm" role="group" style="padding:8px 0"> <button id="locationMap" type="button" class="btn btn-primary"> <i class="fa fa-location-arrow"></i> Locations <small>  </small> </button> <button id="sensorMap" type="button" class="btn"> <i class="fa fa-wifi"></i> Sensors  </small> </button> </div> </div> </div>   </div> </div>  </div>  <div class="tab-pane" id="loc-dataMap-pane"> <div id="locationMapPanel"> <div class="row" id="locSensorModal"> <div class="col-md-12">  <p> <small> Display Outlines/Markers </small> </p> <div class="well"> <table class="location-colors"> <thead> <tr> <td colspan="2"> <p> <strong>Location Outlines</strong> </p> </td> </tr> </thead> <tbody> <tr> <td> <p> <input id="toggleLoc" type="checkbox" name="locationTypeData" > </p> </td> <td><p>Select All</p>  </td> </tr> <tr class="locBox"> <td class="meeting-rooms"> <input type="checkbox" name="locationTypeData" id="meeting_room"> </td> <td>Meeting Rooms</td> </tr> <tr class="locBox"> <td class="offices"> <input type="checkbox" name="locationtypeData" id="offices"> </td> <td>Offices</td> </tr> <tr class="locBox"> <td class="collab-space"> <input type="checkbox" name="locationtypeData" id="collab_space"> </td> <td>Collaboration Spaces</td> </tr> </tbody> </table> </div> </div> </div> </div>  </div>  </div>  </div>  </div> </div> </div> </div>