index design change

abvw/common/header.html

@@ -12,7 +12,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>

abvw/common/js/header.js

@@ -26,11 +26,7 @@ HEADER.goToHomePage = function (pageId) {
  * 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();
 };
 
 /**

abvw/js/operationList/operationList.js

@@ -14,6 +14,13 @@ OL.isOperationGroupMaster = 0; //0: category(operationGroupMaster) not exist 1:
 OL.sortIndex;
 OL.operationGroupMasterId;
 
+OL.REPORT_TYPE = {
+	REPORTONLY: 0,     //report only
+	INSPECT: 1,        //rountine
+	WITHREPLY: 2,      // report answer
+	WORKFLOW: 3        // continuous 
+}
+
 /**
  * process on page load.
  * 1.get all data.
@@ -23,6 +30,10 @@ OL.operationGroupMasterId;
 OL.init = function () {
     console.log('OperationList start');
 
+    TEMPLATE.loadHearder("#includedHeader");
+    TEMPLATE.loadConfirmModal("#includedConfirmModal");
+    TEMPLATE.loadCategoryModal("#includedCategoryModal");
+
     //get all data of operation list scene
     OL.getAllDataWeb(sessionStorage.OL_searchKeyWord, sessionStorage.OL_sortIndex, sessionStorage.OL_searchStartDate, sessionStorage.OL_searchEndDate, sessionStorage.OL_operationGroupMasterId);
 
@@ -137,35 +148,51 @@ OL.createOperationList = function (operationList) {
 
     //create & show
     for (let i = 0; i < operationList.length; i++) {
-        let operationTR = $('<tr/>');
-
-        const operationNameTd = $(
-            "<td class='operationId_" +
-                operationList[i].operationId +
-                "'><a href=\"javascript:OL.sendOperation('" +
-                operationList[i].operationId +
-                "', '" +
-                operationList[i].operationType +
-                "', '" +
-                operationList[i].reportType +
-                "', '" +
-                operationList[i].enableAddReport +
-                "');\"  class='d-block text-black text-decoration-none mb-1'>" +
-                operationList[i].operationName +
-                "</a><div class='fa-sm mobile_operation_date'><i class='far fa-clock fa-blue' style='color:blue;margin-right:10px'></i>" +
-                OL.setOperationDate(operationList[i].operationStartDate) +
-                ' ~ ' +
-                OL.setOperationDate(operationList[i].operationEndDate) +
-                '</div></td>',
-        );
-        const operationStartDateTd = $('<td/>', { class: 'operationStartDate' }).text(OL.setOperationDate(operationList[i].operationStartDate));
-        const operationEndDateTd = $('<td/>', { class: 'operationEndDate' }).text(OL.setOperationDate(operationList[i].operationEndDate));
-
-        operationTR.append(operationNameTd);
-        operationTR.append(operationStartDateTd);
-        operationTR.append(operationEndDateTd);
-
-        $('.table tbody').append(operationTR);
+        let classIcon ;
+        switch (operationList[i].reportType)
+		{
+			case OL.REPORT_TYPE.REPORTONLY:
+				classIcon = "report";
+				break;
+			case OL.REPORT_TYPE.INSPECT:
+				classIcon = "inspection";
+				break;
+			case OL.REPORT_TYPE.WITHREPLY:
+				classIcon = "questionary";
+				break;
+			case OL.REPORT_TYPE.WORKFLOW:
+				classIcon = "proccess";
+				break;
+		}
+		let messageli = $("<li class='card mb-2' name = 'operationId_" + operationList[i].operationId + "' ></li>");
+		let ahrefRequiredFlg =  $("<a href=\"javascript:OL.sendOperation('"
+                        + operationList[i].operationId
+                        + "', '"
+                        + operationList[i].operationType
+                        + "', '"
+                        + operationList[i].reportType
+                        + "', '"
+                        + operationList[i].enableAddReport
+                        + "');\" class='h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative'></a>");
+		let divIcon = $("<div class='position-absolute translate-middle top-50 left-0 ml-3'>"
+						+ "<div class='type-icon'>"
+						+ "<span class='" + classIcon + "'></span>"
+						+ "</div></div>")
+		
+		let divText = $("<div class='pl-5 h-100 d-flex align-items-center'>"
+						+ "<div class='w-100'>"
+						+ "<div class='fs-12 text-truncate'>" + operationList[i].operationName + "</div>"
+						+ "</div></div>");
+        let divDate = $("<div class='fs-8 text-secondary text-truncate'>"
+                        + OL.setOperationDate(operationList[i].operationStartDate)
+                        + ' ~ ' 
+                        + OL.setOperationDate(operationList[i].operationEndDate)
+                        + "</div>");
+		ahrefRequiredFlg.append(divIcon);
+		ahrefRequiredFlg.append(divText);
+		messageli.append(ahrefRequiredFlg);
+
+		$('#operationTable').append(messageli);
     }
 };
 

abvw/js/template/template.js

@@ -30,6 +30,13 @@ TEMPLATE.loadConfirmModal = function(elmentId) {
     }); 
 }
 
+/** Template load category model */
+TEMPLATE.loadCategoryModal = function(elmentId) {
+    $(elmentId).load("../common/category-modal.html", function() {
+        I18N.initi18n();
+    }); 
+}
+
 /** Template load operation select */
 TEMPLATE.loadOperationSelect = function(elmentId, selectCallback) {
     $(elmentId).load("operation-select.html", function() {