<!doctype html>
<html lang="en">

<head>
    <script src="jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <link rel="stylesheet" href="element-ui/index.css"></link>
    <script src="element-ui/index.js"></script>
    <title>任务列表 | Task List</title>
</head>
<style>
    th, td {
        text-align: left;
        vertical-align: middle !important;
    }

    @media (max-width: 500px) {
        .tasklist {
            margin-left: 10% !important;

        }
    }

    .search-header {
        display: flex;
        justify-content: flex-end; /* Right align the search box */
        align-items: center;
    }

    .search-input {
        /*margin-right: 8px; !* Optional: Adjust spacing between input and button *!*/
    }

    .task-links {
        display: flex;
        justify-content: space-between; /* Spread links evenly */
    }
</style>
<body>
<div class="row" style="margin-top: 40px;">
    <div style="margin:0 auto; min-width: 70%;" id="taskList" class="tasklist">
        <h4 style="text-align: center;">{{"Task List~任务列表" | lang}}</h4>
        <h5 style="text-align: center;"
            v-if="mobile==1">{{"View this table by direction keys on keyboard~按键盘方向键浏览此表格" | lang}}</h5>
        <p><a v-if="type==3" href="javascript:void(0)" v-on:click="newTask"
              class="btn btn-primary">{{"New Task~创建新任务" | lang}}</a></p>
        <div v-if="type != 3" style="margin-bottom: 20px">
            <div style="margin-bottom: 5px">{{"提示：下方的官方教程和答疑平台均在Github，可能出现访问速度慢的问题，请耐心等待。~" | lang}}
            </div>
            <a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/wiki"
               target="_blank">{{"Software Documentation~软件使用说明文档" | lang}}</a>
            <a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/issues?q=is%3Aissue"
               target="_blank">{{"Ask questions here~官方答疑平台" | lang}}</a>
            <a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/issues/22"
               target="_blank">{{"See how to run task by schedule~定时执行任务教程" | lang}}</a>
            <!--                <a class="btn btn-primary" href="https://github.com/NaiboWang/EasySpider/wiki/Run-multiple-tasks-in-parallel" target="_blank">{{"See how to run multiple tasks in parallel~同时执行多个任务教程" | lang}}</a>-->
        </div>
        <el-table
                style="width: 100%"
                :empty-text="LANG('No Task~暂无任务')"
                :data="list.filter(data => !search || (data.name.toLowerCase().includes(search.toLowerCase())) || (data.url.toLowerCase().includes(search.toLowerCase())) || (data.links.includes(search.toLowerCase())) || (data.desc.includes(search.toLowerCase())) || (data.id.toString().includes(search.toLowerCase())))"
                :default-sort="{prop: 'mtime', order: 'descending'}"
        >

            <el-table-column
                    prop="id"
                    :label="LANG('Task ID~任务ID')"
                    sortable
                    width="120"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    :label="LANG('Task Name~任务名称')"
                    sortable
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="URL"
                    sortable
            >
            </el-table-column>
            <!--                <el-table-column-->
            <!--                  prop="mtime"-->
            <!--                  :label="LANG('Update Time~更新时间')"-->
            <!--                  sortable-->
            <!--                  :formatter="formatDate"-->
            <!--                  width="170"-->
            <!--                >-->
            </el-table-column>
            <el-table-column
                    width="350"
                    align="center">
                <!-- Header template for the search input -->
                <template slot="header" slot-scope="scope">
                    <div class="search-header">
                        <!-- Search input aligned to the right -->
                        <el-input
                                v-model="search"
                                class="search-input"
                                prefix-icon="el-icon-search"
                                :placeholder="LANG('Please input keywords to search~请输入关键词搜索')">
                        </el-input>
                        <!--                          <el-button icon="el-icon-search"></el-button>-->
                    </div>
                </template>
                <template slot-scope="scope">
                    <!-- Use flex container to justify content space-around -->
                    <div class="task-links">
                        <a href="javascript:void(0)" v-on:click="browseTask(scope.$index, scope.row)">{{ "View~任务信息"
                            | lang }}</a>
                        <a href="javascript:void(0)" v-if="type==3" v-on:click="modifyTask(scope.$index, scope.row)">{{
                            "Modify~修改任务" | lang }}</a>
                        <a href="javascript:void(0)"
                           v-on:dblclick="deleteTask(scope.$index, scope.row)">{{ "Delete (Double Click)~删除任务（双击）" | lang }}</a>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</body>

</html>
<script src="global.js"></script>
<script>
    let app = new Vue({
        el: '#taskList',
        data: {
            search: '',
            list: [],
            type: 3, //记录服务行为
            mobile: getUrlParam("mobile"),
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
        },
        methods: {
            formatDate: function (row, column) {
                //2023-01-01 00:00:00
                let date = row[column.property];
                // 2023-12-26T12:44:32.599Z
                let original_time = row.mtime;
                let year = original_time.substring(0, 4);
                let month = original_time.substring(5, 7);
                let day = original_time.substring(8, 10);
                let hour = original_time.substring(11, 13);
                let minute = original_time.substring(14, 16);
                let second = original_time.substring(17, 19);
                return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            },
            newTask: function () {
                window.location.href = "newTask.html?lang=" + getUrlParam("lang") + "&mobile=" + getUrlParam("mobile") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper;
            },
            LANG: function (text) {
                if (getUrlParam("lang") == "en" || getUrlParam("lang") == "") {
                    return text.split("~")[0];
                } else if (getUrlParam("lang") == "zh") {
                    return text.split("~")[1];
                }
            },
            modifyTask: function (index, row) {
                let id = row.id;
                let url = row.links.split("\n")[0];
                console.log(index, row)
                let message = { //显示flowchart
                    type: 1, //消息类型，传递链接
                    message: {
                        "id": id,
                    }
                };
                ws.send(JSON.stringify(message));
                window.location.href = url; //跳转链接
            },
            browseTask: function (index, row) {
                let id = row.id;
                window.location.href = "taskInfo.html?type=" + getUrlParam("type") + "&id=" + id + "&lang=" + getUrlParam("lang") + "&wsport=" + getUrlParam("wsport") + "&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper; //跳转链接
            },
            deleteTask: function (index, row) {
                let id = row.id;
                // let text = "Are you sure to remove the selected task?";
                // if (getUrlParam("lang") == "en"|| getUrlParam("lang")=="") {
                //     text = "Are you sure to remove the selected task?";
                // } else if (getUrlParam("lang") == "zh") {
                //     text = "确定要删除选中的任务吗？";
                // }
                // if (confirm(text)) {
                $.get(app.$data.backEndAddressServiceWrapper + "/deleteTask?id=" + id, function (res) {
                    $.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
                        result = re.sort(desc);
                        app.$data.list = result;
                    });
                });
                // alert("Sorry, the task cannot be deleted since the system is a demo system for paper reviewers, please contact the author (naibowang@u.nus.edu) to remove it.")
                // }
            },
        }
    });

    let desc = function (x, y) {
        return (x["id"] < y["id"]) ? 1 : -1
    }
    $.get(app.$data.backEndAddressServiceWrapper + "/queryTasks", function (re) {
        // result = re.sort(desc);
        app.$data.list = re;
        if (getUrlParam("type") == "1") {
            app.$data.type = 2;
        }
    });
    ws = new WebSocket("ws://localhost:" + getUrlParam("wsport"));
    ws.onopen = function () {
        // Web Socket 已连接上，使用 send() 方法发送数据
        console.log("已连接");
        message = {
            type: 0, //消息类型，0代表链接操作
            message: {
                id: 1, //socket id
            }
        };
        this.send(JSON.stringify(message));
    };
    ws.onclose = function () {
        // 关闭 websocket
        console.log("连接已关闭...");
    };

</script>