電站卡片Demo JQuery

SolarPower/Views/PowerStation/Index.cshtml

@@ -312,7 +312,7 @@
     <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 class="badge bg-primary-500 ml-2">4</span>
+                <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>
@@ -327,12 +327,42 @@
                 </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:CardDisplay();" 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>
+                <a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
             </div>
         </div>
 
-        <div class="row" id="solarCard">
+        <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>
@@ -342,7 +372,7 @@
     <div class="col-xl-2">
         <div class="card border m-auto m-lg-0">
             <a id="editSolarUrl" href="0station.html">
-                <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
+                <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;">
@@ -353,17 +383,17 @@
             <ul class="list-group list-group-flush">
                 <li class="list-group-item px-2">
                     <div class=" d-flex justify-content-between">
-                        <p>發電量</p>
+                        <p>裝置容量</p>
                         <p><span id="today_kwh" class="color-primary-400">185</span> kWh</p>
 
                     </div>
                     <div class=" d-flex justify-content-between">
-                        <p>發電金額</p>
+                        <p>逆變器數量</p>
                         <p><span id="kwhkwp" class="color-primary-400">2,5840</span> NT</p>
 
                     </div>
                     <div class=" d-flex justify-content-between">
-                        <p>Pr值</p>
+                        <p>台電掛表日</p>
                         <p><span id="PR" class="color-primary-400">90</span> %</p>
 
                     </div>
@@ -374,58 +404,163 @@
     </div>
 </div>
 
-
 @section Scripts{
     <script>
 
         $(function () {
+
             var localurl = this.location.href;
             //電站區域Tab要佳LI
-            /*$('#areaTab').append('<li>');*/
-            $('#templateAreaTab').find('li').attr('id', 'AreaTabtaipei').clone().appendTo($('#areaTab'));
-            $('#AreaTabtaipei').find('a').attr('href', '#tab-taipei');
-            $('#AreaTabtaipei').find('a').attr('class', 'nav-link fs-lg px-4 active');
-            
-            $('#AreaTabtaipei').find('#areaName').html('台北市')
-            /*$('#areaTab').append('</li>');*/
-
-            //$('#areaTab').append('<li>');            
             $('#templateAreaTab').find('li').attr('id', 'AreaTabnewtaipei').clone().appendTo($('#areaTab'));
             $('#AreaTabnewtaipei').find('a').attr('href', '#tab-newtaipei');
             $('#AreaTabnewtaipei').find('a').attr('class', 'nav-link fs-lg px-4');
             $('#AreaTabnewtaipei').find('#areaName').html('新北市')
-            //$('#areaTab').append('</li>');            
+            $('#AreaTabnewtaipei').find('#solarCount').html('2')
+
+            $('#templateAreaTab').find('li').attr('id', 'AreaTabHsinchu').clone().appendTo($('#areaTab'));
+            $('#AreaTabHsinchu').find('a').attr('href', '#tab-Hsinchu');
+            $('#AreaTabHsinchu').find('a').attr('class', 'nav-link fs-lg px-4');
+            $('#AreaTabHsinchu').find('#areaName').html('新竹市')
+            $('#AreaTabHsinchu').find('#solarCount').html('3')
+            
+            $('#templateAreaTab').find('li').attr('id', 'AreaTabPingtung').clone().appendTo($('#areaTab'));
+            $('#AreaTabPingtung').find('a').attr('href', '#tab-Pingtung');
+            $('#AreaTabPingtung').find('a').attr('class', 'nav-link fs-lg px-4');
+            $('#AreaTabPingtung').find('#areaName').html('屏東縣')
+            $('#AreaTabPingtung').find('#solarCount').html('1')
             
             //電站區域內容
-            $('#templateArea').find('.tab-pane').attr('id', 'tab-taipei').clone().appendTo($('#area'));
-            $('#tab-taipei').attr('aria-labelledby', 'tab-taipei')
-            $('#tab-taipei').attr('class','tab-pane fade show active')
-            $('#tab-taipei').find('#solarCard').attr('id', 'solarCardtaipei');
-            
-
             $('#templateArea').find('.tab-pane').attr('id', 'tab-newtaipei').clone().appendTo($('#area'));
             $('#tab-newtaipei').attr('aria-labelledby', 'tab-newtaipei')
             $('#tab-newtaipei').find('#solarCard').attr('id', 'solarCardnewtaipei');
+            $('#tab-newtaipei').find('#solarTable').attr('id', 'solarTablenewtaipei');
 
+            $('#templateArea').find('.tab-pane').attr('id', 'tab-Hsinchu').clone().appendTo($('#area'));
+            $('#tab-Hsinchu').attr('aria-labelledby', 'tab-Hsinchu')
+            $('#tab-Hsinchu').find('#solarCard').attr('id', 'solarCardHsinchu');
+            $('#tab-Hsinchu').find('#solarTable').attr('id', 'solarTableHsinchu');
 
+            $('#templateArea').find('.tab-pane').attr('id', 'tab-Pingtung').clone().appendTo($('#area'));
+            $('#tab-Pingtung').attr('aria-labelledby', 'tab-Pingtung')
+            $('#tab-Pingtung').find('#solarCard').attr('id', 'solarCardPingtung');
+            $('#tab-Pingtung').find('#solarTable').attr('id', 'solarTablePingtung');
 
             //電站卡片
             $('#templateCard').find('.col-xl-2').attr('id', '001').clone().appendTo($('#solarCardnewtaipei'));
-            $('#001').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=001');
+            $('#001').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=1');
-            $('#001').find('#solarName').text('新竹巨城站');
+            $('#001').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/1/main.png');
-            $('#001').find('#today_kwh').text('185');
+            $('#001').find('#solarName').text('三重慈濟站');
-            $('#001').find('#kwhkwp').text('25,840');
+            $('#001').find('#today_kwh').text('1000');
-            $('#001').find('#PR').text('90');
+            $('#001').find('#kwhkwp').text('10');
+            $('#001').find('#PR').text('2021-06-15');
+
+            $('#solarTablenewtaipei').find('tbody').append('<tr>' +
+                '<td>001</td>' +
+                '<td>三重慈濟站</td>' +
+                '<td>1000</td>' +
+                '<td>10</td>' +
+                '<td>2021-06-15</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=001' + '\'">選擇</button></td>' +
+
+                '</tr>');
+
 
             $('#templateCard').find('.col-xl-2').attr('id', '002').clone().appendTo($('#solarCardnewtaipei'));
-            $('#002').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=002');
+            $('#002').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=2');
-            $('#002').find('#solarName').text('新竹交大站');
+            $('#002').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/2/main.png');
-            $('#002').find('#today_kwh').text('183');
+            $('#002').find('#solarName').text('板橋慈濟站');
-            $('#002').find('#kwhkwp').text('12,245');
+            $('#002').find('#today_kwh').text('2000');
-            $('#002').find('#PR').text('80');
+            $('#002').find('#kwhkwp').text('110');
+            $('#002').find('#PR').text('2021-06-05');
 
+            $('#solarTablenewtaipei').find('tbody').append('<tr>' +
+                '<td>002</td>' +
+                '<td>板橋慈濟站</td>' +
+                '<td>2000</td>' +
+                '<td>110</td>' +
+                '<td>2021-06-05</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=002' + '\'">選擇</button></td>' +
+                '</tr>');
 
+            $('#templateCard').find('.col-xl-2').attr('id', '003').clone().appendTo($('#solarCardHsinchu'));
+            $('#003').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=3');
+            $('#003').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/3/main.png');
+            $('#003').find('#solarName').text('新竹巨城站');
+            $('#003').find('#today_kwh').text('3000');
+            $('#003').find('#kwhkwp').text('166');
+            $('#003').find('#PR').text('2021-06-05');
+
+            $('#solarTableHsinchu').find('tbody').append('<tr>' +
+                '<td>003</td>' +
+                '<td>新竹巨城站</td>' +
+                '<td>3000</td>' +
+                '<td>166</td>' +
+                '<td>2021-06-05</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=003' + '\'">選擇</button></td>' +
+                '</tr>');
+            $('#templateCard').find('.col-xl-2').attr('id', '004').clone().appendTo($('#solarCardHsinchu'));
+            $('#004').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=4');
+            $('#004').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/4/main.png');
+            $('#004').find('#solarName').text('新竹交大站');
+            $('#004').find('#today_kwh').text('4000');
+            $('#004').find('#kwhkwp').text('205');
+            $('#004').find('#PR').text('2021-06-05');
+
+            $('#solarTableHsinchu').find('tbody').append('<tr>' +
+                '<td>004</td>' +
+                '<td>新竹交大站</td>' +
+                '<td>4000</td>' +
+                '<td>205</td>' +
+                '<td>2021-06-05</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=004' + '\'">選擇</button></td>' +
+                '</tr>');
+
+            $('#templateCard').find('.col-xl-2').attr('id', '005').clone().appendTo($('#solarCardHsinchu'));
+            $('#005').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=5');
+            $('#005').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/5/main.jpg');
+            $('#005').find('#solarName').text('新竹動物園站');
+            $('#005').find('#today_kwh').text('123');
+            $('#005').find('#kwhkwp').text('600');
+            $('#005').find('#PR').text('2021-06-09');
+
+            $('#solarTableHsinchu').find('tbody').append('<tr>' +
+                '<td>005</td>' +
+                '<td>新竹動物園站</td>' +
+                '<td>123</td>' +
+                '<td>600</td>' +
+                '<td>2021-06-09</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=005' + '\'">選擇</button></td>' +
+                '</tr>');
+
+            $('#templateCard').find('.col-xl-2').attr('id', '006').clone().appendTo($('#solarCardPingtung'));
+            $('#006').find('#editSolarUrl').attr('href', localurl + '/edit?stationId=6');
+            $('#006').find('#editSolarUrl').find('#Solarimg').attr('src', '~/upload/power_station/6/main.png');
+            $('#006').find('#solarName').text('屏東枋山海纜站');
+            $('#006').find('#today_kwh').text('4954');
+            $('#006').find('#kwhkwp').text('13');
+            $('#006').find('#PR').text('2021-06-22');
+
+            $('#solarTableHsinchu').find('tbody').append('<tr>' +
+                '<td>006</td>' +
+                '<td>新竹動物園站</td>' +
+                '<td>4954</td>' +
+                '<td>13</td>' +
+                '<td>2021-06-22</td>' +
+                '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/edit?stationId=006' + '\'">選擇</button></td>' +
+                '</tr>');
+
+            $('.nav-tabs a[href="#tab-newtaipei"]').tab('show');
+            
+            $('.TableArea').hide();
         });
+        function CardDisplay() {
+            $('.TableArea').hide(); 
+            $('.solarCard').show();
 
+        }
+        function TableDisplay() {
+            $('.TableArea').show();
+            $('.solarCard').hide();
+        }
     </script>
 }