레시피 체크

smart factory

Posted by ETHAN KIM on October 24, 2021 · 31 mins read
JavaScript Workspace

기능설명

  • 품목을 선택하면 자식 테이블의 레시피 리스트를 팝업으로 출력
  • 품목을 선택하면 레시피 내 체크리스트가 비활성(red)상태로 리스트에 추가된다.
  • 개별적으로 클릭하여 활성(green) 상태로 변경하는 것이 가능하다.
  • 저장버튼을 누르면 체크리스트 내 모든 항목이 활성상태인지 체크 후 비활성 항목이 있다면 알람을 띄운다.


구현 화면


코드

/*
    ##### 수정로그 #####
    2021.09.01 김현중 신규
*/
//*************************************** GLOBAL ******************************************//
//POT 1,2,3 list data
var list1_data = [];
var list2_data = [];
var list3_data = [];

//item_data
var stit_uid1;
var stit_uid2;
var stit_uid3;

//async default time
var time_s = 300;

//*************************************** EXECUTION ******************************************//
$(function(){ 
    // default window size , position
    var window_height = $(window).height()-300;
    var window_center = (window.screen.width / 3);
    var window_middle = (window.screen.height / 7);

    //************ init *************//
    // create layout
    var layout = create_layout();
    
    // create form
    var agit_form1 = create_agit_form();
    layout.getCell('agit1').attach(agit_form1); 

    var agit_form2 = create_agit_form();
    layout.getCell('agit2').attach(agit_form2); 

    var agit_form3 = create_agit_form();
    layout.getCell('agit3').attach(agit_form3); 

    // create list
        // POT No.1
    var agit_list1 = create_agit_list(); //LIST
    agit_form1.getItem("list").attach(agit_list1); //FORM

    agit_list1.events.on("Click", function(id, e){
        var bg_color = $(`li[dhx_id=${id}]`).css('background-color');
        if(bg_color == 'rgb(239, 83, 80)' || bg_color == 'rgb(237, 237, 237)'){
            $(`li[dhx_id=${id}]`).css('background-color', '#3CB371');
            for(var i=0; i < list1_data.length; i++){
                if(list1_data[i].id == id){
                    list1_data[i].streci_chk = 1;
                }
            }
        }else{
            $(`li[dhx_id=${id}]`).css('background-color', 'rgb(239, 83, 80)');
            for(var i=0; i < list1_data.length; i++){
                if(list1_data[i].id == id){
                    list1_data[i].streci_chk = 0;
                }
            }
        }
    });

    var color_grid1 = create_color_grid(); //GRID

        // POT No.2
    var agit_list2 = create_agit_list(); //LIST
    agit_form2.getItem("list").attach(agit_list2); //FORM

    agit_list2.events.on("Click", function(id, e){
        var bg_color = $(`li[dhx_id=${id}]`).css('background-color');
        if(bg_color == 'rgb(239, 83, 80)' || bg_color == 'rgb(237, 237, 237)'){
            $(`li[dhx_id=${id}]`).css('background-color', '#3CB371');
            for(var i=0; i < list2_data.length; i++){
                if(list2_data[i].id == id){
                    list2_data[i].streci_chk = 1;
                }
            }
        }else{
            $(`li[dhx_id=${id}]`).css('background-color', 'rgb(239, 83, 80)');
            for(var i=0; i < list2_data.length; i++){
                if(list2_data[i].id == id){
                    list2_data[i].streci_chk = 0;
                }
            }
        }
    });

    var color_grid2 = create_color_grid(); //GRID

        // POT No.3
    var agit_list3 = create_agit_list(); //LIST
    agit_form3.getItem("list").attach(agit_list3); //FORM

    agit_list3.events.on("Click", function(id, e){
        var bg_color = $(`li[dhx_id=${id}]`).css('background-color');
        if(bg_color == 'rgb(239, 83, 80)' || bg_color == 'rgb(237, 237, 237)'){
            $(`li[dhx_id=${id}]`).css('background-color', '#3CB371');
            for(var i=0; i < list3_data.length; i++){
                if(list3_data[i].id == id){
                    list3_data[i].streci_chk = 1;
                }
            }
        }else{
            $(`li[dhx_id=${id}]`).css('background-color', 'rgb(239, 83, 80)');
            for(var i=0; i < list3_data.length; i++){
                if(list3_data[i].id == id){
                    list3_data[i].streci_chk = 0;
                }
            }
        }
    });

    var color_grid3 = create_color_grid(); //GRID

    // create window
    var window1 = create_window();
    window1.header.data._pull.title.value = '품목1 선택';
    window1.setPosition(window_center-393, window_middle/3); //window position
    window1.setSize(500, window_height+200); //window size

    var window2 = create_window();
    window2.header.data._pull.title.value = '품목2 선택';
    window2.setPosition(window_center+150, window_middle/3); //window position
    window2.setSize(500, window_height+200); //window size

    var window3 = create_window();
    window3.header.data._pull.title.value = '품목3 선택';
    window3.setPosition(window_center+692, window_middle/3); //window position
    window3.setSize(500, window_height+200); //window size

    //********** form1 [control]***********//

    //select item
    agit_form1.events.on("Click", async function(name, events) { 
        if(name == 'select'){
            color_grid1.resetFilter();

            var color_data = select_item(); // select item list
            color_data = select_common('',[color_data]);
            color_data = color_data.data[Object.keys(color_data.data)[0]];
            color_grid1.data.parse(color_data);

            window1.attach(color_grid1);
            window1.show();
        }else if(name == 'button'){         
            if(list1_data.length < 1){
                d_alert('레시피 정보가 존재하지 않습니다.');
            }else{
                var message = [];
                for(var i=0; i<list1_data.length; i++){
                    if(list1_data[i].streci_chk == 0 || list1_data[i].streci_chk == null){
                        message.push(list1_data[i].streci_nm);
                    }
                }
                if(message.length < 1){
                    // insert agitation record
                    var insert_agitation_data = [{
                        table  : 'prod_agitation_record',
                        pk : 'pragre_uid',
                        column : [{
                            'stit_uid':stit_uid1,
                            'pragre_container':layout.config.cols[0].header,
                            'pragre_memuid':login_uid,
                            'pragre_regdate':''
                        }],
                    }]          
                    insert_async(insert_agitation_data)
                        .then((data) =>{
                            if(data.result != 'success'){
                                d_alert('교반 이력 저장에 실패하였습니다. 관리자에게 문의 해 주세요.')
                            }
                        });

                    // animation
                    var result_ani = await Promise.all($('.list_css').eq(0).children().map((index, node) => time_ani(index, node))); 

                    setTimeout(() => {
                        d_alert('교반 체크리스트 작업이 완료되었습니다.');
                        agit_list1.data.parse({});
                        list1_data = [];
                        agit_form1.setValue({'stit_nm': ''});//set target name
                    }, 800)
                }else{
                    d_alert(`<span style = 'font-weight:bold'>${message.toString()}</span> 항목이 체크되지 않았습니다.`);
                }
            }
        }
    });

    //grid1 control
    color_grid1.events.on("cellClick", function(row,column,e){//event row click
        stit_uid1 = row.stit_uid; //for insert [GLOBAL]
        agit_form1.setValue({'stit_nm': row.stit_nm});//set target name

        var recipe_data = select_recipe(row.stit_uid);
        recipe_data = select_common('',[recipe_data]);
        recipe_data = recipe_data.data[Object.keys(recipe_data.data)[0]];

        agit_list1.data.parse(recipe_data);

        var real_data = agit_list1.data.serialize();
        list1_data = real_data; //update serialized data 

        window1.hide();
    });

    //********** form2 [control]***********//

    //select item
    agit_form2.events.on("Click", async function(name, events) { 
        if(name == 'select'){
            color_grid2.resetFilter();

            var color_data = select_item(); //select item list
            color_data = select_common('',[color_data]);
            color_data = color_data.data[Object.keys(color_data.data)[0]];
            color_grid2.data.parse(color_data);

            window2.attach(color_grid2);
            window2.show();
        }else if(name == 'button'){
            if(list2_data.length < 1){
                d_alert('레시피 정보가 존재하지 않습니다.');
            }else{
                var message = [];
                for(var i=0; i<list2_data.length; i++){
                    if(list2_data[i].streci_chk == 0 || list2_data[i].streci_chk == null){
                        message.push(list2_data[i].streci_nm);
                    }
                }
                if(message.length < 1){
                    // insert agitation record
                    var insert_agitation_data = [{
                        table  : 'prod_agitation_record',
                        pk : 'pragre_uid',
                        column : [{
                            'stit_uid':stit_uid2,
                            'pragre_container':layout.config.cols[1].header,
                            'pragre_memuid':login_uid,
                            'pragre_regdate':''
                        }],
                    }]          
                    insert_async(insert_agitation_data)
                        .then((data) =>{
                            if(data.result != 'success'){
                                d_alert('교반 이력 저장에 실패하였습니다. 관리자에게 문의 해 주세요.')
                            }
                        });

                    // animation
                    var result_ani = await Promise.all($('.list_css').eq(1).children().map((index, node) => time_ani(index, node))); 

                    setTimeout(() => {
                        d_alert('교반 체크리스트 작업이 완료되었습니다.');
                        agit_list2.data.parse({});
                        list2_data = [];
                        agit_form2.setValue({'stit_nm': ''});//set target name
                    }, 800)
                }else{
                    d_alert(`<span style = 'font-weight:bold'>${message.toString()}</span> 항목이 체크되지 않았습니다.`);
                }
            }
        }
    });

    //grid2 control
    color_grid2.events.on("cellClick", function(row,column,e){ //event row click
        stit_uid2 = row.stit_uid; //for insert [GLOBAL]
        agit_form2.setValue({'stit_nm': row.stit_nm});//set target name

        var recipe_data = select_recipe(row.stit_uid);
        recipe_data = select_common('',[recipe_data]);
        recipe_data = recipe_data.data[Object.keys(recipe_data.data)[0]];

        agit_list2.data.parse(recipe_data);

        var real_data = agit_list2.data.serialize();
        list2_data = real_data; //update serialized data 

        window2.hide();
    });

    //********** form3 [control]***********//

    //select item
    agit_form3.events.on("Click", async function(name, events) { 
        if(name == 'select'){
            color_grid3.resetFilter();

            var color_data = select_item(); // select item list
            color_data = select_common('',[color_data]);
            color_data = color_data.data[Object.keys(color_data.data)[0]];
            color_grid3.data.parse(color_data);

            window3.attach(color_grid3);
            window3.show();
        }else if(name == 'button'){
            if(list3_data.length < 1){
                d_alert('레시피 정보가 존재하지 않습니다.');
            }else{
                var message = [];
                for(var i=0; i<list3_data.length; i++){
                    if(list3_data[i].streci_chk == 0 || list3_data[i].streci_chk == null){
                        message.push(list3_data[i].streci_nm);
                    }
                }
                if(message.length < 1){
                    // insert agitation record
                    var insert_agitation_data = [{
                        table  : 'prod_agitation_record',
                        pk : 'pragre_uid',
                        column : [{
                            'stit_uid':stit_uid3,
                            'pragre_container':layout.config.cols[2].header,
                            'pragre_memuid':login_uid,
                            'pragre_regdate':''
                        }],
                    }]          
                    insert_async(insert_agitation_data)
                        .then((data) =>{
                            if(data.result != 'success'){
                                d_alert('교반 이력 저장에 실패하였습니다. 관리자에게 문의 해 주세요.')
                            }
                        });

                    // animation
                    var result_ani = await Promise.all($('.list_css').eq(2).children().map((index, node) => time_ani(index, node))); 

                    setTimeout(() => {
                        d_alert('교반 체크리스트 작업이 완료되었습니다.');
                        agit_list3.data.parse({});
                        list3_data = [];
                        agit_form3.setValue({'stit_nm': ''});//set target name
                    }, 800)
                }else{
                    d_alert(`<span style = 'font-weight:bold'>${message.toString()}</span> 항목이 체크되지 않았습니다.`);
                }
            }
        }
    });

    //grid3 control
    color_grid3.events.on("cellClick", function(row,column,e){//event row click
        stit_uid3 = row.stit_uid; //for insert [GLOBAL]
        agit_form3.setValue({'stit_nm': row.stit_nm});//set target name

        var recipe_data = select_recipe(row.stit_uid);
        recipe_data = select_common('',[recipe_data]);
        recipe_data = recipe_data.data[Object.keys(recipe_data.data)[0]];

        agit_list3.data.parse(recipe_data);

        var real_data = agit_list3.data.serialize();
        list3_data = real_data; //update serialized data 

        window3.hide();
    });
});

//*************************************** CONFIG & LOGIC ******************************************//

//LAYOUT [Main]
function create_layout(){
    var layout = new dhx.Layout("layout", { //LAYOUT
        type: 'space',
        cols: [
            {
                width : '32.5%',
                id: 'agit1',
                header: '교반 1',
            },
            {
                width : '32.5%',
                id: 'agit2',
                header: '교반 2',
            },
            {
                width : '32.5%',
                id: 'agit3',
                header: '교반 3',
            },                  
        ]
    });
    return layout;
}

// FORM [sale add]
function create_agit_form(){
    var agit_form_config = { 
        css: "dhx_widget--border_top dhx_widget--border_bottom",
        rows: [{
                cols: [{
                        css: 'selected_item',
                        type: "input",
                        name: "stit_nm",
                        label: "품목명",
                        labelPosition: "left",
                        labelWidth: '25%',
                        width: '50%',
                        disabled: true,
                    },
                    {
                        name: "select",
                        type: "button",
                        text: "선택",
                        size: "medium",
                        view: "flat",
                        color: "secondary",
                    }]
            },
            {
                type: "container", //container for any widget except Form and Layout 
                name: "list",
                padding: "12px 0px",
                height: "75%"
            },
            {
                align: "end",
                padding: 28,
                cols: [
                    {
                        name: "button",
                        type: "button",
                        submit: true,
                        text: "완료",
                        size: "medium",
                        view: "flat",
                        color: "primary",
                    }
                ]
            }
        ]
    };
    const agit_form = new dhx.Form("", agit_form_config);

    return agit_form;
}

//LIST [recipe]
function create_agit_list(){
    var agit_list = new dhx.List("", {
        css: 'list_css',
        itemHeight: 50,
        selection:false,
        template: (item) => `<div style = 'color: white; font-weight : bold; font-size : 20px'>${item.streci_nm}</div>`
    });
    return agit_list;
}

//GRID [item_color]
function create_color_grid(){
    var color_grid = new dhx.Grid("", {
        css: 'item_color',
        columns: [
            { id: "stitcl_nm", header: [{ text: "분류", align:'center'}]},
            { id: "stit_cd", header: [{ text: "품목코드", align:'center'}, { content: "inputFilter" }]},
            { id: "stit_nm", header: [{ text: "품목명", align:'center'}, { content: "inputFilter" }]},
            { id: "stit_uid", header: [{ text: "품목 고유번호"}], hidden : true},
        ],
        headerRowHeight: 35,
        rowHeight: 40,
        selection: 'row',
        autoWidth: true, 
        data: '',
    });
    return color_grid;
}

//WINDOW [General for Form]
function create_window(){
    var window_config = {
        width: '500',
        height: '500',
        title: "기본",
        movable: true,
        closable: true,
    };
    var general_window = new dhx.Window(window_config);
    return general_window;
}

//*************************************** FUNCTION [QUERY] ******************************************//
//color [select]
function select_item(){
    var data_info = new Object();
    var table = 'stnd_item';

    var join_table = 'stnd_item_classify';
    var join_opt = {[table]:'stitcl_uid', [join_table]:'stitcl_uid'};

    data_info.table = [table,join_table];
    data_info.join = join_opt;

    data_info.column = '*';
    data_info.where = {and:[{column:'stnd_item.stitgr_uid',type:'=','data':3}]};
    data_info.order = {'stnd_item.stit_uid':'desc'};
    return data_info;
}

//recipe [select]
function select_recipe(uid){
    var data_info = new Object();
    data_info.table = 'stnd_recipe';
    data_info.column = '*';
    data_info.where = {and:[{column:'stit_uid',type:'=','data':uid}]};
    data_info.order = {'streci_uid':'desc'};
    return data_info;
}

//*************************************** FUNCTION [ETC] ******************************************//
//slide animation
function time_ani(index, node){
    return new Promise(async (resolve) => {
        setTimeout(() => {
            node.animate({left: '1000%'}, 6000, 'swing');
            resolve('success');
        },time_s*index/2);
    })
}