M7.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力フォーム</title>
<style>
body {
margin-left: 5%;
}
.conteiner {
max-width:600px;
/* margin:0 auto; */
text-align:center;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
background-color:#2ABCA7;
color:#FAFAFA;
}
p {
font-weight: bold;
}
label {
display: block;
margin-bottom: 8px;
white-space: nowrap;
}
label, input[type='checkbox'] {
cursor: pointer;
display: inline-block;
accent-color: #000;
}
label, input[type='text'] {
height: 20px;
}
textarea {
display: block;
width: 600px;
height: 800px;
margin-bottom: 16px;
font-size: large;
}
.btn-conteiner {
display: flex;
}
button {
width: 100px;
height: 30px;
margin: 15px;
text-align:center;
font-size: medium;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border: 1px solid #2ABCA7;
background-color:#2ABCA7;
color:#FAFAFA;
}
.primary-section {
display: flex;
}
.child {
padding-right: 30px;
}
.child_2 {
/* display: flexbox; */
padding-right: 100px;
/* width: 50%; */
}
</style>
</head>
<body>
<div class="conteiner">
<h1>context.xml生成ツール</h1>
</div>
<div class="primary-section">
<div class="child">
<form id="myForm">
<p label for="inputText">【JNDI名】</label></p>
jdbc/<input type="text" id="inputText" oninput="value = value.toUpperCase();">
</div>
<div class="child">
<p>【DBスキーマ名】</p>
<div><label for="Schema">スキーマを入力or選択</label>
<input list="SchemaList" type="text" id="Schema" name="Schema" oninput="value = value.toUpperCase();" />
<datalist id="SchemaList">
<option value="AAA"></option>
<option value="BBB"></option>
<option value="CCC"></option>
</datalist>
</div>
</div>
</div>
<div class="valid-check">
<p>【 Timeout設定】<small>どちらかを選択</small></p>
<div>
<input type="checkbox" id="urlSet" checked><label for="urlSet">
<span>url="${URL};"</span>
</div>
<div>
<input type="checkbox" id="urlTimeoutSet"><label for="urlTimeoutSet">
url="${URL};queryTimeout=<input type="number" id="urlTimeout" value="90" style="width: 50px;">"</label>
</div>
</div>
<div class="primary-section">
<div class="child_2">
<div>
<p id="checkList">【追加項目】</p>
</div>
<div>
<input type="checkbox" id="maxTotal" checked><label for="maxTotal">maxTotal</label>
<input type="number" id="maxTotalSet" value="60" style="width: 50px;">
</div>
<div>
<input type="checkbox" id="initalSize" checked><label for="initalSize">initalSize</label>
</div>
<div>
<input type="checkbox" id="validationQuery" checked><label for="validationQuery">validationQuery</label>
</div>
<div>
<input type="checkbox" id="testOnBorrow" checked><label for="testOnBorrow">testOnBorrow</label>
</div>
</div>
<div class="child_2">
<p id="checkList">【共通リソース】</p>
<div>
<input type="checkbox" id="Intra_authDS" ><label for="Intra_authDS">Intra_authDS</label>
</div>
<div>
<input type="checkbox" id="OaUtilDS" ><label for="OaUtilDS">OaUtilDS</label>
</div>
</div>
</div>
<div>
<div class="btn-conteiner">
<div>
<button type="button" onclick="showOutput()">出力</button>
</div>
<div>
<button type="button" onclick="resetForm()" style="width: auto;">Formリセット</button>
</div>
</form>
</div>
<p label for="outputText">context.xml</label></p>
<textarea id="outputText">Resource表示</textarea>
</div>
<script>
function resetForm() {
// フォーム要素を取得
var form = document.getElementById("myForm");
// フォームのresetメソッドを呼び出してリセット
form.reset();
var textareaForm = document.getElementById('outputText');
textareaForm.value = '';
}
//クリアボタンのメソッド
// function clearTextarea() {
// classesArray.length = 0; // 配列をリセット
// }
// クラスを表すオブジェクト
class MyClass {
constructor(firstName, jdbcName, schemaName, maxTotalSetValue, endName) {
this.firstName = firstName;
this.jdbcName = jdbcName;
this.schemaName = schemaName;
this.endName = endName;
// this.urlTimeoutSet = urlTimeoutValue;
this.maxTotal = maxTotalSetValue;
this.initalSize = "10";
this.validationQuery = "select 1";
this.testOnBorrow = "true";
}
//ソース表示のインデントにスペースを入れる
// 文字列を返すメソッド
getInfo() {
let retVal = this.firstName + '\n' + 'name="jdbc/' + this.jdbcName + '"\n' + 'type="javax.sql.DataSource"\n';
// let retVal = this.firstName + '\n' + 'name="jdbc/' + this.jdbcName + '"\n' + 'type="javax.sql.DataSource"\n' + 'url="${URL};' +'"\n' + 'driverClassName="com.microsoft.sqlserver.jdbc.SQLServerDriver"\n' + 'username="${USER_' + this.schemaName + '}"\n' + 'password="${PASS_' + this.schemaName + '}"\n';
if (urlTimeoutSet.checked) {
retVal += 'url="${URL};queryTimeout=' + document.getElementById('urlTimeout').value + '"\n';
} else if (urlSet.checked) {
retVal += 'url="${URL};"\n';
}
retVal += 'driverClassName="com.microsoft.sqlserver.jdbc.SQLServerDriver"\n' + 'username="${USER_' + this.schemaName + '}"\n' + 'password="${PASS_' + this.schemaName + '}"\n';
if(maxTotal.checked){
retVal = retVal + 'maxTotal="' + this.maxTotal + '"\n';
}
if(initalSize.checked){
retVal = retVal + 'initalSize="' + this.initalSize + '"\n';
}
if(validationQuery.checked){
retVal = retVal + 'validationQuery="' + this.validationQuery + '"\n';
}
if(testOnBorrow.checked){
retVal = retVal + 'testOnBorrow="' + this.testOnBorrow + '"\n';
}
return retVal + this.endName;
}
}
//表示させるリソースを格納させる配列
let classesArray = [];
//出力ボタンを押下で呼ぶ関数
function showOutput() {
//URL チェックボックスにチェックが入っているか
if(!(urlSet.checked || urlTimeoutSet.checked)){
alert('どちらかを選択');
return;
} if(urlSet.checked && urlTimeoutSet.checked){
alert('どちらのチェックを外す');
return;
}
//URL timeoutの値が入っているかチェック
var urlTimeoutValue = document.getElementById('urlTimeout').value;
if (urlTimeoutSet.checked && urlTimeoutValue === "") {
alert("Timeout時間を入力してください。");
return;
}
// maxTotalSetの現在の値を取得
var maxTotalSetValue = document.getElementById('maxTotalSet').value;
if(!maxTotalSetValue){
alert("maxTotalの値を入力してください");
return;
}
// 入力された input【JNDI名】を取得
var inputTextValue = document.getElementById('inputText').value;
// 入力 or 選択されたスキーマを取得
var inputSchema = document.getElementById('Schema').value;
// インスタンスのjdbcNameとschemaNameに適用
//maxTotalSetValueとURLも適用
const SELECT_CLASS = new MyClass('<Resource', inputTextValue, inputSchema, maxTotalSetValue, '/>');
// チェックボックスの状態に応じて URL を設定
if (urlTimeoutSet.checked) {
SELECT_CLASS.url = '${URL};queryTimeout=' + urlTimeoutValue + '"';
}
// インスタンスを配列の頭に追加
classesArray.unshift(SELECT_CLASS);
//チェックされたスキーマを追加
btnClick();
// 出力用の文字列を作成
var outputValue = '<context>\n' +"";
for (const classInstance of classesArray) {
outputValue += classInstance.getInfo() + '\n';
// 出力
document.getElementById('outputText').value = outputValue +'</context>';
}
classesArray.length = 0; // 配列をリセット
}
function btnClick(){
// maxTotalSetの現在の値を取得
// var urlTimeoutValue = document.getElementById('urlTimeout').value;
var maxTotalSetValue = document.getElementById('maxTotalSet').value;
//追加するリソースを生成しclassesArrayへ格納
if (document.getElementById('Intra_auth').checked) {
const SELECT_CLASS_2 = new MyClass('<Resource', 'Intra_authDS', 'Intra_authDS', maxTotalSetValue, '/>');
classesArray.push(SELECT_CLASS_2);
} if (document.getElementById('OaUtilDS').checked) {
const SELECT_CLASS_3 = new MyClass('<Resource', 'OaUtilDS', 'OaUtilDS', maxTotalSetValue,'/>');
classesArray.push(SELECT_CLASS_3);
}
}
</script>
</body>
</html>