airport-chengdu-web/src/app/pages/main/main.component.ts

import { Component, OnInit } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

import { ToastService } from '../../components/toast/toast.service';
import { ToastConfig, ToastType } from '../../components/toast/toast-model';

import { HttpClientService } from '../../services/http-client.service';
import { BasicDataService } from '../basic-data-service';
import { OperateSpinServiceService } from '../operate-spin-service.service';
import { WebsocketService } from '../../services/websocket.service';

import { DynamicFlightOrder } from './utils/dynamic-flight-order';
import { FlightsDataHandle } from './utils/flights-data-handle';

import * as $ from 'jquery';
@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

    constructor(
        private basicDataService: BasicDataService,
        private operateSpinServiceService: OperateSpinServiceService,
        private httpCilent: HttpClientService,
        private changeDetectorRef: ChangeDetectorRef,
        private toastService: ToastService,
        private websocketService: WebsocketService
    ) {
        this.operateSpinServiceService.showSpin();
        this.changeDetectorRef.detach();
    }
    public orderHandle = new DynamicFlightOrder();
    public dataHandle = new FlightsDataHandle();

    public tabClose: boolean = true;
    public isSpinning: boolean = true;

    //各项基础数据
    public terminals: Array<any>;
    public flightStatus: Array<any>;
    public airports: Array<any>;
    public citys: Array<any>;
    public airlines: Array<any>;

    public raw_data: Array<object> = [];    //原始数据，即航班计划
    public combined_data: Array<object> = [];    //组合数据，即链接航班，显示信息等组合好之后的数据
    public render_data: Array<object> = [];  //显示数据，即需要显示的数据

    public col_lists: Array<object>;    //列数据
    public airline_color: Array<object> = [];
    public row_state: any = { renderFlight: {} };

    public checkboxGroup = {
        'related': false,
        'detail': false,
        'vip': false,
        'special': false,
        'guarantee': false
    }

    ngOnInit() {
        //订阅航班更新
        this.websocketService.dynamicsMessage().subscribe(
            event => {
                console.log(JSON.parse(event['data']));
                // let index = this.raw_data.findIndex(val => val['FLID'] === event['FLID']);
                // if (index > -1) {
                //     this.raw_data[index] = event;
                // } else {
                //     this.raw_data.push(event)
                // }
            }
        )

        /* 获取显示列 */
        this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
            data => {
                data.sort(function (a, b) {
                    return (a['COL_ORDER'] - b['COL_ORDER']);
                })
                this.col_lists = data;
            }
        )
        /* 获取航班动态信息 */
        this.httpCilent.get('/msgexchangeapi/all/flights').subscribe(
            data => {
                this.raw_data = data.body;

                //查找链接航班并将其组合成一条数据
                let combined_linked_data = this.dataHandle.findLinkFlights(data.body);
                combined_linked_data.forEach(element => {
                    let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
                    this.combined_data.push(flights_item);
                });

                //从基础数据服务中拿出部分基础数据
                this.terminals = this.basicDataService.terminal;
                this.flightStatus = this.basicDataService.flightStatus;
                this.airlines = this.basicDataService.airline;
                this.citys = this.basicDataService.city;
                this.airports = this.basicDataService.airport;

                if (this.airports && this.airports.length > 0) {
                    this.combined_data = this.dataHandle.basicDataTransHandle(this.combined_data, this.airports, this.citys, this.airlines, this.flightStatus);
                    this.doSequence(this.combined_data);
                } else {
                    this.basicDataService.terminal_subject.subscribe(
                        val => this.terminals = val
                    )
                    this.basicDataService.flightStatus_subject.subscribe(
                        val => this.flightStatus = val
                    );
                    this.basicDataService.airline_subject.subscribe(
                        val => this.airlines = val
                    );
                    this.basicDataService.city_subject.subscribe(
                        val => this.citys = val
                    );
                    this.basicDataService.airport_subject.subscribe(
                        val => {
                            this.airports = val;
                            this.combined_data = this.dataHandle.basicDataTransHandle(this.combined_data, this.airports, this.citys, this.airlines, this.flightStatus);
                            this.doSequence(this.combined_data);
                        }
                    );
                }
            }
        )

        /**
         * 固定表头
         */
        var tableCont = document.querySelector('#table-container')
        function scrollHandle() {
            var scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }
        tableCont.addEventListener('scroll', scrollHandle)
    }

    /**
     * 执行排序并渲染
     */
    doSequence(sequenceData) {
        sequenceData.forEach(element => {
            element['ORDER'] = this.orderHandle.sequence(element);
        })
        sequenceData.sort(function (a, b) {
            return (a['ORDER'] - b['ORDER']);
        })
        this.render_data = sequenceData;
        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
        this.changeDetectorRef.detectChanges();
        this.operateSpinServiceService.hideSpin()
    }

    /**
     * 刷新
     */
    refresh() {
        this.render_data.reverse();
        this.changeDetectorRef.detectChanges();
    }


    /**
     * 过滤及定位
     * @param filterItems
     * @return
     */
    SEARCH = '';    //手动输入条件
    FLT_POS = 1;    //过滤还是定位
    SEL_COL = '';   //选择列名
    public filterItems = {
        ALCD: '',    //航空公司
        FLIN: '',    //航线类别
        FLTY: '',    //航班类别
        MVIN: '',    //到达/出发
        FTSS: '',
        TRML: '',    //航站楼
        FHAG: '',    //机坪代理
        MHAG: '',    //维护代理
        PHAG: '',    //旅客代理
    }

    /**
     * 输入框回车事件
     */
    inputEnter() {
        if (this.FLT_POS === 1) {
            this.selectChange()
        } else {
            // this.selectChange()
            this.inputPosition(this.render_data)
        }
    }

    /**
     * 下拉框选择筛选
     */
    selectChange() {
        this.operateSpinServiceService.showSpin();
        setTimeout(() => {
            let filter_data = [];
            let filterItems = this.filterItems;
            this.combined_data.forEach(item => {
                filter_data.push(Object.assign({}, item));
            })
            //下拉框筛选
            filter_data = filter_data.filter(item => {
                if (this.orderHandle.isArriFlight(item)) {
                    let is_satis = true;
                    for (const key in filterItems) {
                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
                            if (item['preFlight'][key] === filterItems[key]) {
                                is_satis = true;
                                continue;
                            } else {
                                is_satis = false;
                                break;
                            }
                        }
                    }
                    return is_satis;
                } else if (this.orderHandle.isDeptFlight(item)) {
                    let is_satis = true;
                    for (const key in filterItems) {
                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
                            if (item['reaFlight'][key] === filterItems[key]) {
                                is_satis = true;
                                continue;
                            } else {
                                is_satis = false;
                                break;
                            }
                        }
                    }
                    return is_satis;
                } else {
                    let pre_satis = true;
                    let rea_satis = true;
                    for (const key in filterItems) {
                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
                            if (item['preFlight'][key] === filterItems[key]) {
                                pre_satis = true;
                                continue;
                            } else {
                                pre_satis = false;
                                break;
                            }
                        }
                    }
                    for (const key in filterItems) {
                        if (filterItems.hasOwnProperty(key) && filterItems[key]) {
                            if (item['reaFlight'][key] === filterItems[key]) {
                                rea_satis = true;
                                continue;
                            } else {
                                rea_satis = false;
                                break;
                            }
                        }
                    }

                    if (pre_satis && !rea_satis) {
                        item['renderFlight'] = item['renderPreFlight'];
                        return pre_satis;
                    } else if (!pre_satis && rea_satis) {
                        item['renderFlight'] = item['renderReaFlight'];
                        return rea_satis;
                    } else if (pre_satis && rea_satis) {
                        return pre_satis && rea_satis;
                    } else {
                        return false;
                    }
                }
            })
            if (this.FLT_POS === 1) {
                this.inputFilter(filter_data);
            } else {
                this.render_data = filter_data;
                this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
                this.changeDetectorRef.detectChanges();
            }
        }, 10)
    }

    /**
     * 输入框筛选
     * @param filterData 
     */
    inputFilter(filterData) {
        if (this.SEARCH) {
            if (this.SEL_COL) {
                let sel_col = this.SEL_COL;
                filterData = filterData.filter(item => {
                    if (item['renderFlight'][sel_col]) {
                        if (item['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
                            return true;
                        }
                    } else {
                        if (this.SEARCH) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                })

            } else {
                filterData = filterData.filter(item => {
                    let is_satis = false;
                    for (const key in item['renderFlight']) {
                        if (item['renderFlight'].hasOwnProperty(key)) {
                            if (item['renderFlight'][key]) {
                                if (item['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
                                    is_satis = true;
                                    break;
                                } else {
                                    is_satis = false;
                                    continue;
                                }
                            } else {
                                if (this.SEARCH) {
                                    is_satis = false;
                                    continue;
                                } else {
                                    is_satis = true;
                                    break;
                                }
                            }
                        } else {
                            continue;
                        }
                    }
                    return is_satis;
                })
            }
        }
        this.render_data = filterData;
        this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
        this.changeDetectorRef.detectChanges();
        this.operateSpinServiceService.hideSpin()
    }

    /**
     * 输入框定位
     */
    positionArray: Array<any> = [];
    positionArrayIndex: number = 0;

    inputPosition(filterData) {
        let transArray = []
        if (this.SEL_COL) {
            let sel_col = this.SEL_COL;
            filterData.forEach(element => {
                if (element['renderFlight'][sel_col]) {
                    if (element['renderFlight'][sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
                        transArray.push(element)
                    }
                } else {
                    if (!this.SEARCH) {
                        transArray.push(element)
                    }
                }
            });
        } else {
            filterData.forEach(element => {
                for (const key in element['renderFlight']) {
                    if (element['renderFlight'].hasOwnProperty(key)) {
                        if (element['renderFlight'][key]) {
                            if (element['renderFlight'][key].toString().match(new RegExp(this.SEARCH, 'i'))) {
                                transArray.push(element)
                                break;
                            } else {
                                continue;
                            }
                        } else {
                            if (this.SEARCH) {
                                continue;
                            } else {
                                transArray.push(element)
                                break;
                            }
                        }

                    } else {
                        continue;
                    }
                }
            });
        }

        if (transArray.length > 0) {
            if (transArray.toString() == this.positionArray.toString()) {
                this.positionArrayIndex++;
                if (this.positionArrayIndex === this.positionArray.length) {
                    this.positionArrayIndex = 0;
                }
                this.row_state = this.positionArray[this.positionArrayIndex];
            } else {
                this.positionArray = transArray;
                this.positionArrayIndex = 0;
                this.row_state = this.positionArray[this.positionArrayIndex];
            }
        } else {
            alert('没有搜索到相关数据');
        }

        this.changeDetectorRef.detectChanges();

        let tr = $(".selected");
        let objTr = tr[0];
        $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
    }

    /**
     * 选中某行
     * @param i 
     */
    selectRow(i) {
        this.row_state = i;
        this.changeDetectorRef.detectChanges();
    }

    /**
     * 获取当前单元格颜色
     * @param col_CODE 
     */
    getColor(col_CODE, flight) {
        if (this.orderHandle.isArriFlight(flight)) {
            if (col_CODE === 'SODT') {
                if (flight['preFlight']['SODT']) {
                    if (!flight['preFlight']['ESTT'] && !flight['preFlight']['ACTT']) {
                        return 'rgb(0,255,255)';
                    } else {
                        return null;
                    }
                } else {
                    return null;
                }
            } else if (col_CODE === 'ESTT') {
                if (flight['preFlight']['ESTT']) {
                    if (!flight['preFlight']['ACTT']) {
                        return 'rgb(255,207,156)';
                    } else {
                        return null;
                    }
                } else {
                    return null;
                }
            } else if (col_CODE === 'ACTT') {
                if (flight['preFlight']['ACTT']) {
                    return 'rgb(148,207,255)';
                } else {
                    return null;
                }
            } else {
                return null;
            }

        } else {
            if (col_CODE === 'SODT') {
                if (flight['reaFlight']['SODT']) {
                    if (!flight['reaFlight']['ESTT'] && !flight['reaFlight']['ACTT']) {
                        return 'rgb(0,255,255)';
                    } else {
                        return null;
                    }
                } else {
                    return null;
                }
            } else if (col_CODE === 'ESTT') {
                if (flight['reaFlight']['ESTT']) {
                    if (!flight['reaFlight']['ACTT']) {
                        return 'rgb(255,207,156)';
                    } else {
                        return null;
                    }
                } else {
                    return null;
                }
            } else if (col_CODE === 'ACTT') {
                if (flight['reaFlight']['ACTT']) {
                    return 'rgb(148,207,255)';
                } else {
                    return null;
                }
            } else {
                return null;
            }
        }
    }

    /**
     * 单元格内容居左居右
     * @param col_CODE
     * @param flight 
     */
    getPosition(col_CODE, flight) {
        if (this.orderHandle.isDeptFlight(flight)) {
            if (col_CODE === 'FLNO' || col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') {
                return 'text-right';
            }
        } else if (this.orderHandle.isLinked(flight)) {
            if (col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') {
                if (!flight['renderPreFlight'][col_CODE] && flight['renderReaFlight'][col_CODE]) {
                    return 'text-right';
                }
            }
        }

    }

    /**
     * 复选框勾选事件
     */
    checkboxChange() {
        for (const key in this.checkboxGroup) {
            if (this.checkboxGroup.hasOwnProperty(key)) {
                if (this.checkboxGroup[key]) {
                    this.tabClose = false;
                    break;
                } else {
                    this.tabClose = true;
                    continue;
                }
            }
        }
        this.changeDetectorRef.detectChanges()
    }

    /**
     * tab项切换事件
     */
    nzClick() {
        this.changeDetectorRef.detectChanges();
    }

}