<!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="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"></link>
    <title>新任务 | New Task</title>
<style>
    @media (max-width: 500px) {
        #newTask{
            margin-left:10%!important;
        }
    }
</style>

</head>


<body>
    <div class="row" style="margin-top: 40px" id="newTask">
        <div class="col-md-8" style="margin:0 auto;" style="text-align: center;">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb" style="padding-left:0;background-color: white">
                    <li class="breadcrumb-item" @click="gotoHome"><a href="#">{{"Home~首页" | lang}}</a></li>
                    <li class="breadcrumb-item active" aria-current="page" style="color: black">{{"New Task~新任务" | lang}}</li>
                </ol>
            </nav>
            <h4 style="text-align: center;">{{"New Task~新任务" | lang}}</h4>
            <div class="form-group">
                <label>{{"Please Input URL (http or https):~请输入网页网址（以http或https开头）：" | lang}}  </label>
                <textarea class="form-control" id="links" placeholder="links" style="min-height: 100px;">{{"https://www.ebay.com~https://www.baidu.com" | lang}}</textarea>
            </div>
            <button type="submit" id="send" class="btn btn-primary">{{"Start Design~开始设计" | lang}}</button>
<!--            <div class="form-group" style="margin-top: 10px">-->
<!--                <label>{{"User Data Folder (If you want to load the cookie data from your local browser, please set this folder path, and then cilck the 'Start Design with cookie data from local browser' button to start design the task):~用户本地浏览器数据目录（如果需要使用本地的登录信息和cookie，请设置此目录，并点击下方“带本地数据开始设计”按钮开始设计任务）：" | lang}}</label>-->
<!--                <textarea class="form-control" id="user-data-folder" style="min-height: 50px;">{{user_data_folder}}</textarea>-->
<!--                <button type="submit" id="sendWithCookie" style="margin-top: 10px" class="btn btn-primary">{{"Start Design with cookie data from local browser~带本地数据开始设计" | lang}}</button>-->
<!--            </div>-->
            <div style="margin-top: 20px">
                <div v-if="mobile">
                    <div v-if="language=='zh'">
                        <p>提示：手机模式设计时如果没有出现操作提示框，请按键盘的Ctrl+Shift+I组合键（MacOS为Command+Option+I组合键）打开开发者工具，然后<b>双击</b>“切换设备”按钮，即可正常出现并使用操作提示框。</p>
                    </div>
                    <div v-else>
                        <p>Tip: If the operation prompt box does not appear when designing in mobile mode, please press the
                            Ctrl+Shift+I key combination (MacOS is the Command+Option+I key combination) to open the
                            developer tool, and then <b>double-click</b> the "Toggle Device Toolbar" button, you can normally appear and use the operation toolbox.</p>
                    </div>
                    <img src="../img/toggle.png" alt="" style="width: 100%;height: 100%">
                    <p></p>
                </div>

                <h5>{{"Example 1~示例1" | lang}}</h5>
                <p>{{"(Right click) Select a large product block -> Click the 'Select All' option -> Click the 'Select Child Elements' option -> Click the 'Collect Data' option, you can collect the information of all products, and will be saved by sub-field. ~ （右键）选中一个大商品块 -> 自动检测到同类型商品块 -> 点击“选中全部”选项 -> 点击“选中子元素”选项 -> 点击“采集数据”选项，即可采集到所有商品的所有信息，并分成不同字段保存。" | lang}}</p>
                <img src="../img/animation_zh.gif" alt="" style="width: 100%;height: 100%">
                <p></p>
                <h5>{{"Example 2~示例2" | lang}}</h5>
                <p>{{"（右键）选中一个商品标题，同类型标题会被自动匹配，点击“选中全部”选项 -> 点击“采集数据”选项，即可采集到所有商品的标题信息。~ (Right Click) Select a product title, the same type of title will be automatically matched, click the 'Select All' option -> Click the 'Collect Data' option, you can collect the title information of all products." | lang}}</p>
                <p>{{"同时，选中全部后如果选择“循环点击每个元素”选项，即可自动打开每个商品的详情页，然后可以再继续设置采集详情页的信息。~ At the same time, if you select the 'Loop-click every element' after selecting all, you can automatically open the details page of each product, and then set to collect the information of the details page." | lang}}</p>
                <img src="../img/animation_en.gif" alt="" style="width: 100%;height: 100%">
                <p></p>
            </div>
        </div>
    </div>
</body>

</html>
<script src="global.js"></script>
<script>
    let app = new Vue({
        el: '#newTask',
        data: {
            backEndAddressServiceWrapper: getUrlParam("backEndAddressServiceWrapper"),
            user_data_folder: "",
            mobile: getUrlParam("mobile"),
            language: getUrlParam("lang"),
        },
        methods: {
            gotoHome: function () {
                let url = "";
                if (getUrlParam("lang") == "zh") {
                    url = "taskList.html?lang=zh&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                } else {
                    url = "taskList.html?lang=en&backEndAddressServiceWrapper=" + app.$data.backEndAddressServiceWrapper
                }
                window.location.href = url;
            }
        }
    });

    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("连接已关闭...");
    };
    $("#send").click(() => {
        let msg = {
            "type": "openPage",
            "url": $("#links").val().split("\n")[0],
            "links": $("#links").val(),
        }
        message = {
            type: 3, //消息类型，传递链接
            from: 0,
            message: {
                pipe: JSON.stringify(msg), //socket id
            }
        };
        if ($("#links").val().length <= 1) {
            if(getUrlParam("lang") == "en"|| getUrlParam("lang")==""){
                alert("Please input the correct URL, start with https:// or http://");
            } else{
                alert("请输入正确的URL，以https://或http://开头");
            }
        } else {
            ws.send(JSON.stringify(message));
            message = {
                type: 1, //消息类型，传递链接
                message: {
                    id: -1,
                },
            };
            ws.send(JSON.stringify(message));
            window.location.href = $("#links").val().split("\n")[0]; //跳转链接
        }
    });

</script>
