EasySpider/ElectronJS/src/taskGrid/taskList.html

<!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>
    <title>Start</title>

</head>
<style>
    th,td{
        text-align: left;
        vertical-align: middle!important;
    }
    @media (max-width: 500px) {
        .tasklist{
            margin-left:10%!important;

        }
    }
</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">
                <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>
            <div style="margin-bottom: 10px">
                <table style="table-layout: auto;" class="table table-hover">
                    <thead>
                        <tr>
                            <th style="text-align: left">No.</th>
                            <th style="text-align: center">{{"Task Name~任务名称" | lang}}</th>
                            <th>{{"URL~网址" | lang}}</th>
                            <th v-bind:colspan="type" style="min-width: 300px">{{"Operations~操作" | lang}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="i in list.length">
                            <td style="text-align: left">{{i}}</td>
                            <td style="overflow: hidden;; max-width: 200px;text-align: center">{{list[i-1]["name"]}}</td>
                            <td style="height: 30px;overflow: hidden; max-width: 200px">{{list[i-1]["url"]}}</td>
                            <td style="text-align: left"><a href="javascript:void(0)" v-on:click="browseTask(list[i-1]['id'])">{{"Task Information~任务信息" | lang}}</a></td>
                            <td style="text-align: left;font-weight: bold" v-if="type==3"><a href="javascript:void(0)" v-on:click="modifyTask(list[i-1]['id'],list[i-1]['url'])">{{"Modify Task~修改任务" | lang}}</a></td>
                            <td style="text-align: left"><a disabled href="javascript:void(0)" v-on:click="deleteTask(list[i-1]['id'])">{{"Delete Task~删除任务" | lang}}</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>
    </div>

</body>

</html>
<script src="global.js"></script>
<script>
    var app = new Vue({
        el: '#taskList',
        data: {
            list: [],
            type: 3, //记录服务行为
            mobile: getUrlParam("mobile"),
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
        },
        methods: {
            newTask: function (){
                window.location.href = "newTask.html?lang="+getUrlParam("lang")+"&mobile="+getUrlParam("mobile")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper;
            },
            modifyTask: function(id, url) {
                let message = { //显示flowchart
                    type: 1, //消息类型，传递链接
                    message: {
                        "id": id,
                    }
                };
                ws.send(JSON.stringify(message));
                window.location.href = url; //跳转链接
            },
            browseTask: function(id) {
                window.location.href = "taskInfo.html?type="+getUrlParam("type")+"&id=" + id + "&lang="+getUrlParam("lang")+"&wsport="+getUrlParam("wsport")+"&backEndAddressServiceWrapper="+ app.$data.backEndAddressServiceWrapper; //跳转链接
            },
            deleteTask: function(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.")
                }
            },
        }
    });

    var 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>