implement main title

implement switch list view

abweb/common/js/header.js

@@ -26,11 +26,7 @@
   * Go page of operationList
   */
   HEADER.goOperationList = function () {
-     $('#footer').load(CONSTANT.PAGE_NAME.FOOTER, function () {
-         sessionStorage.activeTab = CONSTANT.PAGE_TAB.OPERATION_LIST;
-         HEADER.activeInitBottomNav('operationListBottomNav');
-         TOP.showPage(CONSTANT.PAGE_NAME.OPERATION_LIST);
-     });
+    OL.init();
  };
  
  /**

abweb/html/common/header.html

@@ -13,7 +13,7 @@
                   </a>
                 </li>
                 <li class="nav-link">
-                  <a href="task-list.html" class="d-block text-center text-decoration-none">
+                  <a href="index.html" class="d-block text-center text-decoration-none">
                     <img src="../common/img/nav_icon_task.svg" type="image" alt="" class="p-sm-1 p-0 img-fluid lang" lang="workList">
                     <div class="fs-7 d-sm-block d-none lang" lang="workList"></div>
                   </a>

abweb/html/index.html

@@ -39,15 +39,7 @@
     
     <!-- header -->
     <div id="includedHeader"></div>
-
-    <!-- title -->
-    <div id="main-ttl">
-      <div class="container">
-            <!-- title -->
-            <h1 class="fs-14 font-weight-bold pt-4 pb-3 mb-0">作業一覧</h1>
-      </div>
-    </div>
-
+    <div id="includedMainTitle"></div>
     <!-- task list -->
     <main>
         <div class="container">
@@ -121,10 +113,10 @@
                 <div class="d-flex justify-content-between align-items-center">
                     <div class="fs-9">3<span>件表示</span></div>
                     <div class="view">
-                        <a href="#" class="text-decoration-none view-btn view-list-btn">
+                        <a href="javascript:OL.switchToViewList();" class="text-decoration-none view-btn view-list-btn">
                             <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示">
                         </a>
-                        <a href="#" class="text-decoration-none view-btn view-block-btn active">
+                        <a href="javascript:OL.switchToGridList();" class="text-decoration-none view-btn view-block-btn active">
                             <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示">
                         </a>
                     </div>

abweb/js/operationList/operationList.js

@@ -31,6 +31,7 @@
      console.log('OperationList start');
  
      TEMPLATE.loadHearder("#includedHeader");
+     TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'workList', null, null);
      TEMPLATE.loadConfirmModal("#includedConfirmModal");
      TEMPLATE.loadCategoryModal("#includedCategoryModal");
  
@@ -579,3 +580,27 @@
      }
  };
 
+ /**
+  * switch operation List to view
+  */
+ OL.switchToViewList = function () {
+    $('.view-menu .view-list-btn').on("click", function() {
+        $('.view-block-btn').removeClass('active');
+        $('.view-list-btn').addClass('active');
+        $('.view-content').removeClass('view-block');
+        $('.view-content').addClass('view-list');
+    });
+ };
+
+ /**
+  * switch operation List to grid
+  */
+ OL.switchToGridList = function() {
+    $('.view-menu .view-block-btn').on("click", function() {
+        $('.view-list-btn').removeClass('active');
+        $('.view-block-btn').addClass('active');
+        $('.view-content').removeClass('view-list');
+        $('.view-content').addClass('view-block');
+    });
+ };
+