構築し、やり取りができるようになりました。
今回は、クライアントに表示するベースの部分となる
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 という
ライブラリがあるので、こちらを利用します。
次回は、このライブラリを使って、設定の読み書きを行います。
0 件のコメント:
コメントを投稿