M7.html

```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>  
            &nbsp;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>