見出し画像

ランチ予約集計機能を改善(スマホ機能)No.037

前回の記事で、LINEなどから関係者にランチメニューを確認する機能を紹介しましたが、関係者が登録した内容を確認したい機能があったほうがいいと思い、機能追加しました。前回の記事
LINEでも使えるランチ予約集計(webixライブラリを使って、簡単にエントリと集約機能を)No.036|Yamasan (note.com)

では、PCで一覧確認する機能まで実装していましたが、今回は、スマホで確認できる画面を作成しました。
また、確認画面から対象行を選択して、再登録ボタンをクリックすれば、その人で、ランチ予約ができる画面に遷移する機能(再登録するため)も追加しています。

スマホ画面なので、テーブル形式ではなく、webixのlistviewとテンプレートで作成しました。スマホ上でスクロールして、全情報を確認できます。
今回の画面では、場所情報にリンクを追加し、紹介画面では、架空のレストランですが、マップ情報表示にも遷移できるようにしました。
また、以下のように表示された予約行を選択すると、例では、田中さんですが、再登録ボタンクリックで、田中さんに設定して、再登録できるように画面遷移しています。

参加者が、初期値で田中さんになっています。

webixライブラリ(javascript)とサーバ側にPHP言語を選択すればこのような機能は、簡単に実装できます。
WEB機能で、画面間の連携などができることで、実現できるサービスの範囲が拡大できるのはいいですね。
今回、変更、追加したソースは、以下の通りです。
スマホで確認する画面
LU0030_smd_meeting_lists.php

<?php
	//https://sunsun.sakura.ne.jp/webix01/view/LU0030/LU0030_smd_meeting_lists.php?userid=admin
	$TITLE_INFO ="ランチ予約確認";
	$VER_INFO ="V01L01";
    define('ROOT_PATH','/home/sunsun/www/webix01'); //ソースを保存しているパス(動作環境に応じて記述する必要あり)
    define('SUB_FOLDER','/webix01');    //サブフォルダを指定したURL 
	$myfilename = basename(__FILE__);	//自分自身のファイル名取得
	$userid = '';
	$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報(自ファイル名,ログインIDを付与)
	
	if($_SERVER["REQUEST_METHOD"] != "GET"){
	  //GET以外ははじく
	  error_log($logheader.'  REQUEST_METHOD no GET');
	  header("HTTP/1.0 404 Not Found");
	  return;
	}
	$userclient = 'pc';
	if(isset($_GET['userid'])){
		$userid = $_GET['userid'];
		$error_flag = 1;
	}
	else{
		$error_flag = -1;
	  	error_log($logheader.'  userid not found');
	  	header("HTTP/1.0 404 Not Found");
	  	exit;
	}
	if(isset($_GET['userclient'])){
		$userclient = $_GET['userclient'];
	}
	$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報(自ファイル名,ログインIDを付与)

	include('../../commonlib/svr_common_lib_v3.php');	//
	$config_obj = get_config_obj();
	//アクセスキーチェック

?>
<!DOCTYPE html>
<html lang="ja">
	<head>
	<meta charset="UTF-8">
	
    <script src="/webix_GPL_1020/webix.js"></script>
	<link href="/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">    
	<link href="<?php  echo SUB_FOLDER; ?>/commonlib/webix_custom_css.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">    
	<link rel="icon" href="<?php  echo SUB_FOLDER; ?>/image/webix_64.ico">
	<script src="<?php  echo SUB_FOLDER; ?>/commonlib/object-assign.js"></script>
	<script src="<?php  echo SUB_FOLDER; ?>/commonlib/moment-with-locales.js"></script>
    <script src="<?php  echo SUB_FOLDER; ?>/commonlib/webix_common_lib.js"></script>
	<link rel="stylesheet" href="/webix_GPL_1020/css/materialdesignicons.min.css" type="text/css" charset="utf-8">
	<style>
    .mainLabel>.webix_el_box {
    		font-size: 20px;
    		font-weight:bold;
  	}
	.teal_bgcolor .webix_button {
 		background-color: #008080;
  		color: #FFFFFF;
	}
	.red .webix_label_right{
  		color: #FF0000;
	}
	</style>
	
	<title><?php echo $TITLE_INFO.' ('.$VER_INFO.')' ?></title>
	</head>
<body>
	<script type="text/javascript" charset="utf-8">
	webix.i18n.setLocale("ja-JP");
	
<?php
	include_once('../../commonlib/CM0010_goto_menu_action.php');
	include_once('../../commonlib/CM0030_sendprm_set_request.php');
	include_once('../../commonlib/CM0050_open_menucmd.php');
	include_once('../../commonlib/CM0060_common_validate_check.php');
	include_once('../../commonlib/CM0080_screen_control.php');

?>

var LU0030_meeting_date = "2024/06/30";
var LU0030_meeting_subject ="ランチ会";
var LU0030_meeting_starttime = "11:00";
var LU0030_meeting_place = "<a href='https://maps.app.goo.gl/jgq2pqVRwtSSd6gJA'>イタリアンナポリ</a>";


	var my_local_session = {};
	my_local_session.userid = "admin";
	webix.ui.fullScreen();
	
	function LU0030_disp_meeting_lists(){
		$$("LU0030_table").clearAll(); //一覧を一度クリア
        var access_key = Get_AccessKey();
        var send_prm = Prepare_send_prm(my_local_session,access_key);
		send_prm.dateinfo = moment(LU0030_meeting_date).format("YYYY-MM-DD");
		send_prm.subject = LU0030_meeting_subject;
		var xhr =webix.ajax().sync().get("<?php  echo SUB_FOLDER; ?>/rest_api/LU0010/LU0012_meeting_db_selectlists.php",send_prm);
		var resp =  JSON.parse(xhr.responseText);
		if(resp.resp =="ok"){
		   	$$("LU0030_table").parse(resp.var_lists); 
		}
		else{
		   	webix.message({type:"error",text:"検索でエラーが発生しました。code="+resp.error_code});
		}
	}

	function LU0030_re_entry(){
		var item = $$("LU0030_table").getSelectedItem();
        var send_prm = {};
        send_prm.userid = "admin";
		var username = "";
		if(item){
			username = item.username;
        	send_prm.username = username;
		}

		webix.send("<?php  echo SUB_FOLDER; ?>/view/LU0020/LU0020_lunch_entry.php",send_prm,"GET","_blank");
	}
	//検索条件フォーム構成リスト
	var form_collection = [
		{ margin:5, cols:[
    		{ view:"label", label:"ランチ登録情報です",width:300,css:"mainLabel"},
     	]},
		{ margin:5, cols:[
    		{ view:"label", label:"開催日:"+LU0030_meeting_date+" "+LU0030_meeting_starttime+"~ ",width:300,css:"mainLabel"},
     	]},
		{ margin:5, cols:[
    		{ view:"label", label:"場所:"+LU0030_meeting_place  ,width:300,css:"mainLabel",id:"LU0030_meeting_place",name:"LU0030_meeting_place"},
     	]},
		{ margin:5, cols:[
            { view:"button",id:"search_btn", value: "検索", align:"center", width: 100,
				click:function(){
					LU0030_disp_meeting_lists();
      			}
    		},
            { view:"button", value: "閉じる", align:"center", width: 100, css:"menu",
				click:function(){
					location.href = 'https://www.google.com/?hl=ja';
      			}
    		},
            { view:"button",id:"re_entry_btn", value: "再登録", align:"center", width: 100,css:"webix_danger",
				click:function(){
					LU0030_re_entry();
      			}
    		},
        	]
        }
		];
	//画面描画
	webix.ui({
		view:"form", 
   		resize:true,
    	elements:[
			{rows:[
				{ view:"form",	//作成されるエレメントの種類
  					id: "form1",	//参照用のID情報
  					elements:form_collection ,	//フォームの構成要素を指定
        		}
        		]
            },
            {
            	id: "LU0030_table",
                type:"clean",
                view:"dataview",
                select:"row",
                width:380,
                type:{
                	width:380,
                	height:120,
                },
            	template: function (obj) {
            		var template01 = "";
           			template01 = "<div class='webix_strong'>名前"+obj.username+"</div>";
            		template01 +="<div class='webix_strong'>種類:"+obj.main_type+"</div>";
            		template01 +="<div class='webix_strong'>メニュー:"+obj.lunch_menu+"</div>";
            		template01 +="<div class='webix_strong'>ドリンク:"+obj.drink_menu+"</div>";
            		template01 +="<div class='webix_strong'>値段:"+obj.total_plice+"円</div>";
    				return template01;
  				},
       			datatype:"json",
 				data:[]
 			}
        	]
        }
    );
	LU0030_disp_meeting_lists();
	</script>
</body>
</html>

前回の記事で紹介した予約登録機能の変更ソース
LU0020_lunch_entry.php

<?php
//https://sunsun.sakura.ne.jp/webix01/view/LU0020/LU0020_lunch_entry.php?userid=admin
//======================================================================
//File Name       : LU0020_lunch_entry.php
//Encoding        : UTF-8
//Creation Date   : 2024-06-10
// 
//Copyright © 2024 sunsunfarm. All rights reserved.
// 
//This source code or any portion thereof must not be  
//reproduced or used in any manner whatsoever.
//====================================================================== 

	$TITLE_INFO ="ランチ選択";
	$VER_INFO ="V01L01";
        define('ROOT_PATH','/home/sunsun/www/webix01'); //ソースを保存しているパス(動作環境に応じて記述する必要あり)
        define('SUB_FOLDER','/webix01');    //サブフォルダを指定したURL 
	$myfilename = basename(__FILE__);	//自分自身のファイル名取得
	$userid = '';
	$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報(自ファイル名,ログインIDを付与)
	
	if($_SERVER["REQUEST_METHOD"] != "GET"){
	  //GET以外ははじく
	  error_log($logheader.'  REQUEST_METHOD no GET');
	  header("HTTP/1.0 404 Not Found");
	  return;
	}
	$error_flag = -1;
	if(isset($_GET['userid'])){
		$userid = $_GET['userid'];
		$error_flag = 1;
	}
	$username = "";
	if(isset($_GET['username'])){
		$username = trim($_GET['username']);
	}

	$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報(自ファイル名,ログインIDを付与)
	error_log($logheader.'username='.$username);

	include('../../commonlib/svr_common_lib_v3.php');	//
?>
<!DOCTYPE html>
<html lang="ja">
	<head>
	<meta charset="UTF-8">
    <script src="/webix_GPL_1020/webix.js"></script>
	<link href="/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">    
	<link href="<?php  echo SUB_FOLDER; ?>/commonlib/webix_custom_css.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">    
	<link rel="icon" href="<?php  echo SUB_FOLDER; ?>/image/webix_64.ico">
	<script src="<?php  echo SUB_FOLDER; ?>/commonlib/object-assign.js"></script>
	<script src="<?php  echo SUB_FOLDER; ?>/commonlib/moment-with-locales.js"></script>
    <script src="<?php  echo SUB_FOLDER; ?>/commonlib/webix_common_lib.js"></script>
	<link rel="stylesheet" href="/webix_GPL_1020/css/materialdesignicons.min.css" type="text/css" charset="utf-8">
<style>
    .mainLabel>.webix_el_box {
    		font-size: 16px;
    		font-weight:bold;
  	}
  	.subLabel>.webix_el_box {
    		font-size: 13px;
    		font-weight:bold;
    		background: #ffc0cb;
  	}

	.bt_1 button.webix_button{
			background: #396D9E;
			color:#FFFFFF;
			font-size: 18px;
	}
  .bt_2 button.webix_button{
			background: #008080;
			color:#FFFFFF;
  			border:1px solid #008080;;
			font-size: 18px;
	}
	.bt_3 button.webix_button{
			background: #ff7f50;
  			border:1px solid #ff7f50;
			color:#FFFFFF;
			font-size: 18px;
	}
 	.bt_4 button.webix_button{
			background:  #808080;
  			border:1px solid #808080;
			color:#FFFFFF;
			font-size: 18px;
	}
 	.bt_5 button.webix_button{
			background:  #c71585;
  			border:1px solid #c71585;
			color:#FFFFFF;
			font-size: 18px;
	}
   .bt_pasuta button.webix_button{
			background: #396D9E;
			color:#FFFFFF;
			font-size: 12px;
	}
   .bt_drink button.webix_button{
			background: #6495ed;
			color:#FFFFFF;
			font-size: 12px;
	}
   .bt_drinkh button.webix_button{
			background: #800000;
			color:#FFFFFF;
			font-size: 12px;
	}
 	.red .webix_el_box{
  		color: #ff0000;
	}
	.red  .webix_control.webix_el_text{
  		color: #ff0000;
	}
  
 </style>	
	<title><?php echo $TITLE_INFO.' ('.$VER_INFO.')' ?></title>
	</head>
<body>
<script type="text/javascript" charset="utf-8">
	webix.i18n.setLocale("ja-JP");
<?php
	include('../../commonlib/CM0030_sendprm_set_request.php');	//送信パラメータ準備関数(in:session_info,access_key out:send_prm)
	echo "	var username ='".$username."';\n";

?>

webix.ui.fullScreen();

var LU0020_meeting_date = "2024/06/30";
var LU0020_meeting_subject ="ランチ会";
var LU0020_meeting_starttime = "12:00";

var LU0020_meeting_place = "<a href='https://maps.app.goo.gl/jgq2pqVRwtSSd6gJA'>イタリアンナポリ</a>";

var LU0020_username_array =[
    "",
	"田中",
	"遠藤",
	"木村",
	"山本",
	"伊藤",
	"河合",
	"山田",
];

var LU0020_username = username;	//参加者
var LU0020_main_type = "";	//種別メニュー
var LU0020_lunch_menu = "";	//メインのセットメニュー
var LU0020_drink_menu = "";
var LU0020_back_view_id = "";

var LU0020_main_plice = 0;
var LU0020_option1_plice = 0;
var LU0020_total_plice = 0;

//ランチメニューを閉じて、ドリンクメニューを開く
function set_lauch_and_next_drink(hide_view_id,show_view_id,lunch_menu){
  	LU0020_lunch_menu = lunch_menu+check_option1_chk();
  	$$("PastaView_menu_text").setValue(LU0020_lunch_menu);
    $$("DrinkView_menu_text").setValue(LU0020_lunch_menu);
 	$$("tabbar").showOption(show_view_id);
 	$$("tabbar").hideOption(hide_view_id);
    LU0020_back_view_id = hide_view_id;
}
function set_lauch_for_setmenu_and_next_drink(hide_view_id,show_view_id,lunch_menu){
  	LU0020_lunch_menu = lunch_menu+check_option2_chk();
  	$$("SetView_menu_text").setValue(LU0020_lunch_menu);
    $$("DrinkView_menu_text").setValue(LU0020_lunch_menu);
 	$$("tabbar").showOption(show_view_id);
 	$$("tabbar").hideOption(hide_view_id);
    LU0020_back_view_id = hide_view_id;
}
function set_lauch_for_piza_and_next_drink(hide_view_id,show_view_id,lunch_menu){
  	LU0020_lunch_menu = lunch_menu+check_option2_chk();
  	$$("PizaView_menu_text").setValue(LU0020_lunch_menu);
    $$("DrinkView_menu_text").setValue(LU0020_lunch_menu);
 	$$("tabbar").showOption(show_view_id);
 	$$("tabbar").hideOption(hide_view_id);
    LU0020_back_view_id = hide_view_id;
}



//ドリンクメニューを閉じて、確認メニューを開く
function set_drink_and_next_last_check(drink_menu){
  	LU0020_drink_menu = drink_menu;
  	$$("DrinkView_drink_text").setValue(LU0020_drink_menu);
    $$("check_username").setValue(LU0020_username);
    $$("check_main_text").setValue(LU0020_lunch_menu);
    $$("check_drink_text").setValue(LU0020_drink_menu);
    
    LU0020_total_plice=Number(LU0020_main_plice)+Number(LU0020_option1_plice);
    $$("check_plice").setValue(LU0020_total_plice);
    $$("tabbar").showOption("CheckView");
    $$("tabbar").hideOption("DrinkView");
    

}
function check_username(){
	LU0020_username = $$("username").getValue();
	if(LU0020_username == ""){
		webix.alert("参加者をクリック<br>して選択してください。");
		return false;
	}
	else{
		return true;
	}
}
function check_option1_chk(){
	if($$("option1").getValue()){
		LU0020_option1_plice = 250;
    	return "+大盛り";
    }
    else{
	LU0020_option1_plice = 0;
        return "";
    }
}

function check_option2_chk(){
	if($$("option2").getValue() == 0){
		LU0020_option1_plice = 0;
    	return "+ライス";
    }
    else{
		LU0020_option1_plice = 0;
        return "+パン";
    }
}


var LunchView_element =[
	{ margin:5, cols:[
    	{ view:"label", label:"開催日:"+LU0020_meeting_date+" "+LU0020_meeting_starttime+"~ ",width:300,css:"mainLabel"},
     ]},
	{ margin:5, cols:[
    	{ view:"label", label:"場所:"+LU0020_meeting_place  ,width:300,css:"mainLabel"},
     ]},
	{ margin:5, cols:[
    	{ view:"select", label:"参加者",options:LU0020_username_array,id:"username",name:"username",value:"",css:"mainLabel",width:200,labelWidth:80},
     ]},
	{ cols:[
        { view:"label",value:"" ,width:350,id:"LunchView_menu_text",name:"LunchView_menu_text"},
    ]},
	{ margin:5, cols:[
    	{ view:"label", label:"以下の4つの中から選択してください"  ,width:300,css:"mainLabel"},
     ]},
    { margin:5, cols:[
        { view:"button", label:"パスタセット" , type:"form" ,width:150,css:"bt_1",height:50,
        	click:function(){
            	LU0020_main_type = "パスタセット";
            	$$("LunchView_menu_text").setValue(LU0020_main_type);
            	$$("SetView_menu_text").setValue("");
            	$$("PizaView_menu_text").setValue("");
            	if(!check_username()) return;
            	$$("tabbar").showOption("PastaView");
            	$$("tabbar").hideOption("LunchView");
        	}
        },
     ]},
     { margin:5, cols:[
     	{view:"button", label:"ランチセット" , type:"form"  ,width:150,css:"bt_2",height:50,
        	click:function(){
            	LU0020_main_type = "ランチセット";
            	$$("LunchView_menu_text").setValue(LU0020_main_type);
            	$$("PastaView_menu_text").setValue("");
            	$$("PizaView_menu_text").setValue("");
            	if(!check_username()) return;
            	$$("tabbar").showOption("SetView");
            	$$("tabbar").hideOption("LunchView");
         	}
       	},
     ]},
     { margin:5, cols:[
     	{ view:"button", label:"ピザセット" , type:"form"  ,width:150,css:"bt_3",height:50,
        	click:function(){
            	LU0020_main_type = "ピザセット";
            	$$("LunchView_menu_text").setValue(LU0020_main_type);
            	$$("PastaView_menu_text").setValue("");
            	$$("SetView_menu_text").setValue("");
            	if(!check_username()) return;
            	$$("tabbar").showOption("PizaView");
            	$$("tabbar").hideOption("LunchView");
        	}
        },
     ]},
     { margin:5, cols:[
     	{ view:"button", label:"欠席" , type:"form"  ,width:150,css:"bt_5",height:50,
        	click:function(){
            	LU0020_main_type = "欠席";
            	$$("LunchView_menu_text").setValue(LU0020_main_type);
            	$$("PastaView_menu_text").setValue("");
            	$$("SetView_menu_text").setValue("");
            	$$("PizaView_menu_text").setValue("");
            	$$("DrinkView_menu_text").setValue("");
            	$$("DrinkView_drink_text").setValue("");

  	            LU0020_drink_menu = "";
                $$("check_main_text").setValue("欠席");
    			$$("check_drink_text").setValue("");
            	LU0020_main_plice = 0;
            	LU0020_option1_plice = 0;
            	LU0020_total_plice = 0;
                $$("check_plice").setValue(LU0020_total_plice);
            	if(!check_username()) return;
                $$("check_username").setValue(LU0020_username);

            	$$("tabbar").showOption("CheckView");
            	$$("tabbar").hideOption("LunchView");
        	}
        },
     ]},
     { margin:5, cols:[
     	{ view:"button", label:"閉じる" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
				location.href = 'https://www.google.com/?hl=ja';
			}
       	},
     	{ view:"button", label:"次へ" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
				if(LU0020_main_type != ""){
					if(LU0020_main_type == "パスタセット"){
          				$$("tabbar").showOption("PastaView");
					}
          			else if(LU0020_main_type == "ランチセット"){
          				$("tabbar").showOption("SetView");
					}
          			else if(LU0020_main_type == "ピザセット"){
          				$$("tabbar").showOption("PizaView");
					}
          			else if(LU0020_main_type == "欠席"){
          				$$("tabbar").showOption("CheckView");
					}
          			$$("tabbar").hideOption("LunchView"); 
				}
				else{
          			webix.alert("セットの指定を先にしてください。");
          			return;
				}
			}
       	}
     ]}
];

var PastaView_element =[
	{ cols:[
        { view:"label",value:"" ,width:350,id:"PastaView_menu_text",name:"PastaView_menu_text"},
    ]},
    { margin:5, cols:[
    	{ view:"label", label:"以下の6つの中から選択してください"  ,width:300,css:"mainLabel" },
    ]},
    { margin:5, cols:[
    	{ view:"checkbox",  id:"option1",  labelRight:"大盛り希望+250円ならチェックしてください",  value:0,css:"subLabel",labelWidth:20 }
    ]},
    { margin:5, cols:[
        { view:"button", label:"ベーコンとモッチャレラのトマトソース" ,width:300,css:"bt_pasuta",height:50,
         	click:function(){
         		LU0020_main_plice = 1500;
				set_lauch_and_next_drink("PastaView","DrinkView","ベーコンとモッチャレラのトマトソース");
         	}
       	},
    ]},
    { margin:5, cols:[
    	{ view:"button", label:"バジルソース" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1500;
           		set_lauch_and_next_drink("PastaView","DrinkView","バジルソース");
         	}
       	},
     ]},
     { margin:5, cols:[
      	{ view:"button", label:"ナポリタン温玉添え" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1460;
           		set_lauch_and_next_drink("PastaView","DrinkView","ナポリタン温玉添え");
         	}
        },
      ]},
     { margin:5, cols:[
        { view:"button", label:"ミートソース" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1560;
           		set_lauch_and_next_drink("PastaView","DrinkView","ミートソース");
        	}
        },
     ]},
     { margin:5, cols:[
     	{ view:"button", label:"明太子のクリームソース" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1500;
           		set_lauch_and_next_drink("PastaView","DrinkView","明太子のクリームソース");
         	}
        },
     ]},
      { margin:5, cols:[
      	{ view:"button", label:"カルボナーラ" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1600;
           		set_lauch_and_next_drink("PastaView","DrinkView","カルボナーラ");
         	}
        },
      ]},
      { margin:5, cols:[
      	{ view:"button", label:"戻る" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
          		$$("tabbar").showOption("LunchView");
          		$$("tabbar").hideOption("PastaView");
         	}
       	},
      	{ view:"button", label:"次へ" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
        		if(LU0020_lunch_menu != ""){
          			$$("tabbar").showOption("DrinkView");
          			$$("tabbar").hideOption("PastaView");
          		}
          		else{
          			webix.alert("パスタの指定を先にしてください。");
          			return;
          		}
         	}
       	},
      ]}
];

var SetView_element =[
	{ cols:[
        { view:"label",value:"" ,width:350,id:"SetView_menu_text",name:"SetView_menu_text"},
    ]},
    { margin:5, cols:[
    	{ view:"label", label:"以下の4つの中から選択してください"  ,width:300,css:"mainLabel" },
    ]},
    { margin:5, cols:[
    	{ view:"label", label:"パンかライスも選択してください"  ,width:300,css:"red" },
    ]},
    { margin:5, cols:[
    	 { view: "switch", onLabel: "パン", offLabel:"ライス", value: 0  ,id:"option2" , label:"パン/ライス",labelWidth:80},
    ]},
    { margin:5, cols:[
        { view:"button", label:"ハンバーグおろし和風ソース" ,width:300,css:"bt_pasuta",height:50,
         	click:function(){
         		LU0020_main_plice = 1450;
				set_lauch_for_setmenu_and_next_drink("SetView","DrinkView","ハンバーグおろし和風ソース");
         	}
       	},       
    ]},
    { margin:5, cols:[
    	{ view:"button", label:"ダブルハンバーグ" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1600;
           		set_lauch_for_setmenu_and_next_drink("SetView","DrinkView","ダブルハンバーグ");
         	}
       	},
     ]},
     { margin:5, cols:[
     	{ view:"button", label:"網焼きサーロインステーキ90g" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 2000;
           		set_lauch_for_setmenu_and_next_drink("SetView","DrinkView","サーロインステーキ90g");
         	}
        },
     ]},
     { margin:5, cols:[
        { view:"button", label:"牛肉の赤ワイン煮込み" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1800;
           		set_lauch_for_setmenu_and_next_drink("SetView","DrinkView","牛肉の赤ワイン煮込み");
         	}
        },
      ]},

      { margin:5, cols:[
      	{ view:"button", label:"戻る" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
          		$$("tabbar").showOption("LunchView");
          		$$("tabbar").hideOption("SetView");
         	}
       	},
       	{ view:"button", label:"次へ" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
        		if(LU0020_lunch_menu != ""){
          			$$("tabbar").showOption("DrinkView");
          			$$("tabbar").hideOption("SetView");
          		}
          		else{
          			webix.alert("セットの指定を先にしてください。");
          			return;
          		}
         	}
       	},
     ]}
];


var PizaView_element =[
	{ cols:[
        { view:"label",value:"" ,width:350,id:"PizaView_menu_text",name:"PizaView_menu_text"},
    ]},
    { margin:5, cols:[
    	{ view:"label", label:"以下の2つの中から選択してください"  ,width:300,css:"mainLabel" },
    ]},
    { margin:5, cols:[
        { view:"button", label:"マルゲリータ" ,width:300,css:"bt_pasuta",height:50,
         	click:function(){
         		LU0020_main_plice = 1300;
				LU0020_option1_plice = 0;
				set_lauch_for_piza_and_next_drink("PizaView","DrinkView","マルゲリータ");
         	}
       	},       
    ]},
    { margin:5, cols:[
    	{ view:"button", label:"3種チーズピザ" , type:"form"  ,width:300,css:"bt_pasuta",height:50,
        	click:function(){
         		LU0020_main_plice = 1300;
				LU0020_option1_plice = 0;
				set_lauch_for_piza_and_next_drink("PizaView","DrinkView","3種チーズピザ");
         	}
       	},
     ]},
      { margin:5, cols:[
      	{ view:"button", label:"戻る" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
          		$$("tabbar").showOption("LunchView");
          		$$("tabbar").hideOption("PizaView");
         	}
       	},
       	{ view:"button", label:"次へ" ,width:150,height:50,css:"bt_4",height:50,
        	click:function(){
        		if(LU0020_lunch_menu != ""){
          			$$("tabbar").showOption("DrinkView");
          			$$("tabbar").hideOption("PizaView");
          		}
          		else{
          			webix.alert("ピザの指定を先にしてください。");
          			return;
          		}
         	}
       	},
      ]}
];

var DrinkView_element =[
	{ cols:[
        { view:"label",value:"" ,width:350,id:"DrinkView_menu_text",name:"DrinkView_menu_text"},
    ]},
	{ cols:[
        { view:"label",value:"" ,width:350,id:"DrinkView_drink_text",name:"DrinkView_drink_text"},
    ]},
    { margin:5, cols:[
    	{ view:"label", label:"以下の7個の中から選択してください"  ,width:300,css:"mainLabel" },
    ]},
    { margin:5, cols:[
    	{ view:"button", label:"コーヒ" , type:"form"  ,width:300,css:"bt_drinkh",height:30,
       		click:function(){
       			set_drink_and_next_last_check("コーヒ");
       		}
     	},
    ]},
    { margin:5, cols:[
    	{ view:"button", label:"アイスコーヒ" , type:"form"  ,width:300,css:"bt_drink",height:30,
       		click:function(){
       			set_drink_and_next_last_check("アイスコーヒ");
       		}
     	},
    ]},
    { margin:5, cols:[
      	{ view:"button", label:"紅茶" , type:"form"  ,width:300,css:"bt_drinkh",height:30,
       		click:function(){
       			set_drink_and_next_last_check("紅茶");
      		}
      	},
    ]},
    { margin:5, cols:[
      	{ view:"button", label:"アイスティー" , type:"form"  ,width:300,css:"bt_drink",height:30,
       		click:function(){
       			set_drink_and_next_last_check("アイスティー");
       		}
      	},
    ]},
    { margin:5, cols:[
      	{ view:"button", label:"オレンジジュース" , type:"form"  ,width:300,css:"bt_drink",height:30,
       		click:function(){
       			set_drink_and_next_last_check("オレンジジュース");
       		}
      	},
    ]},
    { margin:5, cols:[
      	{ view:"button", label:"ウーロン茶" , type:"form"  ,width:300,css:"bt_drink",height:30,
       		click:function(){
       			set_drink_and_next_last_check("ウーロン茶");
       		}
      	},
    ]},
    { margin:5, cols:[
      	{ view:"button", label:"スープ" , type:"form"  ,width:300,css:"bt_drinkh",height:30,
       		click:function(){
       			set_drink_and_next_last_check("スープ");
       		}
      	},
    ]},
    { margin:5, cols:[
     	{ view:"button", label:"戻る" ,width:150,height:30,css:"bt_4",height:30,
       		click:function(){
          		$$("tabbar").showOption( LU0020_back_view_id);
          		$$("tabbar").hideOption("DrinkView");          
       		}
     	},
     	{ view:"button", label:"次へ" ,width:150,height:30,css:"bt_4",height:30,
       		click:function(){
       			if(LU0020_drink_menu != ""){
          			$$("tabbar").showOption("CheckView");
          			$$("tabbar").hideOption("DrinkView");
          		}
          		else{
          			webix.alert("ドリンクの指定を先にしてください。");
          			return;
          		}
       		}
     	},
    ]},
];
     
var CheckView_element =[
	{ margin:5, cols:[
    	{ view:"label", label:"開催日:"+LU0020_meeting_date+" "+LU0020_meeting_starttime+"~ 場所:"+LU0020_meeting_place  ,width:300,css:"mainLabel"},
     ]},
	{ margin:5, cols:[
    	{ view:"select", label:"参加者",options:LU0020_username_array,id:"username",name:"username",value:"",css:"mainLabel",width:200,labelWidth:80,id:"check_username",readonly:true},
    ]},
	{ cols:[
        { view:"label",value:"" ,width:350,id:"check_main_text",name:"check_main_text"},
    ]},
	{ cols:[
        { view:"label",value:"" ,width:350,id:"check_drink_text",name:"check_drink_text"},
    ]},
	{ cols:[
        { view:"text",label:"金額(税込)",value:"" ,width:200,labelWidth:80,id:"check_plice",name:"check_plice",inputAlign:"right"},
    ]},
    { margin:5, cols:[
     	{ view:"button", label:"登録" ,width:100,height:30,css:"webix_danger",height:30,
       		click:function(){
 				var formData = new FormData();
				var access_key = Get_AccessKey();
				formData.append("userid","admin");
				formData.append("job_info","LU0020");
				formData.append("dateinfo",moment(LU0020_meeting_date).format("YYYY-MM-DD"));
				formData.append("subject",LU0020_meeting_subject);
				formData.append("username",LU0020_username);
				formData.append("main_type",LU0020_main_type);
				formData.append("lunch_menu",LU0020_lunch_menu);
				formData.append("drink_menu",LU0020_drink_menu);
				formData.append("main_plice",LU0020_main_plice);
				formData.append("option1_plice",LU0020_option1_plice);
				formData.append("total_plice",LU0020_total_plice);
  				var xhr =webix.ajax().sync().post("<?php  echo SUB_FOLDER; ?>/rest_api/LU0020/LU0021_meeting_entry_action.php",formData);
				var resp =  JSON.parse(xhr.responseText);
				if(resp.resp =="ok"){
				    $$("entry_check").enable();
					webix.message({type:"success",text:"登録しました。"});
				}
				else{
					webix.message({type:"error",text:"登録処理でエラー発生 error code ="+resp.error_code});
				}
       		}
     	},
     	{ view:"button", label:"戻る" ,width:100,height:30,css:"bt_4",height:30,
       		click:function(){
       			if($$("check_main_text").getValue() == "欠席"){
       				//欠席
          			$$("tabbar").showOption("LunchView");
          			$$("tabbar").hideOption("CheckView");
       			}
       			else{
          			$$("tabbar").showOption("DrinkView");
          			$$("tabbar").hideOption("CheckView");
          		}         
       		}
     	},
     	{ view:"button", label:"閉じる" ,width:100,height:30,css:"webix_primary",height:30,
       		click:function(){
			    webix.confirm({
  			    	title:"確認",
  			    	ok:"はい", 
   			    	cancel:"いいえ",
 			    	text: "登録操作をしていないと、<br>選択した情報は、<br>保存されません。<br>操作を中断して画面を<br>閉じますか?",
 			    })
			    .then(function(result){
			    	location.href = 'https://www.google.com/?hl=ja';
			    })
			    .fail(function(){
			    	webix.message({type:"debug",text:"操作を継続できます。"});
			    });
       		}
     	},
     ]},
    { margin:5, cols:[
     	{ view:"button", label:"登録確認" ,width:100,height:30,css:"webix_primary",height:30,id:"entry_check",
       		click:function(){
        		var send_prm = {};
        		send_prm.userid = "admin";
				var username = $$("username").getValue();
        		send_prm.username = username;
				webix.send("<?php  echo SUB_FOLDER; ?>/view/LU0030/LU0030_smd_meeting_lists.php",send_prm,"GET");
       		}
     	},
    ]},



];


webix.ui({
  type:"space", width:380,
  rows:[
    { type:"clean",
      rows:[
        {
          borderless:true, view:"tabbar", id:"tabbar", value:"LunchView", multiview:true, options:[
            { value:'ランチ', id:'LunchView'},
            { value:'パスタ', id:'PastaView'},
            { value:'セット', id:'SetView'},
            { value:'ピザ'  , id:'PizaView'},
            { value:'ドリンク', id:'DrinkView'},
            { value:'確認'  , id:'CheckView'},
          ]
        },
        {cells:[
            {id:"LunchView",
             view:"form",
     		 width:380,
     		 height:600,
             elements:LunchView_element
            },
			{id:"PastaView",  
  	 		view:"form",
     		width:380,
     		height:700,
  	 		elements:PastaView_element
  	 		},
  	 		{id:"SetView",  
  	 		view:"form",
     		width:380,
     		height:600,
  	 		elements:SetView_element
  	 		},
  	 		{id:"PizaView",  
  	 		view:"form",
     		width:380,
     		height:600,
  	 		elements:PizaView_element
  	 		},
  	 		{id:"DrinkView",  
  	 		view:"form",
     		width:380,
     		height:700,
  	 		elements:DrinkView_element
  	 		},
  	 		{id:"CheckView",  
  	 		view:"form",
     		width:380,
     		height:600,
  	 		elements:CheckView_element
  	 		},
        ]
        }
     ]
    }
  ]
});

//$$("PastaView").bind($$("MainView"));


 $$("tabbar").hideOption("PastaView");
 $$("tabbar").hideOption("SetView");
 $$("tabbar").hideOption("PizaView");
 $$("tabbar").hideOption("DrinkView");
 $$("tabbar").hideOption("CheckView");
 if(username !=""){
 	$$("username").setValue(username);
 }
 if(LU0020_lunch_menu == ""){
 	$$("entry_check").disable();
 }
</script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか?