[Feature][S300][task-view-1920][webui] Modify the webui according to customer requirements base
Change-Id: I83dabd5ff2cee5d7430b426e38f4796881eda7ed
diff --git a/lynq/S300/BJMTN/ap/app/zte_webui/subpg/firewall.html b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/firewall.html
new file mode 100755
index 0000000..a106101
--- /dev/null
+++ b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/firewall.html
@@ -0,0 +1,70 @@
+<div id="innerContainer">
+ <div class="row header-row">
+ <div class="col-xs-1">
+ <a href="#main">
+ <img alt="" src="pic/direct-back.png">
+ </a>
+ </div>
+ <div class="col-xs-11">
+ <div class="form-title">
+ <h1 data-trans='advanced_settings'></h1>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-2">
+ <div class="nav_right">
+ <ul>
+ <li><a data-trans="sleep_mode" href="#wlan_sleep"></a></li>
+ <li><a data-trans="router_setting" href="#route_set"></a></li>
+ <li class="active"><a data-trans="firewall" href="#filter_main"></a></li>
+ <li data-bind="visible:hasUpdateCheck"><a data-trans="update_settings" href="#fota"></a></li>
+ <!-- <li data-bind="visible:hasUssd"><a data-trans="USSD" href="#usat"></a></li> -->
+ <li data-bind="visible:hasDdns"><a data-trans="DDNS" href="#dynamic_dns"></a></li>
+ <li><a data-trans="others" href="#more"></a></li>
+ <li><a data-trans="tr069" href="#tr069"></a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="col-xs-10">
+ <div class="form-body">
+ <div class="content margin-top-20">
+ <div class="col-xs-4">
+ <div class="row">
+ <a href="#filter_port">
+ <div data-trans="port_filter" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ <div class="row" style="display:none">
+ <a href="#map_port">
+ <div data-trans="port_map" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ <div class="row" style="display:none">
+ <a href="#foward_port">
+ <div data-trans="port_forward" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ <div data-bind="visible: hasUrlFilter" class="row">
+ <a href="#filter_url">
+ <div data-trans="url_filter" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ <div class="row">
+ <a href="#universal_plug_and_play">
+ <div data-trans="upnp" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ <div class="row" style="display:none">
+ <a href="#demilitarized_zone">
+ <div data-trans="dmz" class="line-height-40 arrow-right cursorhand"></div>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
diff --git a/lynq/S300/BJMTN/ap/app/zte_webui/subpg/main.html b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/main.html
new file mode 100755
index 0000000..8a3fa27
--- /dev/null
+++ b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/main.html
@@ -0,0 +1,222 @@
+
+<div class="row margin-top-20">
+<div class="type_items">
+ <ul>
+ <li><a href="#child_ctl" data-bind="visible: hasParentalControl" data-trans="parental_control" class="c0EC6DC"></a></li>
+ <li><a href="#msg_main" data-bind="visible: hasSms" data-trans="sms" class="cF53A58"></a></li>
+ <li><a href="#usat" data-bind="visible:hasUssd" data-trans="USSD"></a></li>
+ <li><a href="#pb_main" data-bind="visible: hasPhonebook" data-trans="phonebook" class="c00AEFF"></a></li>
+ <li><a href="#sdcard" data-bind="visible: isSupportSD" data-trans="sd" class="c2175FF"></a></li>
+ <li><a data-bind="attr: {href: notDataCard? '#route_set' : '#demilitarized_zone'}" data-trans="advanced_settings" class="cFFCE2B"></a></li>
+ <li><a href="#fast_set" data-bind="visible: isSupportQuicksetting()" data-trans="quick_setting" class="cFFCE2B"></a></li>
+ <li><a href="https://my.mtn.bj/mon-routeur" target="_blank" data-bind="visible:hasBuyBundle" data-trans="buy_bundle"></a></li>
+ </ul>
+</div>
+</div>
+
+<div class="row margin-top-20" id="home_image">
+
+<div class="row">
+ <div style="position: relative">
+ <div class="internet_status_container">
+ <div data-bind=" css: {'item_icon_connect': cStatus()== 1, 'item_icon_disconnect': cStatus() != 1}"></div>
+ <h3 data-trans="net_surfing" class="home_h3"></h3>
+ <div class="net_surfing_list">
+ <ul>
+ <li><a id="h_connect_btn" href="javascript: void(0)" data-bind="visible: canConnect() && isShowHomeConnect(), click: connectHandler , css: {'h_connect_on': cStatus()== 1, 'h_connect_off': cStatus() != 1}" style="display: none;"></a></li>
+ <li><i class="up"></i><span data-bind="text: up_Speed"></span></li>
+ <li><i class="down"></i><span data-bind="text: down_Speed"></span></li>
+ <li><span data-bind="text: connected_Time"></span></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="network_control_container">
+ <div class="item_icon"></div>
+ <h3 data-trans="my_router" class="home_h3"></h3>
+ <!--div id="h_network_type" data-bind="text: networkType, css: {'no-btn': !(canConnect() && isShowHomeConnect())}"></div-->
+ <div class="my_router_list">
+ <ul>
+ <li data-bind="visible: hasRj45"><a id="opmode" data-bind="click: showOpModeWindow, css: {'not-allowed': enableFlag}" href="javascript:void(0)"></a></li>
+ <li><a data-bind="click: showNetworkSettingsWindow" data-trans="settings_internet" href="javascript:void(0)"></a></li>
+ <!--li><div id="h_ssid"></div></li-->
+ <li data-bind="visible: notDataCard"><a data-trans="settings_wireless" href="#wlan_main"></a></li>
+ </ul>
+ </div>
+ </div>
+
+ <!--div id="h_connect_status" data-bind="visible:notDataCard, css: {'h_status_connected': cStatus()== 1, 'h_status_disconnected': cStatus()== 2, 'h_status_connecting': cStatus()== 3, 'h_status_disconnecting': cStatus()== 4, }">
+ </div-->
+
+ <div data-bind="visible: notDataCard" onclick="window.location.hash='#conn_device'" class="connected_devices_container">
+ <div class="item_icon"></div>
+ <h3 data-trans="station_info" class="home_h3" ></h3>
+ <div style="text-align:center;display:inline" class="margin-top-20">
+ <div id="h_wire_device" data-bind="visible: hasRj45 && isCPE">
+ <span data-bind="text: wireDeviceNum" style="font-size:70px;"><em></em></span><sub data-trans="device_unit" style="font-size: 16px;"></sub>
+ <span data-trans="cable" style="font-size:15px;text-align:center;display:block"></span>
+ </div>
+ <div id="h_wireless_device" style="display-block">
+ <span data-bind="text: wirelessDeviceNum" style="font-size:70px"></span><sub data-trans="device_unit" style="font-size: 16px;"></sub>
+ <span data-trans="wireless" style="font-size:15px;text-align:center;display:block"></span>
+ </div>
+ </div>
+ <!--a href="#conn_device" id="h_attached_device_link">
+ </a-->
+ </div>
+ </div>
+</div>
+</div>
+
+
+<div class="row margin-top-20 label-font-normal margin-bottom-20">
+ <div class="text-center traffic_control_container" data-bind="visible: showTraffic()">
+ <h4 data-trans="traffic_data_plan" style="font-size:14px;text-align:right;padding-right:15px"></h4>
+ <div style="display:inline-block">
+ <div id="traffic_graphic" style="width: 200px; height: 165px; visibility: visible;"></div>
+ </div>
+ <div style="text-align: left;padding-left:20px;font-size:18px">
+ <span style="background-color: #8CC916;" class="color_block"></span>
+ <span data-trans="traffic_used" class="color_block_desc"></span>
+ <span class="color_block_desc">:</span>
+ <span data-bind="text: trafficUsed" class="color_block_desc"></span>
+ </div>
+ <div class="statistics_list">
+ <ul>
+ <li><a href="#flow_ctl">
+ <div data-bind="visible: trafficAlertEnable">
+ <span data-bind="text: trafficLimited" class="line-height-20"></span>
+ <span data-trans="traffic_limit_data" class="line-height-20"></span>
+ </div>
+ <div data-bind="visible: trafficAlertEnable() == false">
+ <div data-trans="traffic_not_set_limited" class="line-height-20"></div>
+ </div>
+ </a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ <div data-bind="css:{'device_info_container_hastraffic':showTraffic(),'device_info_container_notraffic':!showTraffic()}" class="device_info_container">
+ <h4 data-trans="device_info" style="font-size:14px;text-align:left;padding-left:15px;color:#fff"></h4>
+ <div style="color:#fff;position: relative;height: 210px;font-size: 18px;line-height: 1.5em;padding:20px 0px 0px 15px;">
+ <div class="row">
+ <label data-trans="sim_serial_number" class="col-xs-5"></label>
+ <label data-bind="text: simSerialNumber" class="col-xs-7"></label>
+ </div>
+ <div class="row">
+ <label data-trans="imei" class="col-xs-5"></label>
+ <label data-bind="text: imei" class="col-xs-7"></label>
+ </div>
+ <div class="row">
+ <label data-trans="imsi" class="col-xs-5"></label>
+ <label data-bind="text: imsi" class="col-xs-7"></label>
+ </div>
+ <!--div class="row" data-bind="visible: notDataCard">
+ <label class="col-xs-5" data-trans="wifi_range"></label>
+ <label class="col-xs-7" data-bind="attr: {'data-trans': wifiLongMode}"></label>
+ </div-->
+ <div class="row">
+ <label data-trans="signal_strength_label" class="col-xs-5"></label>
+ <label id="fresh_signal_strength" class="col-xs-7"></label>
+ </div>
+ <div class="row" data-bind="visible: hasWifi && showMultiSsid()">
+ <label data-trans="network_name_ssid1" class="col-xs-5"></label>
+ <label data-bind="text: ssid" style="word-wrap: break-word;" class="col-xs-7"></label>
+ </div>
+ <div class="row" data-bind="visible: hasWifi && !showMultiSsid()">
+ <label data-trans="network_name" class="col-xs-5"></label>
+ <label data-bind="text: ssid" style="word-wrap: break-word;" class="col-xs-7"></label>
+ </div>
+ </div>
+ <div style="text-align:right;">
+ <a href="javascript: void(0)" data-trans="detail_info" id="showDetailInfo" tabindex="0"></a>
+ </div>
+ </div>
+</div>
+
+
+<div id="h_qrcode" data-bind="visible: showQRCode" style="float:right" class="text-center">
+ <img id="qrcode_img" data-bind="attr: {src: qrcodeSrc}" src="./pic/res_blacktrans.png" width="111"/>
+</div>
+
+<script type="text/x-jquery-tmpl" id="detailInfoTmpl">
+<div class="row">
+ <label class="col-xs-6" data-trans="sim_serial_number" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= simSerialNumber %></label>
+</div>
+<div class="row">
+ <label data-trans="imei" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= imei %></label>
+</div>
+<div class="row">
+ <label data-trans="imsi" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= imsi %></label>
+</div>
+<div class="row">
+ <label data-trans="signal_strength_label" class="col-xs-6"></label>
+ <label class="col-xs-6" id="popoverSignalTxt"><%= signal %></label>
+</div>
+<% if(hasWifi){ %>
+<div class="row">
+ <label data-trans="<%= showMultiSsid ? 'network_name_ssid1': 'network_name' %>" class="col-xs-6"></label>
+ <label style="word-wrap: break-word; word-break: break-all;" class="col-xs-6"><%= ssid %></label>
+</div>
+<div class="row">
+ <label data-trans="<%= showMultiSsid ? 'max_access_num_ssid1': 'max_access_num' %>" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= max_access_num %></label>
+</div>
+ <% if(showMultiSsid){ %>
+ <div class="row">
+ <label data-trans="network_name_ssid2" class="col-xs-6"></label>
+ <label style="word-wrap: break-word; word-break: break-all;" class="col-xs-6"><%= m_ssid %></label>
+ </div>
+ <div class="row">
+ <label data-trans="max_access_num_ssid2" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= m_max_access_num %></label>
+ </div>
+ <% } %>
+<div class="row" style="display: none">
+ <label data-trans="wifi_range" class="col-xs-6"></label>
+ <label data-trans="<%= wifi_long_mode %>" class="col-xs-6"></label>
+</div>
+<% } %>
+<div class="row">
+ <label data-trans="cell_id" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= cellid %></label>
+</div>
+<div class="row">
+ <label data-trans="lan_domain" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= lanDomain %></label>
+</div>
+<div class="row">
+ <label data-trans="ip_address" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= ipAddress %></label>
+</div>
+<% if(showMacAddress){ %>
+<div class="row">
+ <label data-trans="mac_address" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= macAddress %></label>
+</div>
+<% } %>
+<% if(showIpv4WanIpAddr){ %>
+<div class="row">
+ <label data-trans="wan_ip_address" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= wanIpAddress %></label>
+</div>
+<% } %>
+<% if(showIpv6WanIpAddr){ %>
+<div class="row">
+ <label data-trans="ipv6_wan_ip_address" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= ipv6WanIpAddress %></label>
+</div>
+<% } %>
+<div class="row">
+ <label data-trans="software_version" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= sw_version %></label>
+</div>
+<div class="row">
+ <label data-trans="hardware_version" class="col-xs-6"></label>
+ <label class="col-xs-6"><%= hw_version %></label>
+</div>
+</script>
diff --git a/lynq/S300/ap/app/zte_webui/subpg/wifi_station_info.html b/lynq/S300/ap/app/zte_webui/subpg/wifi_station_info.html
new file mode 100755
index 0000000..50b8738
--- /dev/null
+++ b/lynq/S300/ap/app/zte_webui/subpg/wifi_station_info.html
@@ -0,0 +1,122 @@
+<div id="innerContainer">
+ <div class="row header-row">
+ <div class="col-xs-1">
+ <a href="#main">
+ <img alt="" src="pic/direct-back.png">
+ </a>
+ </div>
+ <div class="col-xs-11">
+ <div class="form-title form-title-multi">
+ <h1 data-trans='station_info'></h1>
+ <p data-trans="station_info_sub_title"></p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs-1 margin-top-15">
+ </div>
+ <div class="col-xs-11">
+
+<div id="station_info_div" class="form-body">
+ <div class="content ko-grid-container">
+ <div id="wireless_div">
+ <h2 data-trans="wireless_access_device"></h2>
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th data-trans="station_number" width="60"></th>
+ <th data-trans="host_name"></th>
+ <th width="100"></th>
+ <th data-trans="mac_address" width="200"></th>
+ <th data-trans="pc_action" data-bind="visible: supportBlock" width="150"></th>
+ </tr>
+ </thead>
+ <tbody data-bind="foreach:deviceInfo">
+ <tr data-bind="css: {odd: $index() % 2 == 0, even: $index() % 2 != 0}">
+ <td data-bind="text: $index()+1"></td>
+ <td>
+ <span data-bind="text: hostName, attr: {id: 'hostname_txt_'+idx}"></span>
+ <input data-bind="attr: {id: 'hostname_input_'+idx}" maxlength="20" style="display: none;" type="text" class="form-control">
+ </td>
+ <td>
+ <a data-bind="click: $root.editHostNameHandler, attr: {id: 'edit_btn_'+idx}" class="cursorhand"><img height="25" src="./pic/res_edit.png"></a>
+ <a data-bind="click: $root.saveHostNameHandler, attr: {id: 'save_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
+ <a data-bind="click: $root.cancelEditHostNameHandler, attr: {id: 'cancel_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
+ </td>
+ <td data-bind="text: macAddress"></td>
+ <td data-bind="visible: $root.supportBlock"><a data-trans="block" data-bind="visible: !inBlackGroup, css: {'not-allowed': disableFlag}, click: $root.wirelessBlockHandler" class="btn btn-primary btn-sm"></a></td>
+ </tr>
+ </tbody>
+ </table>
+ <p data-bind="visible: deviceInfo().length == 0" data-trans="no_data"></p>
+ </div>
+
+ <div id="cable_div" data-bind="visible: showCableDiv">
+ <h2 data-trans="cable_access_device"></h2>
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th data-trans="station_number" width="60"></th>
+ <th data-trans="host_name"></th>
+ <th width="100"></th>
+ <th data-trans="mac_address" width="350"></th>
+ </tr>
+ </thead>
+ <tbody data-bind="foreach:cableDeviceInfo">
+ <tr data-bind="css: {odd: $index() % 2 == 0, even: $index() % 2 != 0}">
+ <td data-bind="text: $index()+1"></td>
+ <td>
+ <span data-bind="text: hostName, attr: {id: 'hostname_txt_'+idx}"></span>
+ <input data-bind="attr: {id: 'hostname_input_'+idx}" maxlength="20" type="text" style="display: none;" class="form-control">
+ </td>
+ <td>
+ <a data-bind="click: $root.editHostNameHandler, attr: {id: 'edit_btn_'+idx}" class="cursorhand" ><img height="25" src="./pic/res_edit.png"></a>
+ <a data-bind="click: $root.saveHostNameHandler, attr: {id: 'save_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
+ <a data-bind="click: $root.cancelEditHostNameHandler, attr: {id: 'cancel_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
+ </td>
+ <td data-bind="text: macAddress"></td>
+ </tr>
+ </tbody>
+ </table>
+ <p data-bind="visible: cableDeviceInfo().length == 0" data-trans="no_data"></p>
+ </div>
+
+ <div id="black_div" data-bind="visible: showBlackDiv">
+ <h2 data-trans="black_list"></h2>
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th data-trans="station_number" width="60"></th>
+ <th data-trans="host_name" style="display:none"></th>
+ <th style="display:none" width="100"></th>
+ <th data-trans="mac_address"></th>
+ <th data-trans="pc_action" width="150"></th>
+ </tr>
+ </thead>
+ <tbody data-bind="foreach:blackDevices">
+ <tr data-bind="css: {odd: $index() % 2 == 0, even: $index() % 2 != 0}">
+ <td data-bind="text: $index()+1"></td>
+ <td style="display:none">
+ <span data-bind="text: hostName, attr: {id: 'hostname_txt_'+idx}"></span>
+ <input data-bind="attr: {id: 'hostname_input_'+idx}" maxlength="20" style="display: none;" type="text" class="form-control">
+ </td>
+ <td style="display:none">
+ <a data-bind="click: $root.editHostNameHandler, attr: {id: 'edit_btn_'+idx}" class="cursorhand"><img height="25" src="./pic/res_edit.png"></a>
+ <a data-bind="click: $root.saveHostNameHandler, attr: {id: 'save_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
+ <a data-bind="click: $root.cancelEditHostNameHandler, attr: {id: 'cancel_btn_'+idx}" style="display: none;" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
+ </td>
+ <td data-bind="text: macAddress"></td>
+ <td><a data-trans="pc_remove" data-bind="click: $root.blacklistRemoveHandler" class="btn btn-primary btn-sm"></a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div data-bind="visible: showPCLink">
+ <span data-trans="station_info_desc"></span> <a data-trans="parental_control" href="#child_ctl"></a>
+ </div>
+ </div>
+</div>
+ </div>
+</div>
+</div>