1 line
12 KiB
HTML
1 line
12 KiB
HTML
<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"><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> |