From c415a24d7aac4a734e87179b17eaddd7d52d1d13 Mon Sep 17 00:00:00 2001
From: b110212000 <b110212000@gmail.com>
Date: Fri, 3 Sep 2021 16:30:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=BB=E7=AB=99=E7=B8=AE=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SolarPower/Views/PowerStation/Index.cshtml | 599 ++++++++-------------
 1 file changed, 211 insertions(+), 388 deletions(-)

diff --git a/SolarPower/Views/PowerStation/Index.cshtml b/SolarPower/Views/PowerStation/Index.cshtml
index 1a86541..96e3888 100644
--- a/SolarPower/Views/PowerStation/Index.cshtml
+++ b/SolarPower/Views/PowerStation/Index.cshtml
@@ -9,414 +9,201 @@
     <li class="breadcrumb-item active">@ViewData["Title"]</li>
     <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
 </ol>
+<div class="container-fluid">
+    <div class="row flex-nowrap wrapper">
+        <div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100 overflow-auto">
 
-<!-- Your main content goes below here: -->
-<div class="row">
-    <div class="col-xl-12">
-        <div id="panel-5" class="panel">
-            <div class="panel-container show">
-                <div class="panel-content">
-                    <div class="subheader">
-                        <h1 class="subheader-title"> 電站分佈區域 </h1>
-                        <div>
-                            <a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
-                                <span class="fal fa-plus mr-1"></span>
-                                新增電站
-                            </a>
+            <div class="list-group border-0 card text-center text-md-left" id="sidebar">
+
+                <div class="border bg-light rounded-top">
+                    <div class="accordion accordion-hover accordion-clean js-list-filter" id="js_list_accordion">
+                        <div class="card border-top-left-radius-0 border-top-right-radius-0">
+                            <div class="card-header">
+                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-a" aria-expanded="true" data-filter-tags="settings">
+                                    <i class="fal fa-globe width-2 fs-xl"></i>
+                                    新北市
+                                </a>
+                            </div>
+                            <div id="js_list_accordion-a" class="collapse" data-parent="#js_list_accordion">
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-b" aria-expanded="false" data-filter-tags="merge">
+                                    <i class="fal fa-globe width-2 fs-xl"></i>
+                                    台南市
+                                </a>
+                            </div>
+                            <div id="js_list_accordion-b" class="collapse" data-parent="#js_list_accordion">
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-c" aria-expanded="false" data-filter-tags="backup">
+                                    <i class="fal fa-globe width-2 fs-xl"></i>
+                                    屏東縣
+                                    <span class="ml-auto">
+                                        <span class="collapsed-reveal">
+                                            <i class="fal fa-chevron-up fs-xl"></i>
+                                        </span>
+                                        <span class="collapsed-hidden">
+                                            <i class="fal fa-chevron-down fs-xl"></i>
+                                        </span>
+                                    </span>
+                                </a>
+                            </div>
+                            <div id="js_list_accordion-c" class="collapse" data-parent="#js_list_accordion">
+                                <div class="card-body">
+                                    <ul class="list-group">
+                                        <li class="list-group-item">
+                                            <span data-filter-tags="reports file">Reports</span>
+                                        </li>
+                                        <li class="list-group-item">
+                                            <span data-filter-tags="analytics graphs">Analytics</span>
+                                        </li>
+                                        <li class="list-group-item">
+                                            <span data-filter-tags="export download">Export</span>
+                                        </li>
+                                        <li class="list-group-item">
+                                            <span data-filter-tags="storage">Storage</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <ul id="areaTab" class="nav nav-tabs mb-5" role="tablist">
-                        @*<li class="nav-item">
-                                <a class="nav-link fs-lg px-4 active" data-toggle="tab" href="#tab-newtaipei" role="tab">
-                                    <span class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
-                                </a>
-                            </li>
-                            <li class="nav-item" id="taipei">
-                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taipei" role="tab">
-                                    <span class="hidden-sm-down ml-1">台北市</span> <span class="badge bg-primary-500 ml-2">4</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-hsinchu" role="tab">
-                                    <span class="hidden-sm-down ml-1">新竹市</span> <span class="badge bg-primary-500 ml-2">4</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-miaoli" role="tab">
-                                    <span class="hidden-sm-down ml-1">苗栗縣</span> <span class="badge bg-primary-500 ml-2">1</span>
-                                </a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taichung" role="tab">
-                                    <span class="hidden-sm-down ml-1">台中市</span> <span class="badge bg-primary-500 ml-2">3</span>
-                                </a>
-                            </li>*@
-                    </ul>
-                    <div id="area" class="tab-content p-3">
-                        <!--<div class="tab-pane fade show active" id="tab-newtaipei" role="tabpanel" aria-labelledby="tab-newtaipei">
-                        <div class="row mb-5 d-flex justify-content-between">
-                            <div class="col-6">
-                                <a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
-                                    <span class="fal fa-plus mr-1"></span>
-                                    新增電站
-                                </a>
-                            </div>
-                            <div class="col-6 text-right">
-                                <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
-                                <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
+                    <span class="filter-message js-filter-message"></span>
+                </div>
+            </div>
+
+        </div>
+        <div class="col-auto px-0">
+            <a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
+                <span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
+                <span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
+            </a>
+        </div>
+        <main class="col px-5 pl-md-2 main">
+            <div class="row">
+                <div class="col-xl-12">
+                    <div id="panel-5" class="panel">
+                        <div class="panel-container show">
+                            <div class="panel-content">
+                                <div class="subheader">
+                                    <h1 class="subheader-title"> 電站分佈區域 </h1>
+                                    <div>
+                                        <a asp-controller="PowerStation" asp-action="Edit" asp-route-stationId="new" class="btn btn-success waves-effect waves-themed mb-3">
+                                            <span class="fal fa-plus mr-1"></span>
+                                            新增電站
+                                        </a>
+                                    </div>
+                                </div>
+                                <ul id="areaTab" class="nav nav-tabs mb-5" role="tablist" hidden="hidden">
+                                </ul>
+                                <div id="area" class="tab-content p-3">
+                                </div>
                             </div>
                         </div>
-
-                        <div class="row" id="solarCard">-->
-                        @*<div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <a href="0station.html">
-                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    </a>
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            新竹巨城站
-                                        </h4>
-
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">90</span> %</p>
-
-                                            </div>
-                                        </li>
-                                    </ul>
-
-                                </div>
-                            </div>
-                            <div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
-                                                <i class="fal fa-check"></i>
-                                            </a> 新竹交大站
-                                        </h4>
-                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-                                                <p>27°C</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-                                                <p class="small">2021-06-30</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">65</span> %</p>
-                                                <p class="small">17:50:36</p>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                    <div class="progress progress-sm">
-                                        <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
-                                                <i class="fal fa-exclamation"></i>
-                                            </a> 新竹動物園站
-                                        </h4>
-                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-                                                <p>27°C</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-                                                <p class="small">2021-06-30</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">40</span> %</p>
-                                                <p class="small">17:50:36</p>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                    <div class="progress progress-sm">
-                                        <div class="progress-bar bg-info" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            <a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed">
-                                                <i class="fal fa-horizontal-rule"></i>
-                                            </a> 新竹動物園站
-                                        </h4>
-                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-                                                <p>27°C</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-                                                <p class="small">2021-06-30</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">5</span> %</p>
-                                                <p class="small">17:50:36</p>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                    <div class="progress progress-sm">
-                                        <div class="progress-bar bg-info" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
-                                                <i class="fal fa-check"></i>
-                                            </a> 新竹巨城站
-                                        </h4>
-                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-                                                <p>27°C</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-                                                <p class="small">2021-06-30</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">90</span> %</p>
-                                                <p class="small">17:50:36</p>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                    <div class="progress progress-sm">
-                                        <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="col-xl-2">
-                                <div class="card border m-auto m-lg-0">
-                                    <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
-                                        <h4 class="font-weight-bold" style="line-height: 27px;">
-                                            <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
-                                                <i class="fal fa-check"></i>
-                                            </a> 新竹交大站
-                                        </h4>
-                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
-                                    </div>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item px-2">
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電量</p>
-                                                <p><span class="color-primary-400">185</span> kWh</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>發電金額</p>
-                                                <p><span class="color-primary-400">2,5840</span> NT</p>
-                                            </div>
-                                            <div class=" d-flex justify-content-between">
-                                                <p>Pr值</p>
-                                                <p><span class="color-primary-400">65</span> %</p>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                    <div class="progress progress-sm">
-                                        <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="col-xl-2"></div>
-                            <div class="col-xl-2"></div>
-                            <div class="col-xl-2"></div>
-                            <div class="col-xl-2"></div>*@
-
-                        <!--</div>
-
-                        </div>
-
-                        <div class="tab-pane fade" id="tab-taipei" role="tabpanel" aria-labelledby="tab-taipei">
-                            <div class="row mb-5">
-                                此處放台北市數據
-                            </div>
-                        </div>
-
-                        <div class="tab-pane fade" id="tab-hsinchu" role="tabpanel" aria-labelledby="tab-hsinchu">
-                            <div class="row mb-5">
-                                此處放新竹市數據
-                            </div>
-                        </div>
-
-                        <div class="tab-pane fade" id="tab-miaoli" role="tabpanel" aria-labelledby="tab-miaoli">
-                            <div class="row mb-5">
-                                此處放苗栗縣數據
-                            </div>
-                        </div>
-
-                        <div class="tab-pane fade" id="tab-taichung" role="tabpanel" aria-labelledby="tab-taichung">
-                            <div class="row mb-5">
-                                此處放台中市數據
-                            </div>
-                        </div>-->
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-</div>
 
-<div id="templateAreaTab" hidden="hidden">
-    <ul>
-        <li class="nav-item">
-            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-newtaipei" role="tab">
-                <span id="areaName" class="hidden-sm-down ml-1">新北市</span> <span id="solarCount" class="badge bg-primary-500 ml-2">4</span>
-            </a>
-        </li>
-    </ul>
-</div>
-<div id="templateArea" hidden="hidden">
-    <div class="tab-pane" id="tab-name" role="tabpanel" aria-labelledby="tab-name">
-        @*<div class="row mb-5 d-flex justify-content-end">
-            
-            <div class="col-6 text-right">
-                <a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-list fa-2x mt-2"></span></a>
-                <a href="javascript:CardDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-grip-horizontal fa-2x mt-2"></span></a>
+            <div id="templateAreaTab" hidden="hidden">
+                <ul>
+                    <li class="nav-item">
+                        <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-newtaipei" role="tab">
+                            <span id="areaName" class="hidden-sm-down ml-1">新北市</span> <span id="solarCount" class="badge bg-primary-500 ml-2">4</span>
+                        </a>
+                    </li>
+                </ul>
             </div>
-        </div>*@
-
-        <div class="row solarCard" id="solarCard">
-        </div>
-        <div class="TableArea">
-            <table id="solarTable" class="table table-bordered table-hover m-0 text-center">
-                <thead class="thead-themed">
-                    <tr>
-                        <th>編號</th>
-                        <th>電站名稱</th>
-                        <th>裝置容量(kWp)</th>
-                        <th>逆變器數量</th>
-                        <th>台電掛表日</th>
-                        <th>功能</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @*<tr>
-                            <th scope="row">PEP-NTP001-PYR-01</th>
-                            <td>日照計01</td>
-                            <td>日照計</td>
-                            <td>ADTEK</td>
-                            <td>CS1</td>
-                            <td></td>
-                            <td>CS1</td>
-                            <td></td>
-                            <td></td>
-                            <td>
-                                <button type="button" class="btn btn-primary btn-pills waves-effect waves-themed">修改</button>
-                            </td>
-                        </tr>*@
-                </tbody>
-            </table>
-        </div>
-
-    </div>
-</div>
-
-<div id="templateCard" hidden="hidden">
-    <div class="col-xl-2">
-        <div class="card border m-auto m-lg-0">
-            <a id="editSolarUrl" href="0station.html">
-                <img id="Solarimg" src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
-            </a>
-            <div class="card-body d-flex justify-content-between pb-0 px-2">
-                <h4 id="solarName" class="font-weight-bold" style="line-height: 27px;">
-                    新竹巨城站
-                </h4>
+            <div id="templateArea" hidden="hidden">
+                <div class="tab-pane" id="tab-name" role="tabpanel" aria-labelledby="tab-name">
+                    <div class="row solarCard" id="solarCard">
+                    </div>
+                    <div class="TableArea">
+                        <table id="solarTable" class="table table-bordered table-hover m-0 text-center">
+                            <thead class="thead-themed">
+                                <tr>
+                                    <th>編號</th>
+                                    <th>電站名稱</th>
+                                    <th>裝置容量(kWp)</th>
+                                    <th>逆變器數量</th>
+                                    <th>台電掛表日</th>
+                                    <th>功能</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            </tbody>
+                        </table>
+                    </div>
 
+                </div>
             </div>
-            <ul class="list-group list-group-flush">
-                <li class="list-group-item px-2">
-                    <div class=" d-flex justify-content-between">
-                        <p>裝置容量(kWp)</p>
-                        <p><span id="generating_capacity" class="color-primary-400">185</span> kWh</p>
+
+            <div id="templateCard" hidden="hidden">
+                <div class="col-xl-2">
+                    <div class="card border m-auto m-lg-0">
+                        <a id="editSolarUrl" href="0station.html">
+                            <img id="Solarimg" src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
+                        </a>
+                        <div class="card-body d-flex justify-content-between pb-0 px-2">
+                            <h4 id="solarName" class="font-weight-bold" style="line-height: 27px;">
+                                新竹巨城站
+                            </h4>
+
+                        </div>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item px-2">
+                                <div class=" d-flex justify-content-between">
+                                    <p>裝置容量(kWp)</p>
+                                    <p><span id="generating_capacity" class="color-primary-400">185</span> kWh</p>
+
+                                </div>
+                                <div class=" d-flex justify-content-between">
+                                    <p>逆變器數量</p>
+                                    <p><span id="inverter_amount" class="color-primary-400">2,5840</span></p>
+
+                                </div>
+                                <div class=" d-flex justify-content-between">
+                                    <p>台電掛表日</p>
+                                    <p><span id="electricity_meter_at" class="color-primary-400">90</span></p>
+
+                                </div>
+                            </li>
+                        </ul>
 
                     </div>
-                    <div class=" d-flex justify-content-between">
-                        <p>逆變器數量</p>
-                        <p><span id="inverter_amount" class="color-primary-400">2,5840</span></p>
-
-                    </div>
-                    <div class=" d-flex justify-content-between">
-                        <p>台電掛表日</p>
-                        <p><span id="electricity_meter_at" class="color-primary-400">90</span></p>
-
-                    </div>
-                </li>
-            </ul>
-
-        </div>
+                </div>
+            </div>
+        </main>
     </div>
 </div>
 
+
+
+
+
+
+
+
+<!-- Your main content goes below here: -->
+
+
 @section Scripts{
     <script>
         var tablocation = "";
         var ids = new Array(0);
         var localurl = this.location.href;
         $(function () {
-
+            $('#collapse').trigger("click");
             Cityes();
-
+            
             $('.nav-tabs a[href="#tab-newtaipei"]').tab('show');
 
             TableDisplay();
+
+           
         });
 
         function Cityes() {
@@ -428,12 +215,41 @@
                 }
                 else {
                     $('#areaTab').empty();
+                    $('#js_list_accordion').empty();
+                    var sidebar = "";
                     $.each(rel.data, function (index, val) {
                         //電站區域
+                        
                         if (index == 0) {
                             tablocation = val.cityId;
+                            
+                        } else {
+                            
                         }
                         ids.push(val.cityId);
+
+
+                        sidebar += "<div class='card'>";
+                        sidebar += "<div class='card-header'>";
+                        sidebar += "<a id='tab-" + index +"-collapse' href='#tab-" + val.cityId + "' class='card-title collapsed' data-toggle='collapse' data-target='#js_list_accordion-" + val.cityId + "' aria-expanded='false' data-filter-tags='backup' onclick=changecity(" + val.cityId +")> ";
+                        sidebar += "<i class='fal fa-globe width-2 fs-xl'></i>";
+                        sidebar += val.cityName;
+                        sidebar += "<span class='ml-auto'>";
+                        sidebar += "<span class='badge bg-primary-500 ml-2'>" + val.amount + "</span>";
+                        sidebar += "</span>";
+                        sidebar += "</a>";
+                        sidebar += "</div>";
+                        sidebar += "<div id='js_list_accordion-" + val.cityId + "' class='collapse' data-parent='#js_list_accordion'>";
+                        sidebar += "</div>";
+                        sidebar += "</div>";
+
+
+
+                        $('#sidebar2').find('.card').attr('id', 'sidebar' + val.cityId).clone().appendTo($('#sidebar'));
+
+
+
+
                         $('#templateAreaTab').find('li').attr('id', 'AreaTab' + val.cityId).clone().appendTo($('#areaTab'));
                         $('#AreaTab' + val.cityId).find('a').attr('href', '#tab-' + val.cityId);
                         $('#AreaTab' + val.cityId).find('a').attr('class', 'nav-link fs-lg px-4');
@@ -446,14 +262,22 @@
                         $('#tab-' + val.cityId).find('#solarCard').attr('id', 'solarCard' + val.cityId);
                         $('#tab-' + val.cityId).find('#solarTable').attr('id', 'solarTable' + val.cityId);
                     });
+                    $('#js_list_accordion').append(sidebar);
                     addPowerStationCard(ids);
 
                     $("#areaTab").find(".nav-item > a").first().click();
+                    $('#tab-0-collapse').trigger("click");
                     return;
                 }
             }, 'json');
         }
 
+        function changecity(a)
+        {
+            $('#AreaTab' + a).find('a').trigger("click");
+        }
+
+
 
         function addPowerStationCard(ids) {
 
@@ -477,7 +301,6 @@
                         if (val.electricityMeterAt == undefined || val.electricityMeterAt == null) {
                             val.electricityMeterAt = "";
                         }
-
                         $('#templateCard').find('.col-xl-2').attr('id', 'card' + val.id).clone().appendTo($('#solarCard' + val.cityId));
                         $('#card' + val.id).find('#editSolarUrl').attr('href', localurl + '/edit?stationId=' + val.id);
                         $('#card' + val.id).find('#editSolarUrl').find('#Solarimg').attr('src', val.mainDisplay);
@@ -487,12 +310,12 @@
                         $('#card' + val.id).find('#inverter_amount').text(val.inverterAmount);
                         $('#card' + val.id).find('#electricity_meter_at').text(val.electricityMeterAt);
 
-                        $('#solarTable' + val.cityId).find('tbody').append('<tr data-id="' + val.id + '" datacity-id="' + val.cityId+'"">' +
+                        $('#solarTable' + val.cityId).find('tbody').append('<tr data-id="' + val.id + '" datacity-id="' + val.cityId + '"">' +
                             '<td>' + val.id + '</td>' +
                             '<td>' + val.name + '</td>' +
                             '<td>' + val.generatingCapacity.toFixed(2) + '</td>' +
                             '<td>' + val.inverterAmount + '</td>' +
-                            
+
                             '<td>' + val.electricityMeterAt + '</td>' +
                             '<td> <button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=' + val.id + '\'">選擇</button>    <button type="button" class="btn btn-danger btn-pills waves-effect waves-themed del-btnto">刪除</button></td>' +
 
@@ -506,7 +329,7 @@
             }, 'json');
         }
 
-        
+
 
 
 
@@ -570,7 +393,7 @@
                                 }, 'json');
                             }
                         });
-                    
+
 
                     return;
                 }
@@ -580,7 +403,7 @@
 
 
 
-            
+
         });
 
 
@@ -589,4 +412,4 @@
             $('.solarCard').hide();
         }
     </script>
-}
\ No newline at end of file
+}