
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="https://www.echartsjs.com/zh/images/favicon.png">
    <title>Visual Regression Testing Tool</title>
</head>
<body>
<div id="app" style="display: none">
    <el-container id="main">
        <el-header class="header" height="50">
            <div id="logo">
                <img src="https://echarts.apache.org/zh/images/logo.png" />
                <h1>Visual Regression Testing Tool</h1>
            </div>
        </el-header>
        <el-container style="min-height: 0"> <!-- https://juejin.im/post/5c642f2ff265da2de660ecfc -->
            <el-aside width="350px">
                <div class="nav-toolbar">
                    <el-input v-model="searchString" size="mini" placeholder="Filter Tests"></el-input>
                    <div class="controls">
                        <el-checkbox :indeterminate="isSelectAllIndeterminate" v-model="allSelected" @change="handleSelectAllChange"></el-checkbox>
                        <el-button title="Sort By Failue Percentage" @click="toggleSort" size="mini" type="primary" icon="el-icon-sort">Sort</el-button>

                        <el-dropdown v-if="!running" split-button type="primary" size="mini" title="Run"
                            @click="run('selected')"
                            @command="run"
                        >
                            <i class="el-icon-caret-right"></i> Run selected ({{selectedTests.length}})
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item command="unfinished">Run unfinished ({{unfinishedTests.length}})</el-dropdown-item>
                                <el-dropdown-item command="failed">Run failed ({{failedTests.length}})</el-dropdown-item>
                                <el-dropdown-item command="all">Run all ({{fullTests.length}})</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-button-group v-else>
                            <el-button type="primary" size="mini" :loading="true">Stop</el-button>
                            <el-button title="Run Selected" @click="stopTests" size="mini" type="primary" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
                        </el-button-group>


                        <el-popover title="Configuration" class="run-configuration">
                            <div class="run-config-item">
                                <el-checkbox v-model="runConfig.noHeadless">Replay</el-checkbox>
                                <el-slider
                                    style="width: 130px;"
                                    v-model="runConfig.replaySpeed"
                                    :step="1" :min="1" :max="10"
                                    show-stops
                                    :format-tooltip="function(val) { return val + 'x'; }"
                                    :disabled="!runConfig.noHeadless"
                                ></el-slider>
                            </div>
                            <div class="run-config-item">
                                <span>Threads</span>
                                <el-slider style="width: 140px;" v-model="runConfig.threads" :step="1" :min="1" :max="8" show-stops></el-slider>
                            </div>
                            <div class="run-config-item">
                                <span>Version</span>
                                <span style="font-size: 12px; color:#afafaf">Expected</span>
                                <el-select size="mini" v-model="runConfig.expectedVersion" placeholder="Select Version"
                                    style="width: 80px;"
                                >
                                    <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
                                </el-select>
                                <span style="font-size: 12px; color: #afafaf">Actual</span>
                                <el-select size="mini" v-model="runConfig.actualVersion" placeholder="Select Version"
                                    style="width: 80px;"
                                >
                                    <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
                                </el-select>
                            </div>
                            <div class="run-config-item">
                                <span>Renderer</span>
                                <el-select size="mini" v-model="runConfig.renderer" placeholder="Select Renderer">
                                    <el-option key="canvas" label="canvas" value="canvas"></el-option>
                                    <el-option key="svg" label="svg" value="svg"></el-option>
                                </el-select>
                            </div>
                            <i slot="reference" class="el-icon-setting"></i>
                        </el-popover>

                    </div>
                </div>
                <ul class="test-list">
                    <li v-for="(test, index) in tests"
                        :title="test.name"
                        :class="{active: currentTest && currentTest.name === test.name}"
                        @click.self="goto(test.name)"
                    >
                        <span @mouseup="handleSelect(index)" @mouseup.shift="handleShiftSelect(index)">
                            <el-checkbox v-model="test.selected"></el-checkbox>
                        </span>
                        <i class="el-icon-loading" v-if="test.status === 'pending' && running"></i>

                        <el-tooltip
                            v-if="test.status === 'finished'"
                        >
                            <div slot="content">{{test.percentage}}% Passed</div>
                            <el-progress
                                type="circle"
                                :width="20"
                                :stroke-width="2"
                                :percentage="test.percentage"
                                :status="test.summary"
                            ></el-progress>
                        </el-tooltip>
                        <el-tooltip
                            v-if="test.status==='finished' && test.actualErrors && test.actualErrors.length > 0"
                        >
                            <div slot="content">{{test.actualErrors.length}} Errors</div>
                            <i class="el-icon-message-solid"
                                style="color: #F56C6C"
                            ></i>
                        </el-tooltip>
                        <a :href="'#' + test.name" class="menu-link">
                            {{test.name}}
                            <i v-if="test.actions" class="el-icon-video-camera-solid"></i>
                            <span v-if="test.actions" style="font-size: 12px;">({{test.actions}})</span>
                        </a>
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <div v-if="currentTest" class="test-result">
                    <div class="title">
                        <el-progress
                            v-if="currentTest.status === 'finished'"
                            type="circle"
                            :width="30"
                            :stroke-width="4"
                            :percentage="currentTest.percentage"
                            :status="currentTest.summary"
                            style="margin-top: 5px;"
                        ></el-progress>
                        <h3>{{currentTest.name}}</h3>
                        <el-button-group style="margin-left: 10px">
                            <el-button title="Run Selected" @click="runSingleTest(currentTest.name)" :loading="running" circle type="primary" icon="el-icon-caret-right"></el-button>
                            <el-button v-if="running" title="Run Selected" @click="stopTests" circle type="primary" icon="el-icon-close"></el-button>
                        </el-button-group>
                        <a target="_blank" :href="currentTestUrl"><i class="el-icon-link"></i>Open Demo</a>
                        <a target="_blank" :href="currentTestRecordUrl"><i class="el-icon-video-camera"></i>Record Interaction</a>
                    </div>

                    <div class="test-screenshots" v-for="(result, idx) in currentTest.results">
                        <!-- Not display title if it's same with previous -->
                        <h4 v-if="result.desc !== (currentTest.results[idx - 1] && currentTest.results[idx - 1].desc)">
                            <i class="el-icon-s-operation"></i>{{result.desc || result.name}}
                        </h4>
                        <el-row :gutter="40" class="screenshots">
                            <el-col :span="8">
                                <el-card shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>Expected - {{currentTest.expectedVersion || ''}}</span>
                                        <i title="Preview" class="el-icon-view preview" @click="preview(currentTest, 'expected')"></i>
                                    </div>
                                    <el-image :src="result.expected" :preview-src-list="[result.expected]"></el-image>
                                </el-card>
                            </el-col>

                            <el-col :span="8">
                                <el-card shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>Actual - {{currentTest.actualVersion || ''}}</span>
                                        <i title="Preview" class="el-icon-view preview" @click="preview(currentTest, 'actual')"></i>
                                    </div>
                                    <el-image :src="result.actual" :preview-src-list="[result.actual]"></el-image>
                                </el-card>
                            </el-col>

                            <el-col :span="8">
                                <el-card shadow="hover">
                                    <div slot="header" class="clearfix">
                                        <span>Diff - {{result.diffRatio.toFixed(4)}}</span>
                                    </div>
                                    <el-image :src="result.diff" :preview-src-list="[result.diff]"></el-image>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="test-errors">
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-alert title="Expected Errors" type="error" show-icon></el-alert>
                                <div class="error-item" v-for="error in currentTest.expectedErrors">{{error}}</div>
                            </el-col>
                            <el-col :span="12">
                                <el-alert title="Actual Errors" type="error" show-icon> </el-alert>
                                <div class="error-item"  v-for="error in currentTest.actualErrors">{{error}}</div>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="test-logs">
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <el-alert title="Expected Logs" type="info" show-icon> </el-alert>
                                <div class="log-item"  v-for="log in currentTest.expectedLogs">{{log}}</div>
                            </el-col>
                            <el-col :span="12">
                                <el-alert title="Actual Logs" type="info" show-icon>
                                </el-alert>
                                <div class="log-item"  v-for="log in currentTest.actualLogs">{{log}}</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <el-dialog
                    :visible.sync="showIframeDialog"
                    :center="true"
                    width="850px"
                >
                    <div slot="title">
                        {{previewTitle}}
                        <a target="_blank" :href="'../../' + previewTitle"><i class="el-icon-link"></i>Open in New Window</a>
                    </div>
                    <iframe :src="previewIframeSrc" width="800" height="600"></iframe>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>



</div>

<script src="../../../node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<!-- Element UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.11.1/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.11.1/lib/index.js"></script>

<script src="client.js"></script>

<link rel="stylesheet" href="client.css">

</body>
</html>