Guest User

sourcecode_intesis

a guest
Jul 5th, 2018
394
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 39.36 KB | None | 0 0
  1.  
  2. <!doctype html>
  3. <html class="no-js" lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9. <!-- Page information -->
  10. <title>Intesis | Webserver</title>
  11.  
  12. <!-- Meta SEO -->
  13. <meta name="description" content="Webserver Config Web">
  14. <meta name="author" content="Intesis Software, S.L.U.">
  15.  
  16. <!-- Page icons -->
  17. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  18.  
  19. <!-- CSS for loading -->
  20. <style type="text/css">
  21. /* Loading CSS */
  22. *, ::after, ::before {
  23. box-sizing: border-box;
  24. }
  25. html {
  26. margin: 0;
  27. padding: 0;
  28. position: relative;
  29. min-height: 100vh;
  30. }
  31. body {
  32. margin: 0;
  33. padding: 0;
  34. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  35. font-size: 1rem;
  36. font-weight: 400;
  37. line-height: 1.5;
  38. color: #212529;
  39. text-align: left;
  40. background-color: #fdfdfd;
  41. }
  42. header.header {
  43. position: fixed;
  44. top: 0;
  45. right: 0;
  46. left: 0;
  47. z-index: 100;
  48. height: 60px;
  49. background-color: #14727b;
  50. }
  51. .modal {
  52. display: none;
  53. }
  54. .display-none-important {
  55. display: none !important;
  56. }
  57. .footer {
  58. position: absolute;
  59. bottom: 0;
  60. width: 100%;
  61. height: 60px;
  62. line-height: 60px;
  63. color: #fff;
  64. background-color: #14727b;
  65. }
  66. .loader {
  67. position: fixed;
  68. left: 50%;
  69. top: 50%;
  70. margin-left: -46px;
  71. margin-top: -46px;
  72. transform: translate(-50%,-50%);
  73. border-radius: 50%;
  74. width: 60px;
  75. height: 60px;
  76. animation: spin 2s linear infinite;
  77. border: 16px solid #d3d3d3;
  78. border-top: 16px solid #14727b;
  79. }
  80. @keyframes spin {
  81. 0% { transform: rotate(0deg); }
  82. 100% { transform: rotate(360deg); }
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <!-- PAGE HEADER -->
  88. <header class="header">
  89. <nav class="navbar navbar-expand-md fixed-top display-none-important">
  90. <div class="loader mini-loader" hidden></div>
  91. <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span></button>
  92. <div class="navbar-menu">
  93. <ul class="navbar-nav">
  94. <li class="nav-item active">
  95. <a class="nav-link goToPage" data-page="home">Home</a>
  96. </li>
  97. <li class="nav-item">
  98. <a class="nav-link goToPage" data-page="configuration">Configuration</a>
  99. </li>
  100. <li class="nav-item">
  101. <a class="nav-link goToPage" data-page="signals">Signals</a>
  102. </li>
  103. <li class="nav-item nav-item-dropdown">
  104. <div class="dropdown dropdown-user">
  105. <a class="nav-link dropdown-toggle" role="button" id="dropdownUserMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
  106. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownUserMenu">
  107. <a class="dropdown-item goToPage" data-page="update_password">Update password</a>
  108. <a class="dropdown-item goToPage" data-page="logout">Logout</a>
  109. </div>
  110. </div>
  111. </li>
  112. <li class="nav-item nav-item-mobile">
  113. <a class="nav-link goToPage" data-page="update_password">Update password</a>
  114. </li>
  115. <li class="nav-item nav-item-mobile">
  116. <a class="nav-link goToPage" data-page="logout">Logout</a>
  117. </li>
  118. </ul>
  119. </div>
  120. </nav>
  121. </header>
  122. <div id="page-backdrop"></div>
  123.  
  124. <!-- PAGES -->
  125. <main role="main">
  126.  
  127. <!-- PAGE LOADING -->
  128. <section id="page-loading" class="page">
  129. <div class="loader"></div>
  130. </section>
  131.  
  132. <!-- ALERTS -->
  133. <div class="container-fluid alert-container page" hidden>
  134. <div class="row">
  135. <div class="mt-3 col-12">
  136. <div class="alert" role="alert"></div>
  137. </div>
  138. </div>
  139. </div>
  140.  
  141. <!-- PAGE HOME -->
  142. <section id="page-home" class="page" hidden="true">
  143. <div class="container-fluid">
  144. <div class="row">
  145. <div class="mt-3 col-12 col-md-8">
  146. <h1>Webserver Home</h1>
  147. </div>
  148. <div class="mt-3 col-12 col-md-4">
  149. <div class="d-flex justify-content-end">
  150. <button id="home-login-btn" class="btn btn-intesis mt-2 goToPage" data-page="login">Login</button>
  151. </div>
  152. </div>
  153. </div>
  154. <hr>
  155. <div class="row">
  156. <div class="mt-3 col-12">
  157. <div class="table-responsive">
  158. <table id="getInfoTable" class="table table-striped table-hover">
  159. <thead class="thead-light">
  160. <tr>
  161. <th scope="col">Info</th>
  162. <th scope="col">Value</th>
  163. </tr>
  164. </thead>
  165. <tbody></tbody>
  166. </table>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </section>
  172.  
  173. <!-- PAGE LOGIN -->
  174. <section id="page-login" class="page" hidden="true">
  175. <div class="container-fluid">
  176. <div class="row">
  177. <div class="mt-3 col-12 col-md-8">
  178. <h1>Login</h1>
  179. </div>
  180. <div class="mt-3 col-12 col-md-4">
  181. <div class="d-flex justify-content-end">
  182. <button id="login-home-btn" class="btn btn-intesis mt-2 goToPage" data-page="home">Home</button>
  183. </div>
  184. </div>
  185. </div>
  186. <hr>
  187. <div class="row">
  188. <div class="mt-3 col-12">
  189. <form class="form-intesis form-login">
  190. <label for="form-login-user" class="sr-only">User</label>
  191. <select class="form-control" id="form-login-user" required autofocus>
  192. <option value="admin">Admin</option>
  193. <option value="operator">Operator</option>
  194. </select>
  195. <label for="form-login-password" class="sr-only">Password</label>
  196. <input type="password" id="form-login-password" class="form-control" placeholder="Password" required>
  197. <button class="btn btn-lg btn-intesis btn-block mt-2" type="submit">Login</button>
  198. </form>
  199. </div>
  200. </div>
  201. </div>
  202. </section>
  203.  
  204. <!-- PAGE UPDATE PASSWORD -->
  205. <section id="page-update_password" class="page" hidden="true">
  206. <div class="container-fluid">
  207. <div class="row">
  208. <div class="mt-3 col-12">
  209. <h1>Change password</h1>
  210. </div>
  211. </div>
  212. <hr>
  213. <div class="row">
  214. <div class="col-12">
  215. <form class="form-intesis form-update-password">
  216. <div class="form-group">
  217. <label for="form-update-old-pass">Current password</label>
  218. <input type="password" id="form-update-old-pass" class="form-control" placeholder="Current password" required>
  219. </div>
  220. <div class="form-group mt-4">
  221. <label for="form-update-new-pass">New password</label>
  222. <input type="password" id="form-update-new-pass" class="form-control" placeholder="New password" required>
  223. </div>
  224. <div class="form-group mt-4">
  225. <label for="form-update-new-pass-repeat">Confirm new password</label>
  226. <input type="password" id="form-update-new-pass-repeat" class="form-control" placeholder="Confirm new password" required>
  227. </div>
  228. <button class="btn btn-lg btn-intesis btn-block mt-2" type="submit">Change password</button>
  229. </form>
  230. </div>
  231. </div>
  232. </div>
  233. </section>
  234.  
  235. <!-- PAGE CONFIGURATION -->
  236. <section id="page-configuration" class="page" hidden="true">
  237. <div class="container-fluid">
  238. <div class="row">
  239. <div class="mt-3 col-12 col-md-8">
  240. <h1>Configuration</h1>
  241. </div>
  242. <div class="mt-3 col-12 col-md-4">
  243. <div class="d-flex justify-content-end">
  244. <button type="button" class="btn btn-outline-secondary mt-2" data-toggle="modal" data-target="#page-configuration-modal-defaults">Restore defaults</button>
  245. <button class="btn btn-intesis mt-2 ml-2" id="btn-ConfValidate">Save/Reboot</button>
  246. </div>
  247. </div>
  248. </div>
  249. <hr>
  250. <div class="row">
  251. <div class="mt-3 col-12 col-md-6">
  252. <div class="card">
  253. <div class="card-header"><h5>General</h5></div>
  254. <div class="card-body">
  255. <div class="row">
  256. <div class="col-lg-4"><label class="font-weight-bold">Device model</label></div>
  257. <div class="col-lg-8">
  258. <input id="configuration-deviceModel" class="form-control" value="" maxlength="63" readonly="">
  259. </div>
  260. </div>
  261. </div>
  262. <div class="card-footer d-flex justify-content-end">
  263. <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#page-configuration-modal-identify_device">Identify device</button>
  264. </div>
  265. </div>
  266. <div class="card mt-3">
  267. <div class="card-header"><h5>IP Address</h5></div>
  268. <div class="card-body">
  269. <div class="row">
  270. <div class="col-lg-4"><label class="font-weight-bold">Device model</label></div>
  271. <div class="col-lg-8 form-group">
  272. <input id="configuration-ip" class="form-control cdhcp" value="" maxlength="15">
  273. </div>
  274. </div>
  275. <div class="row">
  276. <div class="col-lg-4"><label class="font-weight-bold">IP Netmask</label></div>
  277. <div class="col-lg-8 form-group">
  278. <input id="configuration-netmask" class="form-control cdhcp" value="" maxlength="15">
  279. </div>
  280. </div>
  281. <div class="row">
  282. <div class="col-lg-4"><label class="font-weight-bold">IP Gateway</label></div>
  283. <div class="col-lg-8 form-group">
  284. <input id="configuration-dfltgw" class="form-control cdhcp" value="" maxlength="15">
  285. </div>
  286. </div>
  287. <div class="row">
  288. <div class="col-lg-4"><label class="font-weight-bold">DHCP</label></div>
  289. <div class="col-lg-8">
  290. <input id="configuration-dhcp" type="checkbox" value="">
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. <div class="mt-3 col-12 col-md-6">
  297. <div class="card">
  298. <div class="card-header"><h5>Access Point Settings</h5></div>
  299. <div class="card-body">
  300. <div class="row">
  301. <div class="col-lg-4"><label class="font-weight-bold">SSID</label></div>
  302. <div class="col-lg-8 form-group">
  303. <input id="configuration-ssid" class="form-control" value="" maxlength="128">
  304. </div>
  305. </div>
  306. <div class="row">
  307. <div class="col-lg-4"><label class="font-weight-bold">Security</label></div>
  308. <div class="col-lg-8 form-group">
  309. <select id="configuration-security" class="form-control">
  310. <option value="0">OPEN</option>
  311. <option value="1">WEP</option>
  312. <option value="2">WPA_PSK</option>
  313. <option value="3">WPA2_PSK</option>
  314. <option value="4">WPA_WPA2_PSK</option>
  315. </select>
  316. </div>
  317. </div>
  318. <div class="row">
  319. <div class="col-lg-4"><label class="font-weight-bold">Password</label></div>
  320. <div class="col-lg-8">
  321. <input id="configuration-pass" type="password" class="form-control" maxlength="128">
  322. <input id="configuration-showpass" type="checkbox" value="f"> <small>Show password</small>
  323. </div>
  324. </div>
  325. </div>
  326. <div class="card-footer d-flex justify-content-end">
  327. <button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#page-configuration-modal-search_wifi">Wi-Fi search</button>
  328. <button type="button" class="btn btn-outline-secondary btn-sm ml-2" data-toggle="modal" data-target="#page-configuration-modal-wps">WPS</button>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </section>
  335.  
  336. <!-- PAGE CONFIGURATION SAVE END -->
  337. <section id="page-configuration_save_end" class="page" hidden="true">
  338. <div class="container-fluid">
  339. <div class="row">
  340. <div class="mt-3 col-12">
  341. <h1>Automatic and Manual Wireless configuration</h1>
  342. </div>
  343. </div>
  344. <hr>
  345. <div class="row">
  346. <div class="mt-3 col-12">
  347. <p>If connection has been successful, device's LED will start the sequence shown below. If the device's LED follows the sequence indicated, the wifi configuration process have been finished properly.</p>
  348. <ul class="led-list">
  349. <li><div class="led led-green">Green steady</div><div class="led-description">Not configured</div></li>
  350. <li><div class="led led-green">Green blinking</div><div class="led-description">Checking</div></li>
  351. <li><div class="led led-yellow">Yellow blinking</div><div class="led-description">Configuring</div></li>
  352. <li><div class="led led-red">Red blinking</div><div class="led-description">Connecting</div></li>
  353. <li><div class="led led-gray">Off</div><div class="led-description">Connected & working</div></li>
  354. </ul>
  355. <p>If the device is not following the proposed sequence and does not work properly, please check the LED status table below.</p>
  356. <div class="table-responsive">
  357. <table class="table table-hover table-striped">
  358. <thead>
  359. <tr>
  360. <th>LED Color(s)</th>
  361. <th>Behavior</th>
  362. <th>Description</th>
  363. </tr>
  364. </thead>
  365. <tbody>
  366. <tr><td>Blue</td><td>Blinking</td><td>Performing WPS connection (up to 2 min)</td></tr>
  367. <tr><td>Green</td><td>Steady</td><td>Not configured</td></tr><tr><td>Green</td><td>Blinking</td><td>Checking device configuration parameter values (up to 2 min)</td></tr>
  368. <tr><td>Red</td><td>Blinking</td><td>Connecting to access point and server (up to 2 min)</td></tr>
  369. <tr><td>Yellow</td><td>Blinking</td><td>Downloading configuration. Wait (up to 2 min)</td></tr>
  370. <tr><td>Red/Green</td><td>Alternate blinking</td><td>Error Connecting to Access point or router. Try to connect again and make sure you write the correct password</td></tr>
  371. <tr><td>Yellow/Green</td><td>Alternate blinking</td><td>Server not reached. Check if there is Internet connectivity on your Access Point or router</td></tr>
  372. </tbody>
  373. </table>
  374. </div>
  375. <p>If problem still persists, please check the device's installation manual.</p>
  376. </div>
  377. </div>
  378. </div>
  379. </section>
  380.  
  381. <!-- PAGE CONFIGURATION RESTORE END -->
  382. <section id="page-configuration_restore_end" class="page" hidden="true">
  383. <div class="container-fluid">
  384. <div class="row">
  385. <div class="mt-3 col-12">
  386. <h1>Restoring default configuration</h1>
  387. </div>
  388. </div>
  389. <hr>
  390. <div class="row">
  391. <div class="mt-3 col-12">
  392. <p>Device is currently being set into factory settings. After changes are applied, device will reboot and follow the sequence bellow.</p>
  393. <ul class="led-list">
  394. <li><div class="led led-green">Green steady</div><div class="led-description">Not configured</div></li>
  395. <li><div class="led led-green">Green blinking</div><div class="led-description">Checking</div></li>
  396. <li><div class="led led-green">Green steady</div><div class="led-description">Not configured</div></li>
  397. </ul>
  398. <p>If the device is not following the proposed sequence and does not work properly, please check the LED status table below.</p>
  399. <div class="table-responsive">
  400. <table class="table table-hover table-striped">
  401. <thead>
  402. <tr>
  403. <th>LED Color(s)</th>
  404. <th>Behavior</th>
  405. <th>Description</th>
  406. </tr>
  407. </thead>
  408. <tbody>
  409. <tr><td>Blue</td><td>Blinking</td><td>Performing WPS connection (up to 2 min)</td></tr>
  410. <tr><td>Green</td><td>Steady</td><td>Not configured</td></tr><tr><td>Green</td><td>Blinking</td><td>Checking device configuration parameter values (up to 2 min)</td></tr>
  411. <tr><td>Red</td><td>Blinking</td><td>Connecting to access point and server (up to 2 min)</td></tr>
  412. <tr><td>Yellow</td><td>Blinking</td><td>Downloading configuration. Wait (up to 2 min)</td></tr>
  413. <tr><td>Red/Green</td><td>Alternate blinking</td><td>Error Connecting to Access point or router. Try to connect again and make sure you write the correct password</td></tr>
  414. <tr><td>Yellow/Green</td><td>Alternate blinking</td><td>Server not reached. Check if there is Internet connectivity on your Access Point or router</td></tr>
  415. </tbody>
  416. </table>
  417. </div>
  418. <p>If problem still persists, please check the device's installation manual.</p>
  419. </div>
  420. </div>
  421. </div>
  422. </section>
  423.  
  424. <!-- PAGE CONFIGURATION WPS END -->
  425. <section id="page-configuration_wps_end" class="page" hidden="true">
  426. <div class="container-fluid">
  427. <div class="row">
  428. <div class="mt-3 col-12">
  429. <h1>WPS Wireless configuration</h1>
  430. </div>
  431. </div>
  432. <hr>
  433. <div class="row">
  434. <div class="mt-3 col-12">
  435. <p>If connection has been successful, device's LED will start the sequence shown below. If the device's LED follows the sequence indicated, the wifi configuration process have been finished properly.</p>
  436. <ul class="led-list">
  437. <li><div class="led led-green">Green steady</div><div class="led-description">Not configured</div></li>
  438. <li><div class="led led-blue">Blue blinking</div><div class="led-description">WPS enabled</div></li>
  439. <li><div class="led led-green">Green Blinking</div><div class="led-description">Checking</div></li>
  440. <li><div class="led led-yellow">Yellow blinking</div><div class="led-description">Configuring</div></li>
  441. <li><div class="led led-red">Red blinking</div><div class="led-description">Connecting</div></li>
  442. <li><div class="led led-gray">Off</div><div class="led-description">Connected & working</div></li>
  443. </ul>
  444. <p>If the device is not following the proposed sequence and does not work properly, please check the LED status table below.</p>
  445. <div class="table-responsive">
  446. <table class="table table-hover table-striped">
  447. <thead>
  448. <tr>
  449. <th>LED Color(s)</th>
  450. <th>Behavior</th>
  451. <th>Description</th>
  452. </tr>
  453. </thead>
  454. <tbody>
  455. <tr><td>Blue</td><td>Blinking</td><td>Performing WPS connection (up to 2 min)</td></tr>
  456. <tr><td>Green</td><td>Steady</td><td>Not configured</td></tr><tr><td>Green</td><td>Blinking</td><td>Checking device configuration parameter values (up to 2 min)</td></tr>
  457. <tr><td>Red</td><td>Blinking</td><td>Connecting to access point and server (up to 2 min)</td></tr>
  458. <tr><td>Yellow</td><td>Blinking</td><td>Downloading configuration. Wait (up to 2 min)</td></tr>
  459. <tr><td>Red/Green</td><td>Alternate blinking</td><td>Error Connecting to Access point or router. Try to connect again and make sure you write the correct password</td></tr>
  460. <tr><td>Yellow/Green</td><td>Alternate blinking</td><td>Server not reached. Check if there is Internet connectivity on your Access Point or router</td></tr>
  461. </tbody>
  462. </table>
  463. </div>
  464. <p>If problem still persists, please check the device's installation manual.</p>
  465. </div>
  466. </div>
  467. </div>
  468. </section>
  469.  
  470. <!-- PAGE SIGNALS -->
  471. <section id="page-signals" class="page" hidden="true">
  472. <div class="container-fluid">
  473. <div class="row">
  474. <div class="mt-3 col-12">
  475. <h1>Signals</h1>
  476. </div>
  477. </div>
  478. <hr>
  479. <div class="row">
  480. <div class="mt-3 col-12">
  481. This page will reload the device signal values in <span class="signals-reload time-reload"></span> seconds.
  482. </div>
  483. </div>
  484. <div class="row">
  485. <div class="mt-3 col-12">
  486. <div class="table-responsive">
  487. <table id="signalsTable" class="table table-striped table-hover">
  488. <thead class="thead-light">
  489. <tr>
  490. <th scope="col">Name</th>
  491. <th scope="col" class="text-center">RW</th>
  492. <th scope="col" class="col-values-fixed-width">Value</th>
  493. <th scope="col" class="col-actions-fixed-width">Actions</th>
  494. </tr>
  495. </thead>
  496. <tbody></tbody>
  497. </table>
  498. </div>
  499. </div>
  500. </div>
  501. </div>
  502. <div id="contentValue" hidden="true">
  503. <div class="modeValues__ID_">
  504. <span id="value__ID_" class="textvalue__ID_">_TEXTVALUE_</span> <span class="textvalue__ID_">_UNITS_</span>
  505. </div>
  506. <div class="modeEdit__ID_ display-none">
  507. <select id="select__ID_" class="display-none" onchange="$('#input__ID_').val($('#select__ID_ option:selected').val());"></select>
  508. <input id="input__ID_" value="_VALUE_" maxlength="10">
  509. </div>
  510. </div>
  511. <div id="contentActions" hidden="true">
  512. <div id="bbe__ID_">
  513. <button id="be__ID_" class="float-left btn btn-sm btn-default signalButtonEdit modeValues__ID_" type="button">Edit</button>
  514. </div>
  515. <div id="bbs__ID_">
  516. <button id="bc__ID_" class="btn btn-sm btn-outline-secondary signalButtonCancel modeEdit__ID_ display-none" type="button">Cancel</button>
  517. <button id="bs__ID_" class="btn btn-sm btn-intesis signalButtonSave modeEdit__ID_ display-none" type="button">Save</button>
  518. </div>
  519. </div>
  520. </section>
  521. </main>
  522.  
  523. <!-- PAGE FOOTER -->
  524. <footer class="footer">
  525. <div class="container">
  526. <span class="intesis-footer float-right"></span>
  527. </div>
  528. </footer>
  529.  
  530. <!-- MODALS -->
  531. <!-- PAGE CONFIGURATION IDENTIFY DEVICE -->
  532. <div id="page-configuration-modal-identify_device" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  533. <div class="modal-dialog modal-dialog-centered" role="document">
  534. <div class="modal-content">
  535. <div class="modal-header">
  536. <h5 class="modal-title">Identify device</h5>
  537. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  538. </div>
  539. <div class="modal-body">
  540. Device should be blinking: device's LED is blinking white.
  541. </div>
  542. <div class="modal-footer">
  543. <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
  544. </div>
  545. </div>
  546. </div>
  547. </div>
  548.  
  549. <!-- PAGE CONFIGURATION SEARCH WIFI -->
  550. <div id="page-configuration-modal-search_wifi" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  551. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  552. <div class="modal-content">
  553. <div class="modal-header">
  554. <h5 class="modal-title">Wi-Fi network</h5>
  555. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  556. </div>
  557. <div class="modal-body">
  558. <div id="aplistPreContent" class="row">
  559. <div class="col-12">
  560. <p>Scanning for networks.</p>
  561. <p>This may take up to 45 seconds.</p>
  562. </div>
  563. </div>
  564. <div id="aplistContent" class="row display-none">
  565. <div class="col-12">
  566. <p>Select the Wi-Fi network where you want to connect:</p>
  567. <p>This list will reload in <span class="wifi-reload time-reload"></span> seconds.</p>
  568. <div class="table-responsive">
  569. <table id="wifiListTable" class="table table-striped table-hover">
  570. <thead class="thead-light">
  571. <tr>
  572. <th scope="col">SSID</th>
  573. <th scope="col" class="text-nowrap">Signal level</th>
  574. <th scope="col">Security mode</th>
  575. <th scope="col">Channel</th>
  576. <th scope="col">Action</th>
  577. </tr>
  578. </thead>
  579. <tbody></tbody>
  580. </table>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. <div class="modal-footer">
  586. <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591.  
  592. <!-- PAGE CONFIGURATION WPS -->
  593. <div id="page-configuration-modal-wps" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  594. <div class="modal-dialog modal-dialog-centered" role="document">
  595. <div class="modal-content">
  596. <div class="modal-header">
  597. <h5 class="modal-title">WPS</h5>
  598. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  599. </div>
  600. <div class="modal-body">
  601. <ol>
  602. <li>Locate the WPS button on your AP.</li>
  603. <li>Click on the "Start WPS connection" button below.</li>
  604. <li>Press the WPS button on your AP within 2 minutes.</li>
  605. </ol>
  606. </div>
  607. <div class="modal-footer">
  608. <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
  609. <button type="button" class="btn btn-intesis" id="btn-startWPS">Start WPS connection</button>
  610. </div>
  611. </div>
  612. </div>
  613. </div>
  614.  
  615. <!-- PAGE CONFIGURATION RESTORE DEFAULTS -->
  616. <div id="page-configuration-modal-defaults" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  617. <div class="modal-dialog modal-dialog-centered" role="document">
  618. <div class="modal-content">
  619. <div class="modal-header">
  620. <h5 class="modal-title">Restore defaults</h5>
  621. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  622. </div>
  623. <div class="modal-body">
  624. The default settings will be restored.<br>
  625. <br>
  626. Device will be restarted.<br>
  627. <br>
  628. Are you sure?<br>
  629. </div>
  630. <div class="modal-footer">
  631. <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
  632. <button type="button" class="btn btn-intesis" id="btn-ConfRestore">Restore defaults</button>
  633. </div>
  634. </div>
  635. </div>
  636. </div>
  637.  
  638. <!-- PAGE CONFIGURATION SAVE REBOOT -->
  639. <div id="page-configuration-modal-save_reboot" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  640. <div class="modal-dialog modal-dialog-centered" role="document">
  641. <div class="modal-content">
  642. <div class="modal-header">
  643. <h5 class="modal-title">Save / Reboot</h5>
  644. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  645. </div>
  646. <div class="modal-body">
  647. Changes will be applied and device will be rebooted.<br>
  648. <br>
  649. Are you sure?<br>
  650. </div>
  651. <div class="modal-footer">
  652. <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
  653. <button type="button" class="btn btn-intesis" id="btn-ConfSaveReboot">Save / Reboot</button>
  654. </div>
  655. </div>
  656. </div>
  657. </div>
  658.  
  659. <!-- Screen breakpoint -->
  660. <div id="screen-breakpoint"></div>
  661.  
  662. <!-- Load CSS and JS -->
  663. <script type="text/javascript">
  664. // Vars for load files control
  665. var current_loading_file = '';
  666. var files_loaded = 0;
  667. var files_time_between_load = 300;
  668. var files_to_load = [
  669. 'css/vendor/bootstrap.min.css',
  670. 'css/main.css',
  671. 'js/vendor/jquery-3.3.1.min.js',
  672. 'js/vendor/bootstrap.bundle.min.js',
  673. 'js/vendor/js.cookie.js',
  674. 'js/main.js'
  675. ];
  676.  
  677. // Functions for load files control
  678. function fileLoad(_file, _callback) {
  679. if ( _file != undefined && _file != '' ) current_loading_file = _file;
  680. var xhr = new XMLHttpRequest();
  681. xhr.ontimeout = function () {
  682. setTimeout(function(){ fileLoad(current_loading_file, fileLoaded); }, files_time_between_load);
  683. };
  684. xhr.onload = function() {
  685. if ( xhr.readyState === 4 ) {
  686. if ( xhr.status === 200 ) {
  687. _callback(xhr.responseText);
  688. }
  689. else {
  690. setTimeout(function(){ fileLoad(current_loading_file, fileLoaded); }, files_time_between_load);
  691. }
  692. }
  693. else {
  694. setTimeout(function(){ fileLoad(current_loading_file, fileLoaded); }, files_time_between_load);
  695. }
  696. };
  697. xhr.open('GET', _file, true);
  698. xhr.timeout = 3000;
  699. xhr.send(null);
  700. }
  701.  
  702. function fileLoaded(_response) {
  703. // Clear sourceMappingURL from bootstrap files
  704. var sourceMappingURL = _response.indexOf('sourceMappingURL');
  705. var sourcePointMap = _response.lastIndexOf('.map');
  706. if (
  707. sourceMappingURL !== -1 &&
  708. sourcePointMap !== -1 &&
  709. sourceMappingURL < sourcePointMap
  710. ) {
  711. sourcePointMap = sourcePointMap + 4;
  712. _response = _response.replace(_response.substring(sourceMappingURL, sourcePointMap), '');
  713. }
  714.  
  715. // Add CSS files to page
  716. if ( files_to_load[files_loaded].substr(files_to_load[files_loaded].lastIndexOf('.')) == '.css' ) {
  717. var style = document.createElement('style');
  718. style.type = 'text/css';
  719. style.innerHTML = _response;
  720. document.getElementsByTagName('head')[0].appendChild(style);
  721. }
  722. // Add JS files to page
  723. else if ( files_to_load[files_loaded].substr(files_to_load[files_loaded].lastIndexOf('.')) == '.js' ) {
  724. var script = document.createElement('script');
  725. script.type = 'text/javascript';
  726. script.innerHTML = _response;
  727. document.getElementsByTagName('head')[0].appendChild(script);
  728. }
  729.  
  730. // Not all files are loaded
  731. files_loaded++;
  732. if ( files_loaded < files_to_load.length ) {
  733. setTimeout(function(){ fileLoad(files_to_load[files_loaded], fileLoaded); }, files_time_between_load);
  734. }
  735. }
  736.  
  737. // Start load files
  738. setTimeout(function(){ fileLoad(files_to_load[files_loaded], fileLoaded); }, files_time_between_load);
  739.  
  740. // Prevent reload page
  741. function reloadControl(_event) {
  742. var confirmationMessage = "\o/";
  743. _event.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
  744. return confirmationMessage; // Gecko, WebKit, Chrome <34
  745. }
  746. window.addEventListener('beforeunload', reloadControl);
  747. </script>
  748. </body>
  749. </html>
Advertisement
Add Comment
Please, Sign In to add comment