diff --git a/Frontend/_sysElevator.html b/Frontend/_sysElevator.html index 533a55d..a253359 100644 --- a/Frontend/_sysElevator.html +++ b/Frontend/_sysElevator.html @@ -121,12 +121,12 @@
-
- +
@@ -136,12 +136,12 @@
-
- +
@@ -151,12 +151,12 @@
-
- +
@@ -166,12 +166,12 @@
-
- +
@@ -181,12 +181,12 @@
-
- +
@@ -898,23 +898,27 @@ function getFloDevList() { } - //emerReturn - //groConFail - //emerPower - //fireReturn - //earQuaCon //baja 訂閱設備 function subDeviceSetStatus() { - myBaja = new subscriptionDevices(); myBaja.setSubscribeDevicesByBql(subOrdPath); myBaja.setSubscribeDevicesCallBack(function (data) { - + console.log(data) function getValueByName(pointName) { return data.point_name == pointName ? data.value : null; } + function actLightByPoi(pointName, selector) { + if (getValueByName(pointName) == "trueText") { + $(selector).removeClass("bg-secondary").addClass("bg-orange"); + $(selector).parent("div").prev().find("label").text("運轉中"); + } else if (getValueByName(pointName) == "falseText") { + $(selector).removeClass("bg-orange").addClass("bg-secondary"); + $(selector).parent("div").prev().find("label").text("未動作"); + } + } + if (allDevList.length == 0) { return false; } @@ -928,6 +932,27 @@ if (data.point_name == "ST") { $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value); } + //現在樓層 + if (data.point_name == "CP") { + $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F"); + } + //往上或往下 + if (getValueByName("RD") == "UP") { + $(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c"); + } + if (getValueByName("RD") == "DOWN") { + $(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c"); + } + //消防回歸 + actLightByPoi("FE", "#emerReturn"); + //群控故障 + actLightByPoi("GCM", "#groConFail"); + //緊急電源 + actLightByPoi("EPS", "#emerPower"); + //火災回歸 + actLightByPoi("FER", "#fireReturn"); + //地震管制 + actLightByPoi("EER", "#earQuaCon"); if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) { //顯示正常燈號 @@ -938,15 +963,20 @@ $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error"); } setLightColor(); - + if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) { let obj = {}; obj.device_number = matchDevice.device_number; subSeviceData.push(obj) - } else { - let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0]; - subData[data.point_name] = data.value + } + + let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0]; + + if (subData) { + subData[data.point_name] = data.value; } + + subDeviceSetTable(matchDevice.device_number) /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/ }); @@ -955,8 +985,9 @@ //baja 訂閱設備 function subDeviceSetTable(devNum) { - let subData = subSeviceData.filter(x => x.device_number == devNum)[0] + let subData = subSeviceData.filter(x => x.device_number == devNum)[0] + let matchDevice = allDevList.filter(x => x.device_number == devNum)[0]; if (!subData) { return false; } @@ -967,11 +998,23 @@ } let masterTag = devNum?.split("_")[5]; - - let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]); + let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]); + + //現在樓層 + if (subData["CP"]) { + $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F"); + } + //往上或往下 + if (subData["RD"] == "UP") { + $(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c"); + } + if (subData["RD"] == "DOWN") { + $(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c"); + } //即時狀態(左側Table) + $(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name); $(`#imdStaTable_${devNum} #devNum`).text(devNum); $(`#imdStaTable_${devNum} #status`).text(subData["ST"]) $(`#imdStaTable_${devNum} #group`).text(masterTag); @@ -985,7 +1028,7 @@ $(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"])) $(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"])) $(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、")) - + } @@ -1036,12 +1079,12 @@
號機別 : ${devObj.full_name}
- + -

10F

+

狀態 :

- +
`; @@ -1055,61 +1098,6 @@ } - function initPopover() { - $("[name=devItem]").each((index, ele) => { - let devNum = $(ele).data("number"); //設備編號 - let devGuid = $(ele).data("id"); //guid - let devName = $(ele).data("name"); //full_name - $(ele).YTTooltip({ - html: `
- -
- -
- -
-
- - - - - -
-
-
- -
-
-
${drawImdStaBlock(devNum)}
-
${drawOpeModBlock(devNum)}
-
-
-
- -
-
- ${drawErrRecTabBlo()} -
-
- ${drawOpeRecTabBlo()} -
- - -
-
`, - group: "device", - onShow: function (tooltipEle, oriEle) { - var tab = new YT.Tab({ tabName: "cardTab" }) - console.log($(oriEle).data("number")) - //基本資料tab block - $("#info").html(drawInfoTabBlo(devGuid)); - loadOpeRecTable(devGuid); - loadErr($(oriEle).data("number")); - subDeviceSetTable($(oriEle).data("number")); - } - }) - }) - } function setBuildFloor(floorCnt = 10, eleCnt = 3) { let tbody = creEle("tbody"); @@ -1158,14 +1146,11 @@ } - - function drawStateTabBlo() { - let strHtml = ` -
- -
-
` - return strHtml; + function drawStateTabBlo(devNum) { + let div = creDiv(["row"]); + div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum))) + div.append(creDiv(["col-xl-6"]).append(drawOpeModBlock(devNum))) + return div.outerHtml(); } function drawImdStaBlock(devNum) { @@ -1173,7 +1158,8 @@ let tbody = tabEle.append(""); let rows = [ - { id: "devNum", text: "號機" }, + { id: "devName", text: "號機" }, + { id: "devNum", text: "Tag Name" }, { id: "status", text: "狀態" }, { id: "group", text: "組別" }, { id: "weight", text: "載重" }, @@ -1183,18 +1169,37 @@ { width: "40%" }, { width: "30%" }, ] + + let data = [{ + row: 0, col: 2, style:"vertical-align:middle", + data: `
+ +

+ +
+ `}] $.each(rows, (index, row) => { let tr = $(""); $.each(cols, (index2, col) => { - let td = $(""); - td.css("width", col.width) - if (index2 == 0) { - td.text(row.text); + if (index < 1 || index > 99 || index2 != 2) { + let td = $(""); + td.css("width", col.width) + if (index2 == 0) { + td.text(row.text); + } + if (index2 == 1) { + td.prop("id", row.id) + } + if (index == 0 && index2 == 2) { + td.attr("rowspan", 99) + } + if (data.filter(x => x.row == index && x.col == index2).length != 0) { + let target = data.filter(x => x.row == index && x.col == index2)[0]; + td.css("cssText", target.style); + td.html(target.data); + } + tr.append(td); } - if (index2 == 1) { - td.prop("id", row.id) - } - tr.append(td); }) tbody.append(tr); }) @@ -1216,15 +1221,14 @@ { id: "notSerFloor", text: "不服務樓層" }, ]; let cols = [ - { width: "40%" }, - { width: "30%" }, - { width: "30%" }, + { width: "50%" }, + { width: "50%" }, ] $.each(rows, (index, row) => { let tr = $(""); $.each(cols, (index2, col) => { let td = $(""); - + td.css("width", col.width) if (index2 == 0) { td.text(row.text); @@ -1240,190 +1244,5 @@ return tabEle.outerHtml(); } - function drawInfoTabBlo(devGuid) { - let tabEle = $(``); - let tbody = tabEle.append(""); - let columnNames = ["設備編號", "設備名稱"]; - - $.each(columnNames, (index, colName) => { - let tr = $(""); - let td = $(""); - td.text(colName); - tr.append(td); - tbody.append(tr); - }) - - let url = baseApiUrl + "/api/Device/GetBaseDevice"; - let sendData = { - device_guid: devGuid, - }; - objSendData.Data = sendData; - ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { - if (!res || res.code != "0000" || !res.data) { - - } else { - tbody.find("tr").eq(0).append(creEle("td", res.data.device_number)); - tbody.find("tr").eq(1).append(creEle("td", res.data.full_name)); - } - }, null, "POST").send(); - - return tabEle.prop("outerHTML"); - } - - function drawErrRecTabBlo() { - let strHtml = `
- -
` - return strHtml; - } - - function drawOpeRecTabBlo() { - let strHtml = ` - -
` - return strHtml; - } - - - function loadOpeRecTable(devGuid) { - let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid; - let tag = "#opeRecTable"; - - let column_defs = [ - { "targets": [0], "width": "8%", "sortable": true }, - { "targets": [1], "width": "8%", "sortable": true }, - { "targets": [2], "width": "7%", "sortable": true }, - { "targets": [3], "width": "7%", "sortable": true }, - ]; - - let columns = [ - { - "title": "類型", - "data": "work_type_name", - }, - { - "title": "項目", - "data": "fix_do", - }, - { - "title": "處理人員", - "data": "work_person_name", - }, - { - "title": "發生/完成時間", - "data": "finishTime", - "render": function (data, type, row) { - return row.createdAt + "
" + data; - }, - }, - - ]; - - - - //let callback = function () { - // $('#opeRecTable').wrap("
"); //不採用datatable內建scrollbody，會導致thead跑掉 - // let api = this.api(); - // api.columns.adjust(); - //} - - let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi"); - } - - function loadErrRecTable() { - let tag = "#errRecTable"; - let datas; - //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); - - let column_defs = [ - { "targets": [0], "width": "15%", "sortable": true }, - { "targets": [1], "width": "25%", "sortable": true }, - { "targets": [2], "width": "25%", "sortable": true }, - { "targets": [3], "width": "35%", "sortable": true }, - ]; - - let columns = [ - { - "title": "異常ID", - "data": "uuid", - - }, - { - "title": "異常原因", - "data": "msgText", - }, - { - "title": "ACK確認", - "data": "ackState", - }, - { - "title": "發生/賦歸時間", - "data": "timestamp", - "width": "45%", - }, - - ]; - - //let callback = function (result) { - // datas = result; - //} - let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}'; - let json_object = JSON.parse(result); - datas = json_object['data']; - errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); - } - - function loadErr(allPath) { - if (allPath != undefined && allPath != null) { - let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1 - let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5]; - getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr); - } - else { - console.log("no device"); - } - } - - function callbackForErr(result) { - let tag = "#errRecTable"; - let datas; - - let column_defs = [ - { "targets": [0], "width": "15%", "sortable": true }, - { "targets": [1], "width": "25%", "sortable": true }, - { "targets": [2], "width": "25%", "sortable": true }, - { "targets": [3], "width": "35%", "sortable": true }, - ]; - - let columns = [ - { - "title": "異常ID", - "data": "uuid", - - }, - { - "title": "異常原因", - "data": "msgText", - }, - { - "title": "ACK確認", - "data": "ackState", - }, - { - "title": "發生/完成時間", - "data": "normalTime", - "render": function (data, type, row) { - return row.timestamp + "
" + data; - }, - }, - - ]; - - let json_object = JSON.parse(result); - datas = json_object['data']; - errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); - - } - \ No newline at end of file diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index d549608..1afd998 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -75,24 +75,6 @@ } - //function loadStaLight() { - // if (pageAct.sysSubObj.device_normal_color) { - // $("#sysNorLight").css("background-color", pageAct.sysSubObj.device_normal_color); - // } else { - // $("#sysNorLight").addClass("bg-success"); - // } - // if (pageAct.sysSubObj.device_close_color) { - // $("#sysCloLight").css("background-color", pageAct.sysSubObj.device_close_color); - // } else { - // $("#sysCloLight").addClass("bg-secondary"); - // } - // if (pageAct.sysSubObj.device_error_color) { - // $("#sysErrLight").css("background-color", pageAct.sysSubObj.device_error_color); - // } else { - // $("#sysErrLight").addClass("bg-danger"); - // } - //} - function setLightColor() { $("[data-light-type]").each((index, ele) => { let type = $(ele).data("light-type"); @@ -175,283 +157,5 @@ return strHtml; } - function drawInfoTabBlo(devGuid) { - let tabEle = $(``); - let tbody = tabEle.append(""); - let columnNames = ["設備編號", "設備名稱"]; - - $.each(columnNames, (index, colName) => { - let tr = $(""); - let td = $(""); - td.text(colName); - tr.append(td); - tbody.append(tr); - }) - - let url = baseApiUrl + "/api/Device/GetBaseDevice"; - let sendData = { - device_guid: devGuid, - }; - objSendData.Data = sendData; - ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { - if (!res || res.code != "0000" || !res.data) { - - } else { - tbody.find("tr").eq(0).append(creEle("td", res.data.device_number)); - tbody.find("tr").eq(1).append(creEle("td", res.data.full_name)); - } - }, null, "POST").send(); - - return tabEle.prop("outerHTML"); - } - - function drawErrRecTabBlo() { - let strHtml = `
- -
` - return strHtml; - } - - function drawOpeRecTabBlo() { - let strHtml = ` - -
` - return strHtml; - } - - function initPopover() { - $("[name=devItem]").each((index, ele) => { - let devNum = $(ele).data("number"); //設備編號 - let devGuid = $(ele).data("id"); //guid - let devName = $(ele).data("name"); //full_name - $(ele).YTTooltip({ - html: `
- -
- -
- -
-
- - - - - -
-
-
- -
- ${drawStateTabBlo()} -
-
- -
-
- ${drawErrRecTabBlo()} -
-
- ${drawOpeRecTabBlo()} -
- - -
-
`, - group: "device", - onShow: function (tooltipEle, oriEle) { - var tab = new YT.Tab({ tabName: "cardTab" }) - console.log($(oriEle).data("number")) - //基本資料tab block - $("#info").html(drawInfoTabBlo(devGuid)); - loadOpeRecTable(devGuid); - //loadErrRecTable2($(oriEle).data("number")); - //loadErrRecTable(); - loadErr($(oriEle).data("number")); - } - }) - }) - } - - function loadOpeRecTable(devGuid) { - let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid; - let tag = "#opeRecTable"; - - let column_defs = [ - { "targets": [0], "width": "8%", "sortable": true }, - { "targets": [1], "width": "8%", "sortable": true }, - { "targets": [2], "width": "7%", "sortable": true }, - { "targets": [3], "width": "7%", "sortable": true }, - ]; - - let columns = [ - { - "title": "類型", - "data": "work_type_name", - }, - { - "title": "項目", - "data": "fix_do", - }, - { - "title": "處理人員", - "data": "work_person_name", - }, - { - "title": "發生/完成時間", - "data": "finishTime", - "render": function (data, type, row) { - return row.createdAt + "
" + data; - }, - }, - - ]; - - - - //let callback = function () { - // $('#opeRecTable').wrap("
"); //不採用datatable內建scrollbody，會導致thead跑掉 - // let api = this.api(); - // api.columns.adjust(); - //} - - let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi"); - } - - function loadErrRecTable() { - let tag = "#errRecTable"; - let datas; - //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); - - let column_defs = [ - { "targets": [0], "width": "15%", "sortable": true }, - { "targets": [1], "width": "25%", "sortable": true }, - { "targets": [2], "width": "25%", "sortable": true }, - { "targets": [3], "width": "35%", "sortable": true }, - ]; - - let columns = [ - { - "title": "異常ID", - "data": "uuid", - - }, - { - "title": "異常原因", - "data": "msgText", - }, - { - "title": "ACK確認", - "data": "ackState", - }, - { - "title": "發生/賦歸時間", - "data": "timestamp", - "width": "45%", - }, - - ]; - - //let callback = function (result) { - // datas = result; - //} - let result = '{"count": 2,"data":[{ "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00"},{"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","msgText": "","ackState": "1","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00"}]}'; - let json_object = JSON.parse(result); - datas = json_object['data']; - errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); - } - - function loadErr(allPath) { - if (allPath != undefined && allPath != null) { - let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1 - let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5]; - getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr); - } - else { - console.log("no device"); - } - } - - function callbackForErr(result) { - let tag = "#errRecTable"; - let datas; - - let column_defs = [ - { "targets": [0], "width": "15%", "sortable": true }, - { "targets": [1], "width": "25%", "sortable": true }, - { "targets": [2], "width": "25%", "sortable": true }, - { "targets": [3], "width": "35%", "sortable": true }, - ]; - - let columns = [ - { - "title": "異常ID", - "data": "uuid", - - }, - { - "title": "異常原因", - "data": "msgText", - }, - { - "title": "ACK確認", - "data": "ackState", - }, - { - "title": "發生/完成時間", - "data": "normalTime", - "render": function (data, type, row) { - return row.timestamp + "
" + data; - }, - }, - - ]; - - let json_object = JSON.parse(result); - datas = json_object['data']; - errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi"); - - } - - //function loadErrRecTable2(allPath) { - // if (allPath != undefined && allPath != null) { - // let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1 - // let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5]; - // //getOneDeviceAlarmTop10ByBaja(_devicePath, callback); - // console.log("devicePath: " + _devicePath); - // let result = '{"count": 2,"0": { "uuid": "43dc7846-bd96-4be2-ab35-f11aec729c60","timestamp": "2022-Nov-16 10:30:24.951 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "1","msgText": "","ackState": "1","normalTime": "1970-Jan-1 08:00:00.000 AM UTC+08:00"},"1": {"uuid": "7c309846-d862-4a8b-803b-cdc8e0efa092","timestamp": "2022-Nov-16 10:00:24.893 AM UTC+08:00","sourceName": "TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1_TRIP","sourceState": "0","msgText": "","ackState": "1","normalTime": "2022-Nov-16 10:15:24.939 AM UTC+08:00"}}'; - // let result_Json = JSON.parse(result) - // var eachTable = $('.each-table tbody'); - - // for (var i = 0; i < result_Json['count']; i++) - // { - // item = result_Json[i.toString()]; - // eachTable.append( - // '' + - // '' + item.uuid + '' + - // '' + item.msgText + '' + - // '' + (item.ackState = 1 ? item.normalTime : '未確認') + '' + - // '' + item.timestamp + '' + - // ''); - // } - - // } - - // let callback = function (result) { - // var eachTable = $('.each-table tbody'); - // $.each(result, function (index, element) { - // eachTable.append( - // '' + - // '' + element[index].uuid + '' + - // '' + element[index].msgText + '' + - // '' + (element[index].ackState = 1 ? element[index].normalTime : '未確認') + '' + - // '' + element[index].timestamp + '' + - // ''); - // }); - // } - //} - // } - - \ No newline at end of file diff --git a/Frontend/css/site.css b/Frontend/css/site.css index a8dd97c..ac4b78b 100644 --- a/Frontend/css/site.css +++ b/Frontend/css/site.css @@ -44,24 +44,50 @@ label[id$='-error'].error { } .light-flash { - animation: flashing 0.5s linear infinite; + --flash-color-1: #ffa100; + --flash-color-2: #26272b; + animation: flashing-bg 0.5s linear infinite; } -@keyframes flashing { +.light-flash-c { + --flash-color-1: #ffa100; + --flash-color-2: #26272b; + animation: flashing-c 0.5s linear infinite; +} + +@keyframes flashing-c { 0% { - background: #ffa100; + color: var(--flash-color-1); } 49% { - background: #ffa100; + color: var(--flash-color-1); } 50% { - background: #26272b; + color: var(--flash-color-2); } 99% { - background: #26272b; + color: var(--flash-color-2); + } +} + +@keyframes flashing-bg { + 0% { + background: var(--flash-color-1); + } + + 49% { + background: var(--flash-color-1); + } + + 50% { + background: var(--flash-color-2); + } + + 99% { + background: var(--flash-color-2); } } @@ -326,6 +352,10 @@ label[id$='-error'].error { vertical-align: bottom; } +.bg-orange { + background-color:#ffa100; +} + /* text color */ .t-main-purple { color: #623c80 !important; diff --git a/Frontend/index.html b/Frontend/index.html index bd71aef..825edf0 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -64,8 +64,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li >>> more settings are described inside documentation page >>> --> - + @@ -2452,7 +2531,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li - + +