BIM-Monitor/script/js/global.js

var bimSupport = "BIM支援網";
var pageHeader = "";
const vm = Vue.createApp({
    data() {
        return {
            banner: bimSupport,
            pageHeader: pageHeader,
        }
    }
});

vm.component('side-bar', {
    data() {
        return {
            banner: bimSupport,
        }
    },
    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="home.php"> <i class="fa fa-home" aria-hidden="true"></i> <span>首頁</span> </a>
                        </li>
                        <li class="nav-parent">
                            <a>
                                <i class="fa fa-desktop" aria-hidden="true"></i>
                                <span>BIM監測查詢網</span>
                            </a>
                            <ul class="nav nav-children">
                                <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>
                                <li class="nav-parent">
                                    <a href="C3Index.php">C3工地監測儀器</a>
                                    <ul class="nav nav-children">
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-parent nav-active nav-expanded">
                            <a> <i class="fa fa-cloud" aria-hidden="true"></i> <span>{{banner}}</span> </a>
                            <ul class="nav nav-children">
                                <side-bar-list href="component-list.php" fa="fa fa-briefcase" span="BIM元件庫"></side-bar-list>
                                <side-bar-list href="api-list.php" fa="fa fa-gear" span="API"></side-bar-list>                                
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </aside>`
});

vm.component('header-menu', {
    data() {
        return {
            banner: bimSupport,
            userName: userName
        }
    },
    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>
        <div id="userbox" class="userbox">
            <a href="#" data-toggle="dropdown">
                <figure class="profile-picture"> <img src="assets/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="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">administrator</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="./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="hrefLink" class="menu-item"><i class="fa fa-gears"></i>{{name}}</a>            
               </li>`,
    props: {
        code: String,
        name: String,
    },
    computed: {
        hrefLink() {
            return 'component-list.php?type=' + this.code;
        }
    }
});

vm.component('search-bar', {
    template: `<li style="padding-top: 10px;">
    <div class="input-group input-search" style="table-layout: auto;">
        <input type="text" class="form-control" name="q" id="quicksearch" placeholder="Search...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><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-content', {
    template: `<div id="filter-content" class="panel-body" style="display:none">
    <label style="padding: 10px 15px;">元件版本:</label>
    <div class="btn-group">
        <div id="options">
            <div id="revitVersion" class="option-set" data-group="year">
                
            </div>
        </div>
    </div>
    <div class="filters">
        <div class="ui-group">
            <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type" id="filters">
                <li style="padding: 10px 15px;">
                    <label>族群品類:</label>
                </li>
                <li class="active">
                    <a class="button" data-filter="">any</a>
                </li>
            </ul>
        </div>
    </div>
    
</div>`,
});

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('/')[2];
        var type = pathname.split('-')[0]; 
        if ( this.href.includes(type)) {
            return true;
        }else{
            return false;
        }        
    }
},props:{
    span:String,
    fa:String,
    href:String,
},
});

vm.component('upload-component',{
    template:`<a class="modal-with-form btn btn-block btn-primary btn-md pt-sm pb-sm text-md" href="#modalForm2">
    <i class="fa fa-upload mr-xs"></i>
    上傳元件
</a>
<div id="modalForm2" class="modal-block modal-block-primary mfp-hide">
    <section class="panel form-wizard" id="w1">
        <header class="panel-heading">
            <h2 class="panel-title">上傳BIM元件</h2>
        </header>
        <div class="panel-body panel-body-nopadding">
            <div class="wizard-tabs">
                <ul class="wizard-steps">
                    <li class="active">
                        <a href="#w1-account" data-toggle="tab" class="text-center">
                            <span class="badge hidden-xs">1</span>
                            選擇檔案及類別
                        </a>
                    </li>
                    <li>
                        <a href="#w1-profile" data-toggle="tab" class="text-center">
                            <span class="badge hidden-xs">2</span>
                            填寫詳細資料
                        </a>
                    </li>
                </ul>
            </div>
            <form class="form-horizontal" novalidate="novalidate">
                <div class="tab-content">
                    <div id="w1-account" class="tab-pane active">
                        <div class="form-group">
                            <label class="col-md-1 control-label">rfa上傳</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" />
                                        </span>
                                        <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label">glb上傳</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" />
                                        </span>
                                        <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">移除檔案</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">設備類別</label>
                            <div class="col-sm-3">
                                <select class="form-control mb-md" id="typeSelect">
                                    <option value="">請選擇設備類別</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="w1-profile" class="tab-pane">
                        <div class="form-group">
                            尚未選擇設備類別
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <ul class="pager">
                <li class="previous disabled">
                    <a><i class="fa fa-angle-left"></i> 上一步</a>
                </li>
                <li class="finish hidden pull-right modal-confirm">
                    <a>完成送出</a>
                </li>
                <li class="next">
                    <a>下一步 <i class="fa fa-angle-right"></i></a>
                </li>
            </ul>
        </div>
    </section>
</div>`,
});

vm.component('equipment-list',{
    data() {
        return {
            jsonData: jsonData,
            userName: userName,
            url: "component-favorite.php?userName=" + userName,
        }
    },
    template:`<div class="sidebar-widget m-none">
    <div class="widget-header clearfix">
        <h6 class="title pull-left mt-xs">類別</h6>                    
    </div>
    <div class="widget-content">
        <ul class="mg-folders">
            <inner-menu-li v-for="item in jsonData" v-bind:code="item.equipment_code" v-bind:name="item.equipment_name"></inner-menu-li>                        
            <hr class="separator" />
            <li>
                <a v-bind:href="url" class="menu-item"><i class="fa fa-gears"></i>清單列表</a>
            </li>
        </ul>

    </div>
</div>`,
});