　ぴろんの日常: ラズパイ（Webサーバー・６）

前回までで、http.server のサーバー部分・クライアント部分の処理を
構築し、やり取りができるようになりました。
今回は、クライアントに表示するベースの部分となる
HTMLの内容を書いてみたいと思います。

管理画面として、設定ファイルを作成するページにしたいので、
項目と内容をいれるようなものにします。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SherpaCTI Configuration</title>
<style type="text/css">
.tbl_main {
 margin: 20px; padding: 10px; background: #eee; border-radius: 10px;
}
.tbl_main, TD, TH {
 padding: 0px 5px 0px 5px;
}
.lrg_ttl {
 font-size: 22px; font-weight: bold;
}
.sml_ttl {
 font-size: 11px;
}
.sub_ttl {
 font-size: 17px; font-weight: bold;
}
.fld_ttl {
 padding: 0px 5px 0px 15px; font-size: 15px;
}
.input_l {
 width: 400px;
}
.set_button {
 padding: 5px; margin: 15px 0px 10px 0px; width: 100%; font-size: 20px; font-weight: bold;
}
</style>
<script src="axios.min.js"></script>
<script>
(window.onload = function() {
  axios.post('/', {
    "act": "get"
  })
  .then(function (response) {
    var result = document.getElementById('result1');
    document.getElementById('smbconnect_on').value = response.data['smbconnect_on'];
    document.getElementById('smb_username').value = response.data['smbusername'];
    document.getElementById('smb_password').value = response.data['smbpassword'];
    document.getElementById('smb_hostname').value = response.data['smbhostname'];
    document.getElementById('smb_ipaddress').value = response.data['smbipaddress'];
    document.getElementById('smb_remotedirectory').value = response.data['smbremotedirectory'];
    document.getElementById('smb_remotepath').value = response.data['smbremotepath'];
    
    result.innerHTML = response.data['ret'];
  })
  .catch(function (error) {
    console.log(error)
  });
})();

function setVal() {
  if (window.confirm("Are you sure you want to update it?")) {
    axios.post('/', {
      "act": "set",
      "smbconnect_on": document.getElementById('smbconnect_on').value,
      "smbusername": document.getElementById('smb_username').value,
      "smbpassword": document.getElementById('smb_password').value,
      "smbhostname": document.getElementById('smb_hostname').value,
      "smbipaddress": document.getElementById('smb_ipaddress').value,
      "smbremotedirectory": document.getElementById('smb_remotedirectory').value,
      "smbremotepath": document.getElementById('smb_remotepath').value
    })
    .then(function (response) {
      var result = document.getElementById('result1');
      result.innerHTML = response.data['ret'];
      alert("Finished");
    })
    .catch(function (error) {
      console.log(error)
    });
  }
}
</script>
</head>

<body>
  <center>
    <table class="tbl_main">
      <tr>
        <td colspan="2" align="center">
          <div style="padding: 10px 0px 0px 0px;"><span class="lrg_ttl">SherpaCTI Configuration Menu</span></div>
          <div style="margin: -5px 0px 0px 0px;"><span class="sml_ttl">©2019 Sherpa CO., LTD. ver:1.1a</span></div>
        </td>
      </tr>
      
      <tr>
        <td colspan="2">
          <hr />
          <span class="sub_ttl">SMB Connect Section</span>
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">SMB Connect</td>
        <td>
          <input type="text" class="input_l" name="smbconnect_on" id="smbconnect_on">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">User Name</td>
        <td>
          <input type="text" class="input_l" name="smb_username" id="smb_username">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">Password</td>
        <td>
          <input type="text" class="input_l" name="smb_password" id="smb_password">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">Host Name</td>
        <td>
          <input type="text" class="input_l" name="smb_hostname" id="smb_hostname">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">IP Address</td>
        <td>
          <input type="text" class="input_l" name="smb_ipaddress" id="smb_ipaddress">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">Remote Directory</td>
        <td>
          <input type="text" class="input_l" name="smb_remotedirectory" id="smb_remotedirectory">
        </td>
      </tr>
      <tr>
        <td class="fld_ttl">Remote Path</td>
        <td>
          <input type="text" class="input_l" name="smb_remotepath" id="smb_remotepath">
        </td>
      </tr>
      
      <tr>
        <td colspan="2">
          <input type="button" class="set_button" value="Set Value" onclick="javascript:setVal()">
        </td>
      </tr>
      
      <tr>
        <td colspan="2" align="center">
          <table>
            <tr>
              <td class="fld_ttl">Return Value</td>
              <td>
                <div id="result1"></div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      
    </table>
  </center>
</body>
</html>

Python には、設定ファイルを簡単に読み書きできる configparser という
ライブラリがあるので、こちらを利用します。
次回は、このライブラリを使って、設定の読み書きを行います。

ぴろんの日常

2019年9月4日水曜日

ラズパイ（Webサーバー・６）

0 件のコメント:

コメントを投稿