ionicを試す １６日目のソースコード
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<table class="table" border="1">
<tr>
<th>取消</th>
<th>オーダー</th>
<th>注文</th>
<th>メニュー</th>
</tr>
<tr *ngFor="let entry of Menu; index as index; first as first; ">
<td><ion-checkbox [id]="'chkOrder' + index" *ngIf="ForTable[index]!=''" (mousedown)="fnChangeOrderCheck(index, $event)"></ion-checkbox></td>
<td>{{ForTable[index]}}</td>
<td><ion-checkbox [id]="'chkMenu' + index" (click)="fnChangeMenuCheck(index)"></ion-checkbox></td>
<td>{{entry.val}}</td>
</tr>
</table>
Order配列の要素数：{{Order.length}}
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
//メニュー配列
public Menu = [
{ val: 'ナポリ風', category_id: '00', category_name: '生地', sub_id: '01' },
{ val: 'クリスピー', category_id: '00', category_name: '生地', sub_id: '02' },
{ val: 'アメリカン', category_id: '00', category_name: '生地', sub_id: '03' },
{ val: 'トマトソース', category_id: '01', category_name: 'ソース', sub_id: '01' },
{ val: 'ホワイトソース', category_id: '01', category_name: 'ソース', sub_id: '02' },
{ val: 'バジルソース', category_id: '01', category_name: 'ソース', sub_id: '03' },
{ val: 'ソースレス', category_id: '01', category_name: 'ソース', sub_id: '04' },
{ val: 'ペパロニ', category_id: '02', category_name: 'トッピング', sub_id: '001' },
{ val: 'オニオン', category_id: '02', category_name: 'トッピング', sub_id: '002' },
{ val: 'トマト', category_id: '02', category_name: 'トッピング', sub_id: '003' },
{ val: '照り焼きチキン', category_id: '02', category_name: 'トッピング', sub_id: '004' },
{ val: 'ダブルチーズ', category_id: '02', category_name: 'トッピング', sub_id: '005' },
{ val: 'コーラ', category_id: '03', category_name: 'サイドメニュー', sub_id: '001' },
{ val: 'ウーロン茶', category_id: '03', category_name: 'サイドメニュー', sub_id: '002' },
{ val: 'サラダ', category_id: '03', category_name: 'サイドメニュー', sub_id: '003' },
{ val: 'ポテト', category_id: '03', category_name: 'サイドメニュー', sub_id: '004' },
{ val: 'アイス', category_id: '03', category_name: 'サイドメニュー', sub_id: '005' }
];
//オーダー配列(初期状態は空)
public Order = [
];
//表示用配列
ForTable = [];
//表示用index配列(注文取消時にオーダー配列へアクセスするために必要）
ForTableIndex = [];
//コンストラクター
constructor(){
//表示用配列と表示用index配列の初期化
this.fnInitForTable();
}
//表示用配列作成・初期化
fnInitForTable(){
//配列長をメニュー配列と揃える。
this.ForTable.length = this.Menu.length;
this.ForTableIndex.length = this.Menu.length;
//""および-1で埋める
this.ForTable.fill("");
this.ForTableIndex.fill(-1);
}
//表示用配列変更(オーダー配列はソート済みであること)
fnChangeDisplaeyArray(){
//表示用配列初期化
this.fnInitForTable();
//配列をグループ化するための関数定義
const groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
//オーダー配列をカテゴリーIDでグルーピング
const OrderGroupBy = groupBy(this.Order, 'category_id');
//表示用配列に現在までセットした数
let cntSet = 0;
for(let i=0; i<Object.keys(OrderGroupBy).length;i++){
//オーダー配列のカテゴリーと同じカテゴリーを持つメニュー配列のインデックスを求める
let tmpObj = OrderGroupBy[Object.keys(OrderGroupBy)[i]];
let intExistIndex = this.Menu.findIndex((u) => u.category_id === Object.keys(OrderGroupBy)[i]);
for(let j=0; j<tmpObj.length;j++){ //tmpObjは複数のアイテムを持つ可能性があるex.トマト、ダブルチーズなどなど
this.ForTable[intExistIndex + j]=tmpObj[j].val;
//オーダー配列のインデックスを退避
this.ForTableIndex[intExistIndex + j]=cntSet;
cntSet++;
}
}
}
//メニュー配列チェック
fnChangeMenuCheck(index:number){
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Menu[index]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、Order配列に存在するかを調べる。
const intExistIndex = this.Order.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
let el = document.getElementById('chkMenu'+index) as HTMLInputElement;
//この時点ではチェックボックスの変更反映していない(すなわち真偽が逆)
if(!el.checked){
//チェックがついていて、そのアイテムがOrder配列に無ければ追加する
if(intExistIndex == -1){
//ただしtmpObjのcategory_idが'00'あるいは'01'の場合は同じcategory_idのアイテムを追加してはいけない
if(tmpObj.category_id == '00' || tmpObj.category_id == '01'){
//tmpObjのcategory_idが、Order配列に存在するかを調べる。
const intExistIndex2 = this.Order.findIndex((u) => (u.category_id)=== (tmpObj.category_id));
if(intExistIndex2!=-1){
el.checked = true;
alert(this.Menu[index].category_name + "は、一つしか選べません");
return;
}
}
//そのオブジェクトをOrder配列の末尾に追加
this.Order.push(tmpObj);
//配列をソート
this.Order.sort(function(a,b){
if((a.category_id+a.sub_id)<(b.category_id+b.sub_id))return -1;
if((a.category_id+a.sub_id)>(b.category_id+b.sub_id))return 1;
return 0;
});
}
}else{
//チェックが外され、そのアイテムがOrder配列にあれば削除
if(intExistIndex != -1){
this.Order.splice(intExistIndex,1);
}
}
this.fnChangeDisplaeyArray();
}
//オーダー取消
fnChangeOrderCheck(index:number, $event:Event){
//indexをオーダー配列のインデックスに変換（このindexは表示用配列のindexなので）
let OrderIndex = this.ForTableIndex[index];
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Order[OrderIndex]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、Menu配列に存在するかを調べる。
const intExistIndex = this.Menu.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
let elMenu = document.getElementById('chkMenu'+intExistIndex) as HTMLInputElement;
elMenu.checked = false;
this.Order.splice(OrderIndex,1);
this.fnChangeDisplaeyArray();
//チェックボックスをクリックしたので、そのままだとチェックがつく。あらかじめつけておけばチェックが外れる
let elOrder = document.getElementById('chkOrder'+(index)) as HTMLInputElement;
elOrder.checked = true;
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 2o0px;
line-height: 1.5;
color: black;
margin: 0;
}
#container a {
text-decoration: none;
}
---------------------------------------------------------------
