[Bugfix][S300][bug-view-2184][webui] fix ota webui display error base
Change-Id: I653bcc35bea53c0e5dccf0944906b8f0e52dc5f8
diff --git a/lynq/R306_MTN/BJMTN/ap/app/zte_webui/subpg/ota_update.html b/lynq/R306_MTN/BJMTN/ap/app/zte_webui/subpg/ota_update.html
new file mode 100755
index 0000000..8d59382
--- /dev/null
+++ b/lynq/R306_MTN/BJMTN/ap/app/zte_webui/subpg/ota_update.html
@@ -0,0 +1,244 @@
+<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 data-bind="visible: isDataCard"><a href="#demilitarized_zone" data-trans="dmz_setting"></a></li>
+ <li data-bind="visible: isDataCard"><a href="#pin_mode" data-trans="pin_management"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#wlan_sleep" data-trans="sleep_mode"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#route_set" data-trans="router_setting"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#filter_main" data-trans="firewall"></a></li>
+ <li data-bind="visible:hasUpdateCheck" class="active"><a href="#fota" data-trans="update_settings"></a></li>
+ <!-- <li data-bind="visible:hasUssd"><a href="#usat" data-trans="USSD"></a></li> -->
+ <li data-bind="visible:hasDdns"><a href="#dynamic_dns" data-trans="DDNS"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#more" data-trans="others"></a></li>
+ <li><a data-trans="tr069" href="#tr069"></a></li>
+ </ul>
+ </div>
+ </div>
+
+<div class="col-xs-10">
+<form id="frmOTAUpdate" role="form" data-bind="visible: updateType() == 'mifi_fota'">
+ <!-- <h3 data-trans="ota_update_manual" class="form-title"></h3 -->
+ <div class="form-body margin-top-20">
+ <!--div class="content">
+ <div class="row">
+ <div class="col-xs-6">
+ <span data-trans="ota_last_update_check"></span>
+ <span data-bind="text: lastCheckTime"></span>
+ </div>
+ <div class="col-xs-6 align-right">
+ <input id="btnCheckNewVersion" data-bind="click:checkNewVersion" data-trans="ota_check_new_version" type="button" class="btn btn-primary margin-right-20"/>
+ </div>
+ </div>
+ <div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="ota_check_new_version_desc"></li>
+ </ul>
+ </div>
+ </div-->
+
+ <!--div class="form-title" data-trans='ota_update_manual'></div>
+ <div class="content">
+ <span class="paddingleft25" data-trans="ota_check_new_version_desc"></span>
+ </div>
+ <div class="form-buttons">
+ <input id="btnCheckNewVersion" type="button" class="btn btn-primary" data-trans="ota_check_new_version"
+ data-bind="click:checkNewVersion"/>
+ </div>
+ <div class="form-title" data-trans='ota_update_setting'></div-->
+ <div class="content">
+ <!--
+ <h3 data-trans="ota_update_setting" class="form-title"></h3>
+ <div class="row">
+ <label data-trans="ota_auto_update_switch" class="col-xs-4 side-right"></label>
+ <div class="col-xs-8">
+ <div class="row form-group">
+ <div class="col-xs-3">
+ <input id="auto_update_enable" name="updateMode" data-bind="checked: updateMode" type="radio" value="1"/>
+ <label data-trans="enable" for="auto_update_enable"></label>
+ </div>
+ <div class="col-xs-3">
+ <input id="auto_update_disable" name="updateMode" data-bind="checked: updateMode" type="radio" value="0"/>
+ <label data-trans="disable" for="auto_update_disable"></label>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row form-group" data-bind="visible: false">
+ <label data-trans="ota_update_interval_day" for="selInterValDay" class="col-xs-4 side-right"></label>
+
+ <div class="col-xs-3">
+ <select id="selInterValDay" name="selInterValDay" data-bind="value: updateIntervalDay" class="form-control">
+ <option data-trans="ota_update_every_day" value="1"></option>
+ <option data-trans="ota_update_15_day" value="15"></option>
+ <option data-trans="ota_update_30_day" value="30"></option>
+ </select>
+ </div>
+ </div>
+ <div class="row form-group" data-bind="visible: updateMode()=='1'">
+ <div class="col-xs-12 padding-top-10">
+ <p class="checkbox" data-bind="css:{'checkbox_selected': allowRoamingUpdate()=='1'}, click: clickAllowRoamingUpdate"
+ manualControl="true">
+ <input id="chkUpdateRoamPermission" name="chkUpdateRoamPermission" data-bind="checked:allowRoamingUpdate()=='1'" type="checkbox" value="1"/>
+ </p>
+ <label data-trans="ota_update_roaming_remind" class="update_inline floatleft"></label>
+ </div>
+ </div>
+
+ <div class="form-buttons">
+ <input id="btnApply" data-trans="apply" type="submit" formmethod="post" class="btn btn-primary"/>
+ </div-->
+
+ <!--
+ <div class="row form-group">
+ <label data-trans="ota_manual_upgrade_url" class="col-xs-4 side-right"></label>
+ <div class="col-xs-3">
+ <input id="upgrade_url" type="text" size="128" data-bind="value:updateURL" class="required form-control">
+ </div>
+ </div>
+ <div class="form-buttons">
+ <input id="btnOtaUpgApply" data-bind="click:ota_upgrade_apply" data-trans="download" type="submit" formmethod="post" class="btn btn-primary"/>
+ </div-->
+
+ <!--div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="fota_note1"></li>
+ </ul>
+ </div-->
+ </div>
+
+ </div>
+</form>
+<!--form id="frmNativeUpdate" data-bind="visible: updateType() == 'mifi_local'" method="post" name="UploadFile" id="UploadFile" action="../../cgi-bin/upload.cgi" enctype="multipart/form-data" target="ifr">
+ <div class="form-body">
+ <h3 class="form-title" data-trans="software_upload"></h3>
+ <table style="width:100%">
+ <input type="text" id="upfile" size="20" style="height:35px; width:200px; display:inline-block;" readonly />
+ <input type="button" class="btn btn-primary" data-trans='browse_btn' style="height:34px; width:81px;" />
+ <input id="fileName" class="form-control" type="file" name="fileName" style="margin-left: 15px;background-color:#E3E3E3;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px; width:280px; display:inline-block;" />
+ <input class="btn btn-primary" id="fileuploadsubmit" type="submit" formmethod="post" data-trans="ota_title" style="float:right; margin-top:8px; margin-right: 20px;" />
+ </table>
+ <iframe name="ifr" id="ifr" style="display:none;"></iframe>
+ </div>
+</form-->
+
+
+<!-- <br><br> -->
+<form id="uploadForm" action="../../cgi-bin/upload/upload.cgi" method="post" enctype="multipart/form-data">
+ <h3 class="form-title" data-trans="local_upload"></h3>
+ <div class="row form-group col-xs-4 side-right">
+ <label for="fileInput" data-trans="software_upload" style="display: none;"></label>
+ <input class="required form-control btn btn-primary" type="file" id="fileInput" name="file" style="display: none;">
+ <label for="fileInput" class="required btn btn-primary" data-trans="browse_btn" style="width: 70px;"></label>
+ <span id="fileNameDisplay" style="margin-left: 10px; font-weight: normal;"></span>
+ </div>
+ <br><br>
+ <div style="text-align: right; padding-right: 20px;">
+ <button class="btn btn-primary" type="submit" data-trans="ota_title" id="submitButton" disabled></button>
+ </div>
+</form>
+
+
+ <div id="uploadSection" data-bind="visible: updateType() == 'mifi_local'">
+ <h3 class="form-title" data-trans="software_upload"></h3>
+ <iframe id="fileUploadIframe" name="fileUploadIframe" frameborder="0" height="0" scrolling="no" style="height:0px;width:0px;" width="0"></iframe>
+ <form id="fileUploadForm" name="fileUploadForm" action="../../cgi-bin/upload/upload.cgi" enctype="multipart/form-data" method="post" target="fileUploadIframe">
+ <input id="fileField" name="filename" dir="ltr" maxlength="200" type="file"/>
+ <div class="fileUploadDiv">
+ <input id="fileUploadApplyBtn" name="fileUploadApplyBtn" data-trans="ota_title" type="button" onclick="fileUploadSubmitClickHandler();" class="btn btn-primary margin-left-5 margin-top-2"/>
+ </div>
+ <div class="clear"></div>
+ </form>
+ </div>
+ <form data-bind="visible: updateType() == 'mifi_local'">
+ <div class="form-body">
+ <div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="local_note"></li>
+ </ul>
+ </div>
+ </div>
+ </form>
+</div>
+</div>
+</div>
+
+<script>
+ const fileInput = document.getElementById('fileInput');
+ const fileNameDisplay = document.getElementById('fileNameDisplay');
+ const submitButton = document.getElementById('submitButton');
+ const uploadForm = document.getElementById('uploadForm');
+ const browseButton = document.querySelector('label[for="fileInput"].btn.btn-primary');
+
+ fileInput.addEventListener('change', function () {
+ fileNameDisplay.textContent = '';
+ submitButton.disabled = true;
+
+ const file = fileInput.files[0];
+ if (file) {
+ if (file.size > 2097152) {
+ errorOverlay("file_verify_error");
+ return;
+ }
+ fileNameDisplay.textContent = file.name;
+ submitButton.disabled = false;
+ }
+ });
+
+ browseButton.addEventListener('click', function () {
+ fileInput.value = '';
+ });
+
+ uploadForm.addEventListener('submit', function (event) {
+ event.preventDefault();
+ showLoading("upload_file");
+
+ const formData = new FormData(uploadForm);
+ console.log("Form data submitted:", formData);
+
+ fetch(uploadForm.action, {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ return response.text();
+ })
+ .then(text => {
+ console.log("Server response:", text);
+ try {
+ const data = JSON.parse(text);
+ if (data.success) {
+ showAlert("start_update");
+ } else {
+ errorOverlay("verify_error");
+ }
+ } catch (error) {
+ console.error("Upload error:", error);
+ errorOverlay("File upload successful: Server returned non-JSON response.");
+ }
+ })
+ .catch(error => {
+ console.error("Upload error:", error);
+ errorOverlay("upload_error");
+ });
+ });
+</script>
\ No newline at end of file
diff --git a/lynq/S300/BJMTN/ap/app/zte_webui/subpg/ota_update.html b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/ota_update.html
new file mode 100755
index 0000000..166d337
--- /dev/null
+++ b/lynq/S300/BJMTN/ap/app/zte_webui/subpg/ota_update.html
@@ -0,0 +1,243 @@
+<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 data-bind="visible: isDataCard"><a href="#demilitarized_zone" data-trans="dmz_setting"></a></li>
+ <li data-bind="visible: isDataCard"><a href="#pin_mode" data-trans="pin_management"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#wlan_sleep" data-trans="sleep_mode"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#route_set" data-trans="router_setting"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#filter_main" data-trans="firewall"></a></li>
+ <li data-bind="visible:hasUpdateCheck" class="active"><a href="#fota" data-trans="update_settings"></a></li>
+ <!-- <li data-bind="visible:hasUssd"><a href="#usat" data-trans="USSD"></a></li> -->
+ <li data-bind="visible:hasDdns"><a href="#dynamic_dns" data-trans="DDNS"></a></li>
+ <li data-bind="visible: !isDataCard"><a href="#more" data-trans="others"></a></li>
+ <li><a data-trans="tr069" href="#tr069"></a></li>
+ </ul>
+ </div>
+ </div>
+
+<div class="col-xs-10">
+<form id="frmOTAUpdate" role="form" data-bind="visible: updateType() == 'mifi_fota'">
+ <!-- <h3 data-trans="ota_update_manual" class="form-title"></h3 -->
+ <div class="form-body margin-top-20">
+ <!--div class="content">
+ <div class="row">
+ <div class="col-xs-6">
+ <span data-trans="ota_last_update_check"></span>
+ <span data-bind="text: lastCheckTime"></span>
+ </div>
+ <div class="col-xs-6 align-right">
+ <input id="btnCheckNewVersion" data-bind="click:checkNewVersion" data-trans="ota_check_new_version" type="button" class="btn btn-primary margin-right-20"/>
+ </div>
+ </div>
+ <div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="ota_check_new_version_desc"></li>
+ </ul>
+ </div>
+ </div-->
+
+ <!--div class="form-title" data-trans='ota_update_manual'></div>
+ <div class="content">
+ <span class="paddingleft25" data-trans="ota_check_new_version_desc"></span>
+ </div>
+ <div class="form-buttons">
+ <input id="btnCheckNewVersion" type="button" class="btn btn-primary" data-trans="ota_check_new_version"
+ data-bind="click:checkNewVersion"/>
+ </div>
+ <div class="form-title" data-trans='ota_update_setting'></div-->
+ <div class="content">
+ <!--
+ <h3 data-trans="ota_update_setting" class="form-title"></h3>
+ <div class="row">
+ <label data-trans="ota_auto_update_switch" class="col-xs-4 side-right"></label>
+ <div class="col-xs-8">
+ <div class="row form-group">
+ <div class="col-xs-3">
+ <input id="auto_update_enable" name="updateMode" data-bind="checked: updateMode" type="radio" value="1"/>
+ <label data-trans="enable" for="auto_update_enable"></label>
+ </div>
+ <div class="col-xs-3">
+ <input id="auto_update_disable" name="updateMode" data-bind="checked: updateMode" type="radio" value="0"/>
+ <label data-trans="disable" for="auto_update_disable"></label>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row form-group" data-bind="visible: false">
+ <label data-trans="ota_update_interval_day" for="selInterValDay" class="col-xs-4 side-right"></label>
+
+ <div class="col-xs-3">
+ <select id="selInterValDay" name="selInterValDay" data-bind="value: updateIntervalDay" class="form-control">
+ <option data-trans="ota_update_every_day" value="1"></option>
+ <option data-trans="ota_update_15_day" value="15"></option>
+ <option data-trans="ota_update_30_day" value="30"></option>
+ </select>
+ </div>
+ </div>
+ <div class="row form-group" data-bind="visible: updateMode()=='1'">
+ <div class="col-xs-12 padding-top-10">
+ <p class="checkbox" data-bind="css:{'checkbox_selected': allowRoamingUpdate()=='1'}, click: clickAllowRoamingUpdate"
+ manualControl="true">
+ <input id="chkUpdateRoamPermission" name="chkUpdateRoamPermission" data-bind="checked:allowRoamingUpdate()=='1'" type="checkbox" value="1"/>
+ </p>
+ <label data-trans="ota_update_roaming_remind" class="update_inline floatleft"></label>
+ </div>
+ </div>
+
+ <div class="form-buttons">
+ <input id="btnApply" data-trans="apply" type="submit" formmethod="post" class="btn btn-primary"/>
+ </div-->
+
+ <div class="row form-group">
+ <label data-trans="ota_manual_upgrade_url" class="col-xs-4 side-right"></label>
+ <div class="col-xs-3">
+ <input id="upgrade_url" type="text" size="128" data-bind="value:updateURL" class="required form-control">
+ </div>
+ </div>
+ <div class="form-buttons">
+ <input id="btnOtaUpgApply" data-bind="click:ota_upgrade_apply" data-trans="download" type="submit" formmethod="post" class="btn btn-primary"/>
+ </div>
+
+ <!--div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="fota_note1"></li>
+ </ul>
+ </div-->
+ </div>
+
+ </div>
+</form>
+<!--form id="frmNativeUpdate" data-bind="visible: updateType() == 'mifi_local'" method="post" name="UploadFile" id="UploadFile" action="../../cgi-bin/upload.cgi" enctype="multipart/form-data" target="ifr">
+ <div class="form-body">
+ <h3 class="form-title" data-trans="software_upload"></h3>
+ <table style="width:100%">
+ <input type="text" id="upfile" size="20" style="height:35px; width:200px; display:inline-block;" readonly />
+ <input type="button" class="btn btn-primary" data-trans='browse_btn' style="height:34px; width:81px;" />
+ <input id="fileName" class="form-control" type="file" name="fileName" style="margin-left: 15px;background-color:#E3E3E3;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px; width:280px; display:inline-block;" />
+ <input class="btn btn-primary" id="fileuploadsubmit" type="submit" formmethod="post" data-trans="ota_title" style="float:right; margin-top:8px; margin-right: 20px;" />
+ </table>
+ <iframe name="ifr" id="ifr" style="display:none;"></iframe>
+ </div>
+</form-->
+
+
+<!-- <br><br> -->
+<form id="uploadForm" action="../../cgi-bin/upload/upload.cgi" method="post" enctype="multipart/form-data">
+ <h3 class="form-title" data-trans="local_upload"></h3>
+ <div class="row form-group col-xs-4 side-right">
+ <label for="fileInput" data-trans="software_upload" style="display: none;"></label>
+ <input class="required form-control btn btn-primary" type="file" id="fileInput" name="file" style="display: none;">
+ <label for="fileInput" class="required btn btn-primary" data-trans="browse_btn" style="width: 70px;"></label>
+ <span id="fileNameDisplay" style="margin-left: 10px; font-weight: normal;"></span>
+ </div>
+ <br><br>
+ <div style="text-align: right; padding-right: 20px;">
+ <button class="btn btn-primary" type="submit" data-trans="ota_title" id="submitButton" disabled></button>
+ </div>
+</form>
+
+
+ <div id="uploadSection" data-bind="visible: updateType() == 'mifi_local'">
+ <h3 class="form-title" data-trans="software_upload"></h3>
+ <iframe id="fileUploadIframe" name="fileUploadIframe" frameborder="0" height="0" scrolling="no" style="height:0px;width:0px;" width="0"></iframe>
+ <form id="fileUploadForm" name="fileUploadForm" action="../../cgi-bin/upload/upload.cgi" enctype="multipart/form-data" method="post" target="fileUploadIframe">
+ <input id="fileField" name="filename" dir="ltr" maxlength="200" type="file"/>
+ <div class="fileUploadDiv">
+ <input id="fileUploadApplyBtn" name="fileUploadApplyBtn" data-trans="ota_title" type="button" onclick="fileUploadSubmitClickHandler();" class="btn btn-primary margin-left-5 margin-top-2"/>
+ </div>
+ <div class="clear"></div>
+ </form>
+ </div>
+ <form data-bind="visible: updateType() == 'mifi_local'">
+ <div class="form-body">
+ <div class="form-note">
+ <div class="notes-title"> </div>
+ <ul class="notes-content">
+ <li data-trans="local_note"></li>
+ </ul>
+ </div>
+ </div>
+ </form>
+</div>
+</div>
+</div>
+
+<script>
+ const fileInput = document.getElementById('fileInput');
+ const fileNameDisplay = document.getElementById('fileNameDisplay');
+ const submitButton = document.getElementById('submitButton');
+ const uploadForm = document.getElementById('uploadForm');
+ const browseButton = document.querySelector('label[for="fileInput"].btn.btn-primary');
+
+ fileInput.addEventListener('change', function () {
+ fileNameDisplay.textContent = '';
+ submitButton.disabled = true;
+
+ const file = fileInput.files[0];
+ if (file) {
+ if (file.size > 2097152) {
+ errorOverlay("file_verify_error");
+ return;
+ }
+ fileNameDisplay.textContent = file.name;
+ submitButton.disabled = false;
+ }
+ });
+
+ browseButton.addEventListener('click', function () {
+ fileInput.value = '';
+ });
+
+ uploadForm.addEventListener('submit', function (event) {
+ event.preventDefault();
+ showLoading("upload_file");
+
+ const formData = new FormData(uploadForm);
+ console.log("Form data submitted:", formData);
+
+ fetch(uploadForm.action, {
+ method: 'POST',
+ body: formData
+ })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ return response.text();
+ })
+ .then(text => {
+ console.log("Server response:", text);
+ try {
+ const data = JSON.parse(text);
+ if (data.success) {
+ showAlert("start_update");
+ } else {
+ errorOverlay("verify_error");
+ }
+ } catch (error) {
+ console.error("Upload error:", error);
+ errorOverlay("File upload successful: Server returned non-JSON response.");
+ }
+ })
+ .catch(error => {
+ console.error("Upload error:", error);
+ errorOverlay("upload_error");
+ });
+ });
+</script>
\ No newline at end of file