명령 입력턴에 select2 적용

hwe/b_processing.php

@@ -77,6 +77,7 @@ $cssList = $commandObj->getCSSFiles();
 <meta name="viewport" content="width=1024" />
 <?=WebUtil::printJS('../e_lib/jquery-3.3.1.min.js')?>
 <?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
+<?=WebUtil::printJS('../e_lib/select2/select2.full.min.js')?>
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('js/common.js')?>
 <?=WebUtil::printJS('d_shared/base_map.js')?>
@@ -95,10 +96,13 @@ foreach($jsList as $js){
 }
 ?>
 <?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
+<?=WebUtil::printCSS('../e_lib/select2/select2.min.css')?>
+<?=WebUtil::printCSS('../e_lib/select2/select2-bootstrap4.css')?>
 <?=WebUtil::printCSS('../d_shared/common.css')?>
 <?=WebUtil::printCSS('css/common.css')?>
 <?=WebUtil::printCSS('css/main.css')?>
 <?=WebUtil::printCSS('css/map.css')?>
+<?=WebUtil::printCSS('css/processing.css')?>
 <?php
 foreach($cssList as $css){
     print(WebUtil::printCSS($css));

hwe/css/processing.css

@@ -0,0 +1,11 @@
+#amount {
+    width: 100px;
+}
+
+#colorType {
+    width: 150px;
+}
+
+.no-padding .select2-results__option {
+    padding: 0;
+}

hwe/js/processing.js

@@ -1,102 +1,243 @@
-function reserveTurn(turnList, command, arg){
+function reserveTurn(turnList, command, arg) {
     var target;
-    if(isChiefTurn){
+    if (isChiefTurn) {
         target = 'j_set_chief_command.php';
-    }
+    } else {
-    else{
         target = 'j_set_general_command.php';
     }
     $.post({
-        url:target,
+        url: target,
-        dataType:'json',
+        dataType: 'json',
-        data:{
+        data: {
-            action:command,
+            action: command,
-            turnList:turnList,
+            turnList: turnList,
-            arg:JSON.stringify(arg)
+            arg: JSON.stringify(arg)
         }
-    }).then(function(data){
+    }).then(function(data) {
-        if(!data.result){
+        if (!data.result) {
             alert(data.reason);
             return;
         }
 
-        if(!isChiefTurn){
+        if (!isChiefTurn) {
             window.location.href = './';
-        }
+        } else {
-        else{
             window.location.href = 'b_chiefcenter.php';
         }
 
     }, errUnknown);
 }
 
-jQuery(function($){
+jQuery(function($) {
 
-window.submitAction = function(){
+    window.submitAction = function() {
 
-    //checkCommandArg 참고
+        //checkCommandArg 참고
-    var availableArgumentList = {
+        var availableArgumentList = {
-        'string':[
+            'string': [
-            'nationName', 'optionText', 'itemType', 'nationType', 'itemCode',
+                'nationName', 'optionText', 'itemType', 'nationType', 'itemCode',
-        ],
+            ],
-        'int':[
+            'int': [
-            'crewType', 'destGeneralID', 'destCityID', 'destNationID',
+                'crewType', 'destGeneralID', 'destCityID', 'destNationID',
-            'amount', 'colorType', 
+                'amount', 'colorType',
-            'year', 'month',
+                'year', 'month',
-            'srcArmType', 'destArmType', //숙련전환 전용
+                'srcArmType', 'destArmType', //숙련전환 전용
-        ],
+            ],
-        'boolean':[
+            'boolean': [
-            'isGold', 'buyRice',
+                'isGold', 'buyRice',
-        ],
+            ],
-        'integerArray':[
+            'integerArray': [
-            'destNationIDList', 'destGeneralIDList', 'amountList'
+                'destNationIDList', 'destGeneralIDList', 'amountList'
-        ]
+            ]
-    }
+        }
 
-    var handlerList = {
+        var handlerList = {
-        'string':function($obj){
+            'string': function($obj) {
-            return $.trim($obj.eq(0).val());
+                return $.trim($obj.eq(0).val());
-        },
+            },
-        'int':function($obj){
+            'int': function($obj) {
-            return parseInt($obj.eq(0).val());
+                return parseInt($obj.eq(0).val());
-        },
+            },
-        'boolean':function($obj){
+            'boolean': function($obj) {
-            switch ($obj.eq(0).val().toLowerCase()) {
+                switch ($obj.eq(0).val().toLowerCase()) {
-            case "true": case "yes": case "1":
+                    case "true":
-                return true;
+                    case "yes":
-            case "false": case "no": case "0":
+                    case "1":
-                return false;
+                        return true;
-            default:
+                    case "false":
-                throw new Error ("Boolean.parse: Cannot convert string to boolean.");
+                    case "no":
+                    case "0":
+                        return false;
+                    default:
+                        throw new Error("Boolean.parse: Cannot convert string to boolean.");
+                }
+            },
+            'integerArray': function($obj) {
+                return $obj.map(function() {
+                    return parseInt($(this).val());
+                });
             }
-        },
+        }
-        'integerArray':function($obj){
+
-            return $obj.map(function(){
+        var argument = {};
-                return parseInt($(this).val());
+        for (var typeName in availableArgumentList) {
+            availableArgumentList[typeName].forEach(function(argName) {
+                var $obj = $('#' + argName);
+                if ($obj.length == 0) {
+                    $obj = $('.' + argName);
+                    if ($obj.length == 0) {
+                        return;
+                    }
+                }
+
+                argument[argName] = handlerList[typeName]($obj);
             });
         }
-    }
 
-    var argument = {};
+        console.log(argument);
-    for (var typeName in availableArgumentList) {
+        reserveTurn(turnList, command, argument);
-        availableArgumentList[typeName].forEach(function(argName){
+    };
-            var $obj = $('#'+argName);
+
-            if($obj.length == 0){
+    $('#commonSubmit').click(submitAction);
-                $obj = $('.'+argName);
+
-                if($obj.length == 0){
+    var $colorType = $('#colorType');
-                    return;
+    if ($colorType.length) {
+        $colorType.select2({
+            theme: 'bootstrap4',
+            placeholder: "색상을 선택해 주세요.",
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            templateSelection: function(item) {
+                if (item.disabled) {
+                    return item.text;
                 }
-            }
+                var bgcolor = item.element.dataset.color;
-    
+                var fgcolor = item.element.dataset.fontColor;
-            argument[argName] = handlerList[typeName]($obj);
+                return $("<span><span style='background-color:{0};color:{1};'>　</span>&nbsp;{2}</span>".format(
+                    bgcolor, fgcolor, item.text
+                ));
+            },
+            templateResult: function(item) {
+                if (item.disabled) {
+                    return item.text;
+                }
+                var bgcolor = item.element.dataset.color;
+                var fgcolor = item.element.dataset.fontColor;
+                return $("<div style='padding: 0.75rem 0.375rem; background-color:{0};color:{1};'>{2}</div>".format(
+                    bgcolor, fgcolor, item.text
+                ));
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'no-padding simple-select2-align-center bg-secondary text-secondary',
         });
     }
 
-    console.log(argument);
+    var $nationType = $('#nationType');
-    reserveTurn(turnList, command, argument);
+    if ($nationType.length) {
-};
+        $nationType.select2({
+            theme: 'bootstrap4',
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        });
+    }
 
-$('#commonSubmit').click(submitAction);
+    var $destCityID = $('#destCityID');
+    if ($destCityID.length) {
+        $destCityID.select2({
+            theme: 'bootstrap4',
+            placeholder: "도시를 선택해 주세요.",
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        });
+    }
 
+    var $destNationID = $('#destNationID');
+    if ($destNationID.length) {
+        $destNationID.select2({
+            theme: 'bootstrap4',
+            placeholder: "국가를 선택해 주세요.",
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        });
+    }
+
+    var $destGeneralID = $('#destGeneralID');
+    if ($destGeneralID.length) {
+        $destGeneralID.select2({
+            theme: 'bootstrap4',
+            placeholder: "장수를 선택해 주세요.",
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        });
+    }
+
+    var $isGold = $('#isGold');
+    if ($isGold.length) {
+        $isGold.select2({
+            theme: 'bootstrap4',
+            placeholder: "분량을 지정해 주세요.",
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            minimumResultsForSearch: -1,
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+        });
+    }
+
+    var $amount = $('#amount:not([type=hidden])');
+    if ($amount.length) {
+        $amount.select2({
+            theme: 'bootstrap4',
+            placeholder: "분량을 지정해 주세요.",
+            allowClear: false,
+            language: "ko",
+            containerCss: {
+                display: "inline-block !important",
+                color: 'white !important',
+            },
+            tags: true,
+            sorter: function(items) {
+                items.sort(function(lhs, rhs) {
+                    return parseInt(lhs.id) - parseInt(rhs.id);
+                })
+                return items;
+            },
+            containerCssClass: 'simple-select2-align-center bg-secondary text-secondary',
+            dropdownCssClass: 'select2-only-number simple-select2-align-center bg-secondary text-secondary',
+        })
+    }
+
+    $(document).on('keypress', '.select2-only-number .select2-search__field', function() {
+        $(this).val($(this).val().replace(/[^\d].+/, ""));
+        if ((event.which < 48 || event.which > 57)) {
+            event.preventDefault();
+        }
+    });
 
 });

hwe/sammo/Command/General/che_건국.php

@@ -269,7 +269,7 @@ class che_건국 extends Command\GeneralCommand
             }
             */
             ?>
-                <option value="<?= $idx ?>" style='background-color:<?= $color ?>;color:<?= newColor($color) ?>;'>국가명(<?=$color?>)</option>
+                <option value="<?= $idx ?>" data-color="<?= $color ?>" data-font-color="<?=newColor($color)?>" style='background-color:<?= $color ?>;color:<?= newColor($color) ?>;'>국가명(<?=$color?>)</option>
             <?php endforeach; ?>
         </select>
         성향 : <select class='formInput' name='nationType' id='nationType' size='1'>

hwe/sammo/Command/Nation/che_국기변경.php

@@ -182,7 +182,7 @@ class che_국기변경 extends Command\NationCommand
             }
             */
             ?>
-                <option value="<?= $idx ?>" style='background-color:<?= $color ?>;color:<?= newColor($color) ?>;'>국가명(<?=$color?>)</option>
+                <option value="<?= $idx ?>" data-color=<?=$color?> data-font-color="<?=newColor($color)?>" style='background-color:<?= $color ?>;color:<?= newColor($color) ?>;'>국가명(<?=$color?>)</option>
             <?php endforeach; ?> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
         <br>
 <?php