Hugging Face's logo

Spaces:
wnm168
/
tasks
Running

App Files Community
wnm168 commited on
Commit
0efcf5b
·
verified ·
1 Parent(s): 5773f55

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +160 -1
index.html CHANGED
@@ -8,6 +8,7 @@
8
  <link rel="stylesheet" type="text/css" href="https://www.unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
9
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
10
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css" rel="stylesheet" />
 
11
  </head>
12
 
13
  <body style="height:100%;">
@@ -26,7 +27,7 @@
26
  <script src="https://unpkg.com/[email protected]/runtime.js"></script>
27
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
28
  <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
29
- <script src="layer/layer.js"></script>
30
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv7.min.js"></script>
31
  <script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>
32
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mitt.umd.min.js"></script>
@@ -199,6 +200,7 @@
199
  </style>
200
 
201
  <script type="text/babel" data-presets="react" data-type="module">
 
202
  //事件监听开始 通过修改localstorage实现跨页面事件监听
203
  const emitter = mitt();
204
  // 监听 localStorage 变化
@@ -721,6 +723,16 @@
721
  const { data } = await axios.get(url, { headers: { Authorization: "Bearer " + setting.directus_token } })
722
  return data
723
  }
 
 
 
 
 
 
 
 
 
 
724
  //API定义结束
725
 
726
  const Layout = ({ children }) => {
@@ -763,6 +775,7 @@
763
  </Navbar.Brand>
764
  </div>
765
  <div className="d-flex">
 
766
  <LocalTasks />
767
  <Button
768
  style={{
@@ -996,6 +1009,152 @@
996
  };
997
 
998
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
999
 
1000
  const LocalTasks = () => {
1001
  const [show, setShow] = useState(false);
 
8
  <link rel="stylesheet" type="text/css" href="https://www.unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
9
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
10
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css" rel="stylesheet" />
11
+ <link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet">
12
  </head>
13
 
14
  <body style="height:100%;">
 
27
  <script src="https://unpkg.com/[email protected]/runtime.js"></script>
28
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
29
  <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
30
+ <script src="//unpkg.com/layui@2.9.21/dist/layui.js"></script>
31
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv7.min.js"></script>
32
  <script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>
33
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mitt.umd.min.js"></script>
 
200
  </style>
201
 
202
  <script type="text/babel" data-presets="react" data-type="module">
203
+ window.layer = layui.layer;
204
  //事件监听开始 通过修改localstorage实现跨页面事件监听
205
  const emitter = mitt();
206
  // 监听 localStorage 变化
 
723
  const { data } = await axios.get(url, { headers: { Authorization: "Bearer " + setting.directus_token } })
724
  return data
725
  }
726
+
727
+ const paginateTasksGet = async (limit, skip) => {
728
+ const setting = STORE.getState().settings;
729
+ const url = setting.directus_host + `items/task?limit=${limit}&offset=${skip}&meta[]=filter_count&sort[]=-id`;
730
+ const { data } = await axios.get(url, { headers: { Authorization: "Bearer " + setting.directus_token } })
731
+ return data
732
+ }
733
+
734
+
735
+
736
  //API定义结束
737
 
738
  const Layout = ({ children }) => {
 
775
  </Navbar.Brand>
776
  </div>
777
  <div className="d-flex">
778
+ <Tasks />
779
  <LocalTasks />
780
  <Button
781
  style={{
 
1009
  };
1010
 
1011
 
1012
+ const Tasks = () => {
1013
+ const [show, setShow] = useState(false);
1014
+ const handleClose = () => setShow(false);
1015
+ const handleShow = () => setShow(true);
1016
+ const [reload, setReload] = useState(false);
1017
+ const { limit, onPaginationChange, skip, pagination } = usePagination();
1018
+ const [meta, setMeta] = useState({ filter_count: 0 })
1019
+ const [tasks, setTasks] = useState([])
1020
+ const { data: tasksData, refetch: tasksRefetch, isLoading: tasksLoading, error: tasksError } = useQuery({
1021
+ queryKey: ['get_paginate_tasks', limit, skip],
1022
+ queryFn: () => paginateTasksGet(limit, skip),
1023
+ enabled: show,
1024
+ })
1025
+
1026
+ useEffect(() => {
1027
+ //tasksRefetch()
1028
+ }, [pagination, reload]);
1029
+
1030
+ useEffect(() => {
1031
+ if (tasksData) {
1032
+ setMeta(tasksData.meta)
1033
+ setTasks([...tasksData.data])
1034
+ }
1035
+ }, [tasksData]);
1036
+
1037
+
1038
+ const forceUpdate = () => {
1039
+ setReload((pre) => !pre);
1040
+ };
1041
+
1042
+ return (
1043
+ <div>
1044
+ <Button
1045
+ style={{
1046
+ backgroundColor: "transparent",
1047
+ }}
1048
+ className="nav-link btn"
1049
+ onClick={handleShow}
1050
+ children={
1051
+ <span>
1052
+ <Icon
1053
+ icon="cloud-download-outline"
1054
+ size="3"
1055
+ className="text-white"
1056
+ />
1057
+ </span>
1058
+ }
1059
+ ></Button>
1060
+
1061
+
1062
+ <Modal show={show} onHide={handleClose}>
1063
+ <Modal.Header closeButton>
1064
+ <Modal.Title>远程下载任务</Modal.Title>
1065
+ </Modal.Header>
1066
+ <Modal.Body className="py-0">
1067
+ {tasksError && (
1068
+ <div className="text-center text-danger">
1069
+ 发生错误，请稍后重试！！！
1070
+ </div>
1071
+ )}
1072
+ {(tasksLoading) && (
1073
+ <div className="text-center text-success">
1074
+ 正在努力加载中......
1075
+ </div>
1076
+ )}
1077
+ <Container fluid className="p-2">
1078
+ <Row>
1079
+ <Col xs={12}>
1080
+ <Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
1081
+ </Col>
1082
+ </Row>
1083
+
1084
+ <Row>
1085
+ <Col xs={12}>
1086
+ <Table bordered hover>
1087
+ <thead>
1088
+ <tr>
1089
+ <th>#</th>
1090
+ <th>文件名</th>
1091
+ <th>状态</th>
1092
+ </tr>
1093
+ </thead>
1094
+ {tasksData && (
1095
+ <tbody>
1096
+ {tasks.map((task, index) => (
1097
+ <tr>
1098
+ <td>{task.id}</td>
1099
+ <td>{task.url.substr(task.url.indexOf('##') + 2)}</td>
1100
+ <td>{task.status == 'draft' ? <span className="text-warning">待下载</span> : <span class="text-success">正在下载中</span>}</td>
1101
+ </tr>
1102
+ ))}
1103
+ </tbody>
1104
+ )}
1105
+
1106
+ </Table>
1107
+
1108
+ </Col>
1109
+ </Row>
1110
+
1111
+ <Row>
1112
+ <Col xs={12} className="py-2">
1113
+ <Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
1114
+ </Col>
1115
+ </Row>
1116
+ </Container>
1117
+ </Modal.Body>
1118
+ <Modal.Footer className="justify-content-between">
1119
+ <Button variant="primary" onClick={() => { forceUpdate(); }}>
1120
+ 刷新
1121
+ </Button>
1122
+ <Button variant="primary" onClick={() => {
1123
+ const setting = STORE.getState().settings;
1124
+ showLoading();
1125
+ axios.post(setting.github_host, { "ref": "main", "inputs": {} }, {
1126
+ headers: {
1127
+ 'Authorization': "Bearer " + setting.github_token,
1128
+ 'Accept': 'application/vnd.github+json',
1129
+ 'X-GitHub-Api-Version': '2022-11-28',
1130
+ },
1131
+ }).then(function (response) {
1132
+ layer.msg('任务启动成功', { time: 2000, icon: 6 });
1133
+ //console.log(response);
1134
+ })
1135
+ .catch(function (error) {
1136
+ console.log(error);
1137
+ }).finally(() => {
1138
+ hideLoading();
1139
+ });
1140
+ }}>
1141
+ 开始下载
1142
+ </Button>
1143
+ <Button variant="primary" onClick={handleClose}>
1144
+ 关闭
1145
+ </Button>
1146
+ </Modal.Footer>
1147
+ </Modal>
1148
+
1149
+ </div >);
1150
+ };
1151
+
1152
+
1153
+
1154
+
1155
+
1156
+
1157
+
1158
 
1159
  const LocalTasks = () => {
1160
  const [show, setShow] = useState(false);