expire / running status added on task list

Author: lgh06

packages/helper/transRes.mjs

@@ -64,6 +64,10 @@ let trans = {
   "No data to export, please try again 15 minutes later": "没有数据可以导出，请15分钟后再试",
   "Notice: Export history may only works on Chrome browser.": 
     "注意：请在电脑版Chrome浏览器中导出历史数据，手机上或电脑上的其它浏览器可能无法导出。",
+  "Expired":"已过期",
+  "Expiring soon":"即将过期",
+  "Running":"运行中",
+  "Running status":"运行状态",
   // Below is on create task page
   "Please input a URL start with https:// or http://": "请输入以https://或http://开头的网址",
   "URL check passed.": "URL检查通过",

packages/web/src/pages/task/list.tsx

@@ -4,13 +4,13 @@ import { useImmerAtom } from 'jotai/immer';
 import { useResetAtom } from 'jotai/utils'
 import { createTaskDetailAtom, monacoEditorAtom, userInfoAtom } from '../../atoms';
 import { CronTime } from '@webest/web-page-monitor-helper';
-import { fetchAPI, useI18n, innerHTML, useHeadTitle, arrayToCsv, downloadBlob } from "../../helpers/index";
+import { fetchAPI, useI18n, innerHTML, useHeadTitle, arrayToCsv, downloadBlob, genClassNameAndString } from "../../helpers/index";
 import Link from "next/link";
 import { ScriptList } from "../../components/scriptList";
 import { useRouter } from "next/router";
 import styles from "../../styles/modules/taskList.module.scss";
 
-
+const [cn, cs] = genClassNameAndString(styles);
 const TaskListSimpPage: NextPage = () => {
 
   const [taskDetail, setTaskDetail] = useImmerAtom(createTaskDetailAtom);
@@ -93,6 +93,35 @@ const TaskListSimpPage: NextPage = () => {
         )
       }
     },
+    {
+      Header: t('Running status'),
+      id: 'runningStatus',
+      Cell: ({ row: {original: or} }) => {
+        let status;
+        let endDate;
+        let color;
+        let now = Date.now();
+        if(or.endTime){
+          endDate = new Date(or.endTime).valueOf();
+        }
+        if(now > endDate){
+          status = t('Expired');
+          color = 'red';
+        }else if (now + 1000 * 3600 * 24 > endDate){
+          status = t('Expiring soon');
+          color = 'yellow';
+        }else{
+          status = t('Running');
+          color = 'green';
+        }
+        return (
+          <>
+            <span {...cn(`statusIcon${color} statusIcon`)}>●</span>
+            { status }
+          </>
+        )
+      }
+    },
     {
       Header: t('Edit / Delete'),
       id: 'editOrView',

packages/web/src/styles/modules/taskList.module.scss

@@ -7,4 +7,17 @@ br.navBr2{
   @media screen and (min-width: 768px) {
     display: none;
   }
+}
+
+.statusIcon{
+  font-size: 1.5em;
+  &red{
+    color: red;
+  }
+  &green{
+    color: #00ff00;
+  }
+  &yellow{
+    color: yellow;
+  }
 }