js2ts: install_db.php

- jqValidateForm 구현
  - async-validator + 수작업
- common.js 없이 ventor -> 타겟 ts 직접

hwe/install_db.php

@@ -23,8 +23,6 @@ if($session->userGrade == 5){
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('js/vendors.js')?>
-<?=WebUtil::printJS('js/common.js')?>
-<?=WebUtil::printJS('../e_lib/jquery.validate.min.js')?>
 <?=WebUtil::printJS('js/install_db.js')?>
 <?=WebUtil::printCSS('css/normalize.css')?>
 <?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>

hwe/ts/install_db.ts

@@ -0,0 +1,79 @@
+
+import axios from 'axios';
+import jQuery from 'jquery';
+import { Rules } from 'async-validator';
+import { JQValidateForm } from './util/jqValidateForm';
+import { convertFormData } from './util/convertFormData';
+import { InvalidResponse } from './defs';
+import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+
+jQuery(async function ($) {
+    setAxiosXMLHttpRequest();
+
+    const descriptor: Rules = {
+        full_reset: {
+            required: true,
+        },
+        db_host: {
+            type: 'string',
+            required: true,
+        },
+        db_port: {
+            type: 'integer',
+            validator: (rule, value: string) => {
+                const num = parseInt(value);
+                if (num <= 0 || num >= 65535) {
+                    return new Error('올바른 포트 범위가 아닙니다.');
+                }
+                return true;
+            }
+        },
+        db_id: {
+            type: 'string',
+            required: true,
+        },
+        db_pw: {
+            type: 'string',
+            required: true,
+        },
+        db_name: {
+            type: 'string',
+            required: true,
+        }
+    };
+    const validator = new JQValidateForm($('#db_form'), descriptor);
+    validator.installChangeHandler();
+    
+    $('#db_form').on('submit', async function (e) {
+        e.preventDefault();
+
+        const items = await validator.validate();
+        if(items === undefined){
+            return;
+        }
+
+        let data: InvalidResponse;
+
+        try{
+            const response = await axios({
+                url: 'j_install_db.php',
+                method: 'post',
+                responseType: 'json',
+                data: convertFormData(items)
+            })
+            data = response.data as InvalidResponse;
+        }
+        catch(e){
+            alert(e);
+            return false;
+        }
+        
+        if(!data.result){
+            alert(`에러: ${data.reason}`);
+            return false;
+        }
+
+        alert('DB.php가 생성되었습니다.');
+        location.href = 'install.php';
+    });
+});

hwe/ts/util/jqValidateForm.ts

@@ -0,0 +1,69 @@
+import Schema, { Rules, Values } from "async-validator";
+import { isArray } from "lodash";
+import { mergeKVArray } from "./mergeKVArray";
+import $ from 'jquery';
+
+export class JQValidateForm {
+    public readonly validator: Schema;
+    public readonly inputs: JQuery<HTMLElement>;
+    constructor(public readonly target: JQuery<HTMLElement>, public readonly rule: Rules) {
+        this.validator = new Schema(rule);
+        this.inputs = target.find('input');
+    }
+
+    public clearErrMsg():void {
+        this.inputs.removeClass('is-invalid');
+        this.inputs.removeClass('is-valid');
+        this.target.find('.invalid-feedback').detach();
+    }
+
+    public installChangeHandler():this{
+        this.inputs.on('change', ()=>{
+            void this.validate();
+        });
+        return this;
+    }
+
+    public async validate(): Promise<undefined | Values> {
+        const rawValues = mergeKVArray(this.inputs.serializeArray());
+        const validateResult = await this.validator.validate(rawValues).catch(({ fields }) => {
+            this.clearErrMsg();
+            for(const key of Object.keys(fields)){
+                let $item: JQuery<HTMLElement>;
+                const errMsg = fields[key][0].message;
+                if(isArray(rawValues[key])){
+                    $item = $(`#db_form input[name='${key}[]']`);
+                }
+                else{
+                    $item = $(`#db_form input[name='${key}']`);
+                }
+                $item.addClass('is-invalid');
+
+                const $error = $(`<span>${errMsg}</span>`);
+
+                $error.addClass( "invalid-feedback" );
+
+                if ( $item.prop( "type" ) === "checkbox" ) {
+                    $error.insertAfter( $item.parent( "label" ) );
+                } else {
+                    $error.insertAfter( $item );
+                }
+            }
+
+            this.inputs.each(function(){
+                const name = (this as HTMLInputElement).name;
+                if(name in fields){
+                    return;
+                }
+                this.classList.add('is-valid');
+            });
+            return undefined;
+        });
+        if(validateResult === undefined){
+            return undefined;
+        }
+        this.clearErrMsg();
+        this.inputs.addClass('is-valid');
+        return validateResult;
+    }
+}

hwe/ts/util/mergeKVArray.ts

@@ -0,0 +1,35 @@
+import { isString } from "lodash";
+
+interface NameValuePair {
+    name: string,
+    value: string
+}
+
+export function mergeKVArray(array : NameValuePair[]):Record<string, string|string[]>{
+    const result:Record<string, string|string[]> = {};
+
+    for(const {name, value} of array){
+        if(!isString(name)){
+            throw new TypeError(`${name} is not string`);
+        }
+        if(!isString(value)){
+            throw new TypeError(`${value} is not string`);
+        }
+
+        if(name === '' || name === '[]'){
+            continue;
+        }
+        if(name.length > 2 && name.slice(-2) == '[]'){
+            const keyHead = name.slice(0, -2);
+            if(!(keyHead in result)){
+                result[keyHead] = [value];
+            }
+            else{
+                (result[keyHead] as string[]).push(value);
+            }
+            continue;
+        }
+        result[name] = value;
+    }
+    return result;
+}

hwe/ts/util/setAxiosXMLHttpRequest.ts

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export function setAxiosXMLHttpRequest(): void{
+    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+    //TODO: X-Requested-With 믿지 말자.
+}

webpack.config.js

@@ -13,7 +13,8 @@ module.exports = [
             inheritPoint: './hwe/ts/inheritPoint.ts',
             common: './hwe/ts/common_deprecated.ts',
             troop: './hwe/ts/troop.ts',
-            map: './hwe/ts/map.ts'
+            map: './hwe/ts/map.ts',
+            install_db: './hwe/ts/install_db',
         },
         output: {
             filename: '[name].js',