BIM-Monitor/script/js/global.js

var bimSupport = "BIM資源網";
var pageHeader = "";
var list = new Array();
var objectFilter = [];
var usageFilter = [];
var listObj = new Object();
var table = [];

const vm = Vue.createApp({
    data() {
        return {
            banner: bimSupport,
            pageHeader: pageHeader,
            list: list,
            table: table,
        }
    }
});
vm.component('side-bar-home', {
    data() {
        return {
            sites: sites,
        }
    },
    template: `<aside id="sidebar-left" class="sidebar-left">
                    <div class="sidebar-header">
                        <div class="sidebar-title"> 導覽 </div>
                        <div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
                    </div>
                    <div class="nano">
                        <div class="nano-content">
                            <nav id="menu" class="nav-main" role="navigation">
                                <ul class="nav nav-main">
                                    <li>
                                        <a href="/BIM-Monitor/home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
                                    </li>

                                    <li class="nav-parent nav-active nav-expanded">
                                        <a>
                                            <i class="fa fa-desktop" aria-hidden="true"></i>
                                            <span>BIM監測查詢網</span>
                                        </a>
                                        <ul class="nav nav-children">
                                            <li class="nav-parent nav-active nav-expanded">
                                                <a>
                                                    <span>C3工地監測儀器</span>
                                                </a>
                                                <ul class="nav nav-children">
                                                    <monitor-li v-for="monitor in sites['c3']" :id='monitor.code' :name='monitor.name'></monitor-li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </aside>`
});


vm.component('upload-csv', {
    template: `<li>
                    <a href="#modalForm" class="modal-with-form"> <i class="fa fa-upload" aria-hidden="true"></i> <span>上傳CSV</span> </a>
                    <!-- Modal Form -->
                    <div id="modalForm" class="modal-block modal-block-primary mfp-hide">
                        <section class="panel">
                            <header class="panel-heading">
                                <h2 class="panel-title">上傳表單</h2>
                            </header>
                            <div class="panel-body">
                                <form id="CSVform" class="form-horizontal mb-lg" action="./script/php/upload.php" method="post" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">檔案上傳</label>
                                        <div class="col-md-6">
                                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                                <div class="input-append">
                                                    <div class="uneditable-input"> <i class="fa fa-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-default btn-file">
                                                        <span class="fileupload-exists">變更檔案</span> <span class="fileupload-new">選擇檔案</span>
                                                        <input type="file" name="fileToUpload" id="fileToUpload" /> </span> <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <footer class="panel-footer">
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <button class="btn btn-primary modal-confirm" onclick="uploadCSV()">Submit</button>
                                        <button class="btn btn-default modal-dismiss">Cancel</button>
                                    </div>
                                </div>
                            </footer>
                        </section>
                    </div>
                </li>`
});

vm.component('side-bar', {
    data() {
        return {
            sites: sites,
        }
    },
    template: `<aside id="sidebar-left" class="sidebar-left">
    <div class="sidebar-header">
        <div class="sidebar-title"> 導覽 </div>
        <div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
    </div>
    <div class="nano">
        <div class="nano-content">
            <nav id="menu" class="nav-main" role="navigation">
                <ul class="nav nav-main">
                    <li>
                        <a href="/BIM-Monitor/home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
                    </li>
                    <li class="nav-parent nav-active nav-expanded">
                        <a>
                            <i class="fa fa-desktop" aria-hidden="true"></i>
                            <span>BIM監測查詢網</span>
                        </a>
                        <ul class="nav nav-children">
                            <li v-for="(site,key) in sites" :monitor="key" v-bind:class="GetLocation(key)">
                                <a>
                                    <span>{{key}}工地監測儀器</span>
                                </a>
                                <ul class="nav nav-children">
                                    <monitor-li v-for="monitor in site" :id='monitor.code' :name='monitor.name'></monitor-li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</aside>`,
    methods: {
        GetLocation(sitName) {
            var site = window.location.pathname.split('/')[2];
            if (sitName == (site)) {
                return "nav-parent nav-active nav-expanded";
            } else {
                return "nav-parent nav-active";
            }
        }
    }
});

vm.component('monitor-li', {
    template: `<li> <a :href="GetHref(id)" class="monitor" :monitor="id">
                    {{name}}<span :id="id" class="pull-right" data-toggle="tooltip" data-placement="right" title="(異常儀器數量/所有儀器數量)">0</span>
                </a> </li>`,
    props: {
        id: String,
        name: String,
    },
    methods: {
        GetHref(id) {
            return "#"+id;
        }
    }
});




vm.component('header-menu', {
    data() {
        return {
            banner: bimSupport,
            userName: userName,
            role: role,
        }
    },
    template: `<header class="header">
    <div class="logo-container">
        <div class="banner-txt">{{banner}}</div>
        <div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
            <i class="fa fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>
    <!-- start: search & user box -->
    <div class="header-right"> <span class="separator"></span>
    <ul class="notifications">
        <li>
            <a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                <i class="fa fa-bell"></i>
                <span id="warning-count" class="badge">0</span>
            </a>
            <div class="dropdown-menu notification-menu">
                <div class="notification-title">
                    <span id="warning-count2" class="pull-right label label-default">0</span>
                    警告
                </div>
                <div class="content">
                    <ul>
                        <li id="warning-style" style="display: none;">
                            <a href="warning.php" class="clearfix">
                                <div class="image">
                                    <i class="fa fa-warning bg-danger"></i>
                                </div>
                                <span class="title">人員進入危險區域</span>
                                <span class="message">現在</span>
                            </a>
                        </li>
                        <div id="warning-none">No warning</div>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <a href="/BIM-Monitor/upload.php" class="notification-icon" data-toggle="tooltip" title="監測查詢網上傳工具" data-placement="bottom">
                <i class="fa fa-upload"></i>
            </a>
        </li>
        <li>
            <a href="/Front-Page/home.php" class="notification-icon" data-toggle="tooltip" title="綜合登入入口" data-placement="bottom">
                <i class="fa fa-home"></i>
            </a>
        </li>
    </ul><span class="separator"></span>
        <div id="userbox" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture"> <img src="/Common/assets/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="/Common/assets/images/!logged-user.jpg" /> </figure>
                <div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@JSOFT.com"> <span class="name">{{userName}}</span> <span class="role">{{role}}</span> </div> <i class="fa custom-caret"></i>
            </a>
            <div class="dropdown-menu">
                <ul class="list-unstyled">
                    <li class="divider"></li>
                    <li> <a role="menuitem" tabindex="-1" href="/Common/script/php/Logout.php"><i class="fa fa-power-off"></i> Logout</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- end: search & user box -->
</header>`
});

vm.component('inner-menu', {
    template: `<div class="inner-menu-toggle">
<a href="#" class="inner-menu-expand" data-open="inner-menu">
    Show Bar <i class="fa fa-chevron-right"></i>
</a>
</div>

<menu id="content-menu" class="inner-menu" role="menu">
<div class="nano">
    <div class="nano-content">

        <div class="inner-menu-toggle-inside">
            <a href="#" class="inner-menu-collapse">
                <i class="fa fa-chevron-up visible-xs-inline"></i><i class="fa fa-chevron-left hidden-xs-inline"></i> Hide Bar
            </a>
            <a href="#" class="inner-menu-expand" data-open="inner-menu">
                Show Bar <i class="fa fa-chevron-down"></i>
            </a>
        </div>

        <div class="inner-menu-content">
            
            <slot name="inner-upload"></slot>
            <slot name="inner-equipment"></slot>
        </div>
    </div>
</div>
</menu>`
});

vm.component('inner-menu-li', {
    template: `<li>
                  <a v-bind:href="href" v-bind:class = "GetLocation?'menu-item active':'menu-item'"><i class="fa fa-gears"></i>{{name}}</a>            
               </li>`,
    computed: {
        GetLocation() {
            var url_href = window.location.href;
            var url = new URL(url_href);
            var type = url.searchParams.get("type");
            if (type != null) {
                if (this.href.includes(type)) {
                    return true;
                } else {
                    return false;
                }
            }


        }
    },
    props: {
        href: String,
        name: String,
    }
});

vm.component('search-bar', {
    template: `<li style="padding-top: 10px;">
    <div class="input-group input-search" style="table-layout: auto;">
        <input type="search" class="form-control" name="q" id="quicksearch" placeholder="Search...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit" id="searchBtn"><i class="fa fa-search"></i></button>
        </span>
    </div>
</li>`,
});

vm.component('filter-bar', {
    template: `<li class="right">
        <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
            <li>
                <label>Filter:</label>
            </li>
            <li class="active">
                <button id="switch" class="btn btn-default">篩選<span id="caret" class="caret"></span></button>
            </li>
        </ul>
    </li>`,
});

vm.component('filter-li', {
    template: `<li><a class="button" v-bind:data-filter="addDot">{{object}}</a></li>`,
    props: {
        object: String,
    },
    computed: {
        addDot() {
            return "." + this.object;
        }
    },

});

vm.component('side-bar-list', {
    template: `<li v-bind:class="GetLocation?'nav-active':''">
    <a v-bind:href="href">
        <i v-bind:class="fa" aria-hidden="true"></i><span>{{span}}</span>
    </a>
</li>`,
    computed: {
        GetLocation() {
            var pathname = window.location.pathname.split('/');
            var type = pathname[pathname.length - 1]
            if (this.href.includes(type)) {
                return true;
            } else {
                return false;
            }
        }
    },
    props: {
        span: String,
        fa: String,
        href: String,
    },
});