M5.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>
label {
display: block;
margin-bottom: 8px;
white-space: nowrap;
}
textarea {
width: 500px;
height: 800px;
margin-bottom: 16px;
}
li {
float: left;
list-style: none;
padding: 8px;
}
</style>
</head>
<body>
<div>
<label for="inputText">【JNDI名】</label>
</div>
<div>
jdbc/<input id="inputText">
</div>
<div>
<br>
<div>【DBスキーマ名】</div>
<label for="Schema">スキーマを入力or選択</label>
<input list="SchemaList" id="Schema" name="Schema" />
<datalist id="SchemaList">
<option value="BUNSHO"></option>
<option value="DOC_MANAGER"></option>
<option value="EG_USER"></option>
<option value="ACCMGR"></option>
<option value="DP_USER"></option>
</datalist>
</div>
<div>
<div>
<p id="checkList">【追加項目】</p>
</div>
<form name="'checkboxForm">
<div>
<input type="checkbox" name="btn" id="maxTotal" onclick="btnClick()" checked>maxTotal<label for="maxTotal"></label>
</div>
<div>
<input type="checkbox" name="btn" id="initalSize" onclick="btnClick()" checked>initalSize<label for="initalSize"></label>
</div>
<div>
<input type="checkbox" name="btn" id="validationQuery" onclick="btnClick()" checked>validationQuery<label for="validationQuery"></label>
</div>
<div>
<input type="checkbox" name="btn" id="testOnBorrow" onclick="btnClick()" checked>testOnBorrow<label for="testOnBorrow"></label>
</div>
<p id="checkList">【共通リソース】</p>
<div>
<input type="checkbox" name="btn" id="Intra_authDS" onclick="showOutput()">Intra_authDS<label for="Intra_authDS"></label>
</div>
<div>
<input type="checkbox" name="btn" id="OaUtilDS" onclick="btnClick()">OaUtilDS<label for="OaUtilDS"></label>
</div>
</form>
</div>
<br>
<button type="button" onclick="showOutput()">出力</button>
<label for="outputText">cntext.xml</label>
<textarea id="outputText">Resource</textarea>
<script>
// クラスを表すオブジェクト
class MyClass {
constructor(firstName, jdbcName, schemaName, endName) {
this.firstName = firstName;
this.jdbcName = jdbcName;
this.schemaName = schemaName;
this.endName = endName;
this.maxTotal = "";
this.initalSize = "";
this.validationQuery = "";
this.testOnBorrow = "";
this.buttonValues = []; // チェックボックスの値を格納するプロパティを追加
}
// 文字列を返すメソッド
getInfo() {
return this.firstName + '\n' + 'name="jdbc/' + this.jdbcName + '"\n' + 'type="javax.sql.DataSource"\n' + 'url="${URL};queryTimeout=90"\n' + 'driverClassName="com.microsoft.sqlserver.jdbc.SQLServerDriver"\n' + 'username="${USER_' + this.schemaName + '}"\n' + 'password="${PASS_' + this.schemaName + '}"\n' + 'maxTotal="' + this.maxTotal + '"\n' + 'initialSize="' + this.initalSize + '"\n' + 'validationQuery="' + this.validationQuery + '"\n' + 'testOnBorrow="' + this.testOnBorrow + '"\n' + this.endName;
}
}
// function showOutput() {
// const inputTextValue = document.querySelector('inputText').value;
// const inputSchema = document.querySelector('schema').value;
// const selectedValue = new MyClass("<", "", "", "/>");
// selectedValue.jdbcName = inputTextValue;
// selectedValue.schemaName = inputSchema;
// const outputValue = selectedValue.getInfo();
// document.querySelector('#outputText').value = outputValue;
// }
let classesArray = [];
// // const CLASS1 = new MyClass('<Resource','', '', '/>');
// // let CLASS2;
// function btnClick() {
// // classesArray を初期化
// // classesArray = [];
// const inputTextValue = document.getElementById('inputText').value;
// const inputSchema = document.getElementById('Schema').value;
// // インスタンスのjdbcNameとschemaNameに適用
// const selectedClass = new MyClass('<Resource', inputTextValue, inputSchema, '/>');
// // // // 現在の選択されたクラスのインスタンスを取得
// // // const selectedClass = new MyClass('<Resource', '', '', '/>');
// // // // チェックボックスの値を配列に追加
// const checkboxes = document.getElementsByName('btn');
// // // const checkedValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);
// selectedClass.buttonValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);
// // // selectedClass.buttonValues = checkedValues;
// // // インスタンスを配列に追加
// classesArray.push(selectedClass);
// }
function showOutput() {
// // classesArray = [];
// 入力された input【JNDI名】を取得
var inputTextValue = document.getElementById('inputText').value;
// 入力 or 選択されたスキーマを取得
var inputSchema = document.getElementById('Schema').value;
// インスタンスのjdbcNameとschemaNameに適用
const selectedClass = new MyClass('<Resource', inputTextValue, inputSchema, '/>');
// // チェックボックスの値を設定
// const checkboxes = document.getElementsByName('btn');
// selectedClass.buttonValues = Array.from(checkboxes).filter(checkbox => checkbox.checked).map(checkbox => checkbox.id);
// インスタンスを配列に追加
classesArray.push(selectedClass);
// 出力用の文字列を作成
var outputValue = "";
for (const classInstance of classesArray) {
outputValue += classInstance.getInfo() + '\n\n';
// 出力
document.getElementById('outputText').value = outputValue;
}
// function btnClick(){
document.getElementById('OaUtilDS').checked
// const selectedClass = new MyClass('<Resource', 'OaUtilDS', 'OaUtilDS', '/>');
classesArray.push(selectedClass);
// }
}
// // // インスタンスのjdbcNameとschemaNameに適用
// // CLASS1.jdbcName = inputTextValue;
// // CLASS1.schemaName = inputSchema;
// // // 選択されたクラスのインスタンスを取得
// // let selectedValue = CLASS1;
// // var outputValue = selectedValue.getInfo();
// // document.getElementById('outputText').value = outputValue;
</script>
</body>
</html>