first commit
This commit is contained in:
teasiu
236
webs/mf761/web1/subpg/status_traffic_alert.html
Normal file
236
webs/mf761/web1/subpg/status_traffic_alert.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<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='traffic_alert'></h1>
|
||||
<p data-trans="traffic_sub_title"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-1 margin-top-15">
|
||||
</div>
|
||||
<div class="col-xs-11">
|
||||
|
||||
<form id="trafficAlertForm">
|
||||
<div id="traffic_alert" class="form-body">
|
||||
<div class="content">
|
||||
<div class="row form-group">
|
||||
<label data-trans="traffic_apply_volume_limit" class="col-xs-3 side-right"></label>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<input id="dataLimitEnable" name="dataLimitEnable" data-bind="checked: dataLimitChecked" type="radio" value="1"/>
|
||||
<label data-trans="enable" for="dataLimitEnable"></label>
|
||||
</div>
|
||||
<div class="col-xs-4" style="width: 35%;">
|
||||
<input id="dataLimitDisable" name="dataLimitEnable" data-bind="checked: dataLimitChecked" type="radio" value="0"/>
|
||||
<label data-trans="disable" for="dataLimitDisable"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind='visible: dataLimitChecked() == "1"' class="row form-group">
|
||||
<label data-trans="traffic_data_limit_type" class="col-xs-3 side-right"></label>
|
||||
<div class="col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<input id="dataLimitTypeData" name="dataLimitType" data-bind="checked: dataLimitTypeChecked" type="radio" value="1"/>
|
||||
<label data-trans="traffic_data" for="dataLimitTypeData"></label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<input id="dataLimitTypeTime" name="dataLimitType" data-bind="checked: dataLimitTypeChecked" type="radio" value="0"/>
|
||||
<label data-trans="traffic_time" for="dataLimitTypeTime"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-group" data-bind='visible: dataLimitChecked() == "1"'>
|
||||
<div class="col-xs-4">
|
||||
<div id="traffic_graphic" style="width: 200px; height: 200px; visibility: visible;"></div>
|
||||
</div>
|
||||
<div class="col-xs-8 line-height-40 form-inline form-group-sm">
|
||||
<div data-bind="visible: dataLimitTypeChecked() == 1">
|
||||
<div>
|
||||
<div data-bind="visible: viewEditUsedData() == false">
|
||||
<span style="background-color: #8CC916;" class="color_block"></span>
|
||||
<span data-trans="traffic_used_text" data-bind="html: usedDataTextDesc, attr:{'data-trans-data': usedDataTextDescData}"></span>
|
||||
<a id="editUsedData" data-bind="click: editUsedDataHandler" class="margin-left-3em cursorhand"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div data-bind="visible: viewEditUsedData" id="viewEditUsedData">
|
||||
<span class="color_block" style="background-color: #8CC916;"></span>
|
||||
<input id='dataUsed' name="dataUsed" data-bind="value: dataUsed" maxlength='7' minlength='1' style="width: 100px;" type="text" class="required form-control border-color-transition"/>
|
||||
<select name="selectedDataUsedUnit" id="selectedDataUsedUnit" data-bind="value: selectedDataUsedUnit" class="width60 form-control" style="width: 80px;">
|
||||
<option value="1">MB</option>
|
||||
<option value="1024">GB</option>
|
||||
<option value="1048576">TB</option>
|
||||
</select>
|
||||
<a id="editUsedDataSave" data-bind="click: editUsedDataSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editUsedDataCancel" data-bind="click: editUsedDataCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editUsedDataDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="background-color: #ccc;" class="color_block"></span>
|
||||
<span data-trans="traffic_data_left_text" data-bind="text: leftDataDesc, attr:{'data-trans-data': leftDataDescData}"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div data-bind="visible: viewEditAlertData() == false">
|
||||
<span data-trans="traffic_alert_reach_text" data-bind="text: alertDataReachDesc, attr:{'data-trans-data': alertDataReachDescData}"></span>
|
||||
<a id="editAlertData" data-bind="click: editAlertDataHandler" class="margin-left-3em cursorhand"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div id="viewEditAlertData" data-bind="visible: viewEditAlertData">
|
||||
<span data-trans="traffic_when"></span>
|
||||
<input id='alertDataReach' name="alertDataReach" data-bind="value: alertDataReach" max="100" maxlength='3' min="1" minlength='1' style="width: 60px;" type="text" class="required form-control border-color-transition"/>
|
||||
<span data-trans="traffic_remind_me"></span>
|
||||
<a id="save_btn_2" data-bind="click: editAlertDataSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editAlertDataCancel" data-bind="click: editAlertDataCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editAlertDataDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div data-bind="visible: viewEditTotalData() == false">
|
||||
<span data-trans="traffic_limit_data_text" data-bind="html: limitDataMonthDesc, attr:{'data-trans-data': limitDataMonthDescData}"></span>
|
||||
<a class="margin-left-3em cursorhand" id="editTotalData" data-bind="click: editTotalDataHandler"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div data-bind="visible: viewEditTotalData" id="viewEditTotalData">
|
||||
<input id='limitDataMonth' name="limitDataMonth" data-bind="value: limitDataMonth" maxlength='7' minlength='1' style="width: 100px;" type="text" class="required form-control border-color-transition"/>
|
||||
<select id="selectedDataUnit" name="dataUnit" data-bind="value: selectedDataUnit" style="width: 80px;" class="width60 form-control">
|
||||
<option value="1">MB</option>
|
||||
<option value="1024">GB</option>
|
||||
<option value="1048576">TB</option>
|
||||
</select>
|
||||
<a id="save_btn_1" data-bind="click: editTotalDataSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editTotalDataCancel" data-bind="click: editTotalDataCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editTotalDataDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind="visible: dataLimitTypeChecked() == 0">
|
||||
<div>
|
||||
<div data-bind="visible: viewEditUsedTime() == false">
|
||||
<span style="background-color: #8CC916;" class="color_block"></span>
|
||||
<span data-trans="traffic_used_text" data-bind="html: usedTimeTextDesc, attr:{'data-trans-data': usedTimeTextDescData}"></span>
|
||||
<a id="editUsedTime" data-bind="click: editUsedTimeHandler" class="margin-left-3em cursorhand"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div data-bind="visible: viewEditUsedTime">
|
||||
<span class="color_block" style="background-color: #8CC916;"></span>
|
||||
<!--div class="input-group"-->
|
||||
<input id='usedTime' name="usedTime" data-bind="value: usedTime" maxlength='7' minlength='1' style="width: 100px;" type="text" class="required form-control border-color-transition"/>
|
||||
<!--div class="input-group-addon" data-trans="hours"></div-->
|
||||
<select id="selectedTimeUsedUnit" name="selectedTimeUsedUnit" data-bind="value: selectedTimeUsedUnit" style="width: 100px;" class="width60 form-control">
|
||||
<option data-trans="minutes" value="60"></option>
|
||||
<option data-trans="hours" value="3600"></option>
|
||||
</select>
|
||||
<!--/div-->
|
||||
<a data-bind="click: editUsedTimeSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editUsedTimeCancel" data-bind="click: editUsedTimeCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editUsedTimeDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span style="background-color: #ccc;" class="color_block"></span>
|
||||
<span data-trans="traffic_data_left_text" data-bind="text: leftTimeDesc, attr:{'data-trans-data': leftTimeDescData}"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div data-bind="visible: viewEditAlertTime() == false">
|
||||
<span data-trans="traffic_alert_reach_text" data-bind="text: alertTimeReachDesc, attr:{'data-trans-data': alertTimeReachDescData}"></span>
|
||||
<a id="editAlertTime" data-bind="click: editAlertTimeHandler" class="margin-left-3em cursorhand"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div data-bind="visible: viewEditAlertTime">
|
||||
<span data-trans="traffic_when"></span>
|
||||
<div class="input-group">
|
||||
<input id='alertTimeReach' name="alertTimeReach" type="text" data-bind="value: alertTimeReach" max="100" maxlength='3' min="1" minlength='1' style="width: 60px;" class="required form-control border-color-transition"/>
|
||||
<div data-trans="traffic_percent" class="input-group-addon"></div>
|
||||
</div>
|
||||
<span data-trans="traffic_remind_me_time"></span>
|
||||
<a data-bind="click: editAlertTimeSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editAlertTimeCancel" data-bind="click: editAlertTimeCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editAlertTimeDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div data-bind="visible: viewEditTotalTime() == false">
|
||||
<span data-bind="text: limitTimeMonthDesc, attr:{'data-trans':limitTimeMonthDescText,'data-trans-data': limitTimeMonthDescData}"></span>
|
||||
<a id="editTotalTime" data-bind="click: editTotalTimeHandler" class="margin-left-3em cursorhand"><img src="./pic/res_edit.png"></a>
|
||||
</div>
|
||||
<div data-bind="visible: viewEditTotalTime">
|
||||
<!--div class="input-group"-->
|
||||
<input id='limitTimeMonth' name="limitTimeMonth" data-bind="value: limitTimeMonth" maxlength='7' minlength='1' style="width: 100px;" type="text" class="required form-control border-color-transition"/>
|
||||
<!--div class="input-group-addon" data-trans="hours"></div-->
|
||||
<select id="selectedTimeUnit" name="timeUnit" data-bind="value: selectedTimeUnit" style="width: 100px;" class="width60 form-control">
|
||||
<option data-trans="minutes" value="60"></option>
|
||||
<option data-trans="hours" value="3600"></option>
|
||||
</select>
|
||||
<!--/div-->
|
||||
<a data-bind="click: editTotalTimeSaveHandler" class="cursorhand"><img height="25" src="./pic/res_save.png"></a>
|
||||
<a id="editTotalTimeCancel" data-bind="click: editTotalTimeCancelHandler" class="cursorhand"><img height="25" src="./pic/res_cancel.png"></a>
|
||||
<div id="editTotalTimeDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--div style="display: none;" class="col-xs-8">
|
||||
<div data-bind='visible: dataLimitChecked() == "1" && dataLimitTypeChecked() != "0"' class="row">
|
||||
<label for='limitDataMonth' data-trans='traffic_limit_data_month' class="span4 side-right"></label>
|
||||
<div class="span8">
|
||||
<input id='limitDataMonth' name="limitDataMonth" data-bind="value: limitDataMonth" maxlength='4' minlength='1' type="text" class="required"/>
|
||||
<select id="dataUnit" name="dataUnit" data-bind="value: selectedDataUnit" class="width60">
|
||||
<option value="1">MB</option>
|
||||
<option value="1024">GB</option>
|
||||
<option value="1048576">TB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind='visible: dataLimitChecked() == "1" && dataLimitTypeChecked() != "0"'>
|
||||
<label data-trans='traffic_alert_when_data_reach' for='alertDataReach' class="span4 side-right"></label>
|
||||
<div class="span8">
|
||||
<input id='alertDataReach' name="alertDataReach" data-bind="value: alertDataReach" maxlength='3' minlength='1' type="text" class="required"/>
|
||||
<label id="traffic_data_percent" data-trans="traffic_percent"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind='visible: dataLimitChecked() == "1" && dataLimitTypeChecked() != "1"' class="row">
|
||||
<label data-trans='traffic_limit_time_month' for='limitTimeMonth' class="span4 side-right"></label>
|
||||
<div class="span8">
|
||||
<input id='limitTimeMonth' name="limitTimeMonth" data-bind="value: limitTimeMonth" maxlength='4' minlength='1' type="text" class="required"/>
|
||||
<label id="hours" data-trans="hours"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind='visible: dataLimitChecked() == "1" && dataLimitTypeChecked() != "1"' class="row">
|
||||
<label for='alertTimeReach' data-trans='traffic_alert_when_time_reach' class="span4 side-right"></label>
|
||||
<div class="span8">
|
||||
<input id='alertTimeReach' name="alertTimeReach" data-bind="value: alertTimeReach" maxlength='3' minlength='1' type="text" class="required"/>
|
||||
<label id="traffic_time_percent" data-trans="traffic_percent"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
<div class="row form-group">
|
||||
<!--span id="noteinfo" data-trans="traffic_data_approximated"></span-->
|
||||
<label id="noteinfo" data-trans="traffic_data_approximated" class="col-xs-12"></label>
|
||||
</div>
|
||||
<div class="row form-group">
|
||||
<div class="col-xs-6"></div>
|
||||
<div class="col-xs-6 align-right">
|
||||
<input data-trans='apply' type="submit" formmethod="post" class="btn btn-primary margin-right-20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-note">
|
||||
<div class="notes-title"> </div>
|
||||
<ul class="notes-content">
|
||||
<li data-trans="traffic_calibrate_note"></li>
|
||||
<li data-trans="traffic_note"></li>
|
||||
<li data-trans="traffic_over_note"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user