updated Multi Language for a few pages

This commit is contained in:
Marvin Zhang
2019-03-26 19:33:03 +08:00
parent d6cd8ff8f7
commit 1efc5199f9
12 changed files with 174 additions and 100 deletions

View File

@@ -17,7 +17,7 @@
</div>
<!--action-->
<div class="action-container">
<el-button type="success" size="mini">Choose Folder</el-button>
<el-button type="success" size="mini">{{$t('Choose Folder')}}</el-button>
</div>
</div>

View File

@@ -6,23 +6,23 @@
ref="nodeForm"
class="node-form"
label-position="right">
<el-form-item label="Node Name">
<el-input v-model="nodeForm.name" placeholder="Node Name" disabled></el-input>
<el-form-item :label="$t('Node Name')">
<el-input v-model="nodeForm.name" :placeholder="$t('Node Name')" disabled></el-input>
</el-form-item>
<el-form-item label="Node IP" prop="ip" required>
<el-input v-model="nodeForm.ip" placeholder="Node IP" :disabled="isView"></el-input>
<el-form-item :label="$t('Node IP')" prop="ip" required>
<el-input v-model="nodeForm.ip" :placeholder="$t('Node IP')" :disabled="isView"></el-input>
</el-form-item>
<el-form-item label="Node Port" prop="port" required>
<el-input v-model="nodeForm.port" placeholder="Node Port" :disabled="isView"></el-input>
<el-form-item :label="$t('Node Port')" prop="port" required>
<el-input v-model="nodeForm.port" :placeholder="$t('Node Port')" :disabled="isView"></el-input>
</el-form-item>
<el-form-item label="Description">
<el-input type="textarea" v-model="nodeForm.description" placeholder="Description" :disabled="isView">
<el-form-item :label="$t('Description')">
<el-input type="textarea" v-model="nodeForm.description" :placeholder="$t('Description')" :disabled="isView">
</el-input>
</el-form-item>
</el-form>
</el-row>
<el-row class="button-container" v-if="!isView">
<el-button type="success" @click="onSave">Save</el-button>
<el-button type="success" @click="onSave">{{$t('Save')}}</el-button>
</el-row>
</div>
</template>

View File

@@ -6,64 +6,64 @@
ref="spiderForm"
class="spider-form"
label-position="right">
<el-form-item label="Spider ID">
<el-input v-model="spiderForm._id" placeholder="Spider ID" disabled></el-input>
<el-form-item :label="$t('Spider ID')">
<el-input v-model="spiderForm._id" :placeholder="$t('Spider ID')" disabled></el-input>
</el-form-item>
<el-form-item label="Spider Name">
<el-input v-model="spiderForm.name" placeholder="Spider Name" :disabled="isView"></el-input>
<el-form-item :label="$t('Spider Name')">
<el-input v-model="spiderForm.name" :placeholder="$t('Spider Name')" :disabled="isView"></el-input>
</el-form-item>
<el-form-item label="Source Folder">
<el-input v-model="spiderForm.src" placeholder="Source Folder" disabled></el-input>
<el-form-item :label="$t('Source Folder')">
<el-input v-model="spiderForm.src" :placeholder="$t('Source Folder')" disabled></el-input>
</el-form-item>
<el-form-item label="Execute Command" prop="cmd" required :inline-message="true">
<el-input v-model="spiderForm.cmd" placeholder="Execute Command"
<el-form-item :label="$t('Execute Command')" prop="cmd" required :inline-message="true">
<el-input v-model="spiderForm.cmd" :placeholder="$t('Execute Command')"
:disabled="isView"></el-input>
</el-form-item>
<el-form-item label="Results Collection">
<el-input v-model="spiderForm.col" placeholder="Results Collection"
<el-form-item :label="$t('Results Collection')">
<el-input v-model="spiderForm.col" :placeholder="$t('Results Collection')"
:disabled="isView"></el-input>
</el-form-item>
<el-form-item label="Spider Type">
<el-select v-model="spiderForm.type" placeholder="Select Spider Type" :disabled="isView" clearable>
<el-form-item :label="$t('Spider Type')">
<el-select v-model="spiderForm.type" :placeholder="$t('Spider Type')" :disabled="isView" clearable>
<el-option value="scrapy" label="Scrapy"></el-option>
<el-option value="pyspider" label="PySpider"></el-option>
<el-option value="webmagic" label="WebMagic"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Language">
<el-select v-model="spiderForm.lang" placeholder="Select Language" :disabled="isView" clearable>
<el-form-item :label="$t('Language')">
<el-select v-model="spiderForm.lang" :placeholder="$t('Language')" :disabled="isView" clearable>
<el-option value="python" label="Python"></el-option>
<el-option value="javascript" label="JavaScript"></el-option>
<el-option value="java" label="Java"></el-option>
<el-option value="go" label="Go"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Schedule Enabled">
<el-form-item :label="$t('Schedule Enabled')">
<el-switch v-model="spiderForm.cron_enabled" :disabled="isView">
</el-switch>
</el-form-item>
<el-form-item label="Schedule Cron" v-if="spiderForm.cron_enabled"
<el-form-item :label="$t('Schedule Cron')" v-if="spiderForm.cron_enabled"
prop="cron"
:rules="cronRules"
:inline-message="true">
<template slot="label">
<el-tooltip content="Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]"
<el-tooltip :content="$t('Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]')"
placement="top">
<span>
Schedule Cron
{{$t('Schedule Cron')}}
<i class="fa fa-exclamation-circle"></i>
</span>
</el-tooltip>
</template>
<el-input v-model="spiderForm.cron" placeholder="Schedule Cron"
<el-input v-model="spiderForm.cron" :placeholder="$t('Schedule Cron')"
:disabled="isView"></el-input>
</el-form-item>
</el-form>
</el-row>
<el-row class="button-container" v-if="!isView">
<el-button type="danger" @click="onRun">Run</el-button>
<el-button type="primary" @click="onDeploy">Deploy</el-button>
<el-button type="success" @click="onSave">Save</el-button>
<el-button type="danger" @click="onRun">{{$t('Run')}}</el-button>
<el-button type="primary" @click="onDeploy">{{$t('Deploy')}}</el-button>
<el-button type="success" @click="onSave">{{$t('Save')}}</el-button>
</el-row>
</div>
</template>

View File

@@ -3,12 +3,12 @@
<el-col :span="12">
<!--last tasks-->
<el-row>
<task-table-view title="Latest Tasks"/>
<task-table-view :title="$t('Latest Tasks')"/>
</el-row>
<!--last deploys-->
<el-row v-if="false">
<deploy-table-view title="Latest Deploys"/>
<deploy-table-view :title="$t('Latest Deploys')"/>
</el-row>
</el-col>

View File

@@ -2,7 +2,7 @@
<el-row>
<el-col :span="12" style="padding-right: 20px;">
<el-row>
<h4 class="title">Task Info</h4>
<h4 class="title">{{$t('Task Info')}}</h4>
<task-info-view/>
</el-row>
<el-row style="border-bottom:1px solid #e4e7ed;margin:0 0 20px 0;padding-bottom:20px;"/>
@@ -10,11 +10,11 @@
<el-col :span="12">
<el-row>
<h4 class="title spider-title" @click="onClickSpiderTitle">Spider Info</h4>
<h4 class="title spider-title" @click="onClickSpiderTitle">{{$t('Spider Info')}}</h4>
<spider-info-view :is-view="true"/>
</el-row>
<el-row>
<h4 class="title node-title" @click="onClickNodeTitle">Node Info</h4>
<h4 class="title node-title" @click="onClickNodeTitle">{{$t('Node Info')}}</h4>
<node-info-view :is-view="true"/>
</el-row>
</el-col>

View File

@@ -5,28 +5,28 @@
<el-button type="success" plain class="small-btn" size="mini" icon="fa fa-refresh" @click="onRefresh"></el-button>
</el-row>
<el-table border height="480px" :data="taskList">
<el-table-column property="node" label="Node" width="220" align="center">
<el-table-column property="node" :label="$t('Node')" width="220" align="center">
<template slot-scope="scope">
<a class="a-tag" @click="onClickNode(scope.row)">{{scope.row.node_id}}</a>
</template>
</el-table-column>
<el-table-column property="spider_name" label="Spider" width="80" align="center">
<el-table-column property="spider_name" :label="$t('Spider')" width="80" align="center">
<template slot-scope="scope">
<a class="a-tag" @click="onClickSpider(scope.row)">{{scope.row.spider_name}}</a>
</template>
</el-table-column>
<el-table-column label="Status"
<el-table-column :label="$t('Status')"
align="center"
width="100">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'SUCCESS'">SUCCESS</el-tag>
<el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">STARTED</el-tag>
<el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">FAILURE</el-tag>
<el-tag type="info" v-else>{{scope.row['status']}}</el-tag>
<el-tag type="success" v-if="scope.row.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
<el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
<el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
<el-tag type="info" v-else>{{$t(scope.row['status'])}}</el-tag>
</template>
</el-table-column>
<!--<el-table-column property="create_ts" label="Create Time" width="auto" align="center"></el-table-column>-->
<el-table-column property="create_ts" label="Create Time" width="auto" align="center">
<el-table-column property="create_ts" :label="$t('Create Time')" width="auto" align="center">
<template slot-scope="scope">
<a href="javascript:" class="a-tag" @click="onClickTask(scope.row)">{{scope.row.create_ts}}</a>
</template>

View File

@@ -1,16 +1,87 @@
export default {
// 标签
Overview: '概览',
Files: '文件',
'Deployed Spiders': '已部署爬虫',
'Log': '日志',
'Results': '结果',
// 选择
Spider: '爬虫',
// 块标题
'Latest Tasks': '最近任务',
'Latest Deploys': '最近部署',
// 状态
PENDING: '待定',
STARTED: '已开始',
SUCCESS: '成功',
FAILURE: '错误',
UNAVAILABLE: '未知',
// 操作
Run: '运行',
Deploy: '部署',
Save: '保存',
Cancel: '取消',
Import: '导入',
Submit: '提交',
'Import Spiders': '导入爬虫',
'Deploy All': '部署所有爬虫',
Refresh: '刷新',
View: '查看',
Edit: '编辑',
Remove: '删除',
// 节点
'Node Info': '节点信息',
'Node Name': '节点名称',
'Node IP': '节点IP',
'Node Port': '节点端口',
'Description': '描述',
// 任务
'Task Info': '任务信息',
'Task ID': '任务ID',
'Status': '状态',
'Log File Path': '日志文件路径',
'Create Timestamp': '创建时间',
'Finish Timestamp': '完成时间',
'Duration (sec)': '用时(秒)',
'Error Message': '错误信息'
'Error Message': '错误信息',
// 任务列表
'Node': '节点',
'Create Time': '创建时间',
'Start Time': '开始时间',
'Finish Time': '结束时间',
// 爬虫
'Spider Info': '爬虫信息',
'Spider ID': '爬虫ID',
'Spider Name': '爬虫名称',
'Source Folder': '代码目录',
'Execute Command': '执行命令',
'Results Collection': '结果集',
'Spider Type': '爬虫类型',
'Language': '语言',
'Schedule Enabled': '是否开启定时任务',
'Schedule Cron': '定时任务',
// 爬虫列表
'Name': '名称',
'Last Run': '上次运行',
'Action': '操作',
// 文件
'Choose Folder': '选择文件',
// 导入
'Import Spider': '导入爬虫',
'Source URL': '来源URL',
'Source Type': '来源类别',
// 搜索
Search: '搜索',
}

View File

@@ -2,7 +2,7 @@
<div class="app-container">
<!--selector-->
<div class="selector">
<label class="label">Node: </label>
<label class="label">{{$t('Node')}}: </label>
<el-select v-model="nodeForm._id" @change="onNodeChange">
<el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>
</el-select>
@@ -10,11 +10,11 @@
<!--tabs-->
<el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
<el-tab-pane label="Overview" name="overview">
<el-tab-pane :label="$t('Overview')" name="overview">
<node-overview></node-overview>
</el-tab-pane>
<el-tab-pane label="Deployed Spiders" name="spiders" v-if="false">
Deployed Spiders
<el-tab-pane :label="$t('Deployed Spiders')" name="spiders" v-if="false">
{{$t('Deployed Spiders')}}
</el-tab-pane>
</el-tabs>
</div>
@@ -79,6 +79,11 @@ export default {
.selector .el-select {
padding-left: 10px;
}
.label {
width: 100px;
text-align: right;
}
</style>
<style lang="scss">
.selector {

View File

@@ -2,7 +2,7 @@
<div class="app-container">
<!--selector-->
<div class="selector">
<label class="label">Spider: </label>
<label class="label">{{$t('Spider')}}: </label>
<el-select v-model="spiderForm._id" @change="onSpiderChange">
<el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
</el-select>
@@ -10,10 +10,10 @@
<!--tabs-->
<el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
<el-tab-pane label="Overview" name="overview">
<el-tab-pane :label="$t('Overview')" name="overview">
<spider-overview/>
</el-tab-pane>
<el-tab-pane label="Files" name="files">
<el-tab-pane :label="$t('Files')" name="files">
<file-list/>
</el-tab-pane>
</el-tabs>
@@ -91,4 +91,9 @@ export default {
.selector .el-select {
padding-left: 10px;
}
.label {
text-align: right;
width: 80px;
}
</style>

View File

@@ -2,7 +2,7 @@
<div class="app-container">
<!--add popup-->
<el-dialog
title="Import Spider"
:title="$t('Import Spider')"
:visible.sync="dialogVisible"
width="60%"
:before-close="onDialogClose">
@@ -10,10 +10,10 @@
:model="importForm"
ref="importForm"
label-position="right">
<el-form-item label="Source URL" prop="url" required>
<el-input v-model="importForm.url" placeholder="Source URL"></el-input>
<el-form-item :label="$t('Source URL')" prop="url" required>
<el-input v-model="importForm.url" :placeholder="$t('Source URL')"></el-input>
</el-form-item>
<el-form-item label="Source Type" prop="type" required>
<el-form-item :label="$t('Source Type')" prop="type" required>
<el-select v-model="importForm.type" placeholder="Source Type">
<el-option value="github" label="Github"></el-option>
<el-option value="gitlab" label="Gitlab"></el-option>
@@ -22,38 +22,31 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="onCancel">Cancel</el-button>
<el-button v-loading="importLoading" type="primary" @click="onImport">Import</el-button>
<el-button @click="onCancel">{{$t('Cancel')}}</el-button>
<el-button v-loading="importLoading" type="primary" @click="onImport">{{$t('Import')}}</el-button>
</span>
</el-dialog>
<!--filter-->
<div class="filter">
<el-input prefix-icon="el-icon-search"
placeholder="Search"
:placeholder="$t('Search')"
class="filter-search"
v-model="filter.keyword"
@change="onSearch">
</el-input>
<div class="right">
<el-button type="primary" icon="fa fa-cloud" @click="onDeployAll">
Deploy All
{{$t('Deploy All')}}
</el-button>
<el-button type="primary" icon="fa fa-download" @click="openImportDialog">
Import Spiders
{{$t('Import Spiders')}}
</el-button>
<el-button type="success"
icon="el-icon-refresh"
class="btn refresh"
@click="onRefresh">
Refresh
</el-button>
<el-button type="primary"
v-if="false"
icon="el-icon-plus"
class="add"
@click="onAdd">
Add Spider
{{$t('Refresh')}}
</el-button>
</div>
</div>
@@ -66,7 +59,7 @@
<template v-for="col in columns">
<el-table-column v-if="col.name === 'type'"
:key="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
@@ -79,7 +72,7 @@
</el-table-column>
<el-table-column v-else-if="col.name === 'lang'"
:key="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
@@ -94,27 +87,27 @@
<el-table-column v-else
:key="col.name"
:property="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
</el-table-column>
</template>
<el-table-column label="Action" align="center" width="250">
<el-table-column :label="$t('Action')" align="center" width="250">
<template slot-scope="scope">
<el-tooltip content="View" placement="top">
<el-tooltip :content="$t('View')" placement="top">
<el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="Edit" placement="top">
<el-tooltip :content="$t('Edit')" placement="top">
<el-button type="warning" icon="el-icon-edit" size="mini" @click="onView(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="Remove" placement="top">
<el-tooltip :content="$t('Remove')" placement="top">
<el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="Deploy" placement="top">
<el-tooltip :content="$t('Deploy')" placement="top">
<el-button type="primary" icon="fa fa-cloud" size="mini" @click="onDeploy(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="Run" placement="top">
<el-tooltip :content="$t('Run')" placement="top">
<el-button type="success" icon="fa fa-bug" size="mini" @click="onCrawl(scope.row)"></el-button>
</el-tooltip>
</template>

View File

@@ -2,17 +2,17 @@
<div class="app-container">
<!--tabs-->
<el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
<el-tab-pane label="Overview" name="overview">
<el-tab-pane :label="$t('Overview')" name="overview">
<task-overview/>
</el-tab-pane>
<el-tab-pane label="Log" name="log">
<el-tab-pane :label="$t('Log')" name="log">
<div class="log-view">
<pre>
{{taskLog}}
</pre>
</div>
</el-tab-pane>
<el-tab-pane label="Results" name="results">
<el-tab-pane :label="$t('Results')" name="results">
<general-table-view :data="taskResultsData"
:columns="taskResultsColumns"
:page-num="resultsPageNum"

View File

@@ -3,7 +3,7 @@
<!--filter-->
<div class="filter">
<el-input prefix-icon="el-icon-search"
placeholder="Search"
:placeholder="$t('Search')"
class="filter-search"
v-model="filter.keyword"
@change="onSearch">
@@ -13,7 +13,7 @@
icon="el-icon-refresh"
class="refresh"
@click="onRefresh">
Refresh
{{$t('Refresh')}}
</el-button>
</div>
</div>
@@ -26,7 +26,7 @@
<template v-for="col in columns">
<el-table-column v-if="col.name === 'spider_name'"
:key="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
@@ -36,7 +36,7 @@
</el-table-column>
<el-table-column v-else-if="col.name === 'node_id'"
:key="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
@@ -46,29 +46,29 @@
</el-table-column>
<el-table-column v-else-if="col.name === 'status'"
:key="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.status === 'SUCCESS'">SUCCESS</el-tag>
<el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">STARTED</el-tag>
<el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">FAILURE</el-tag>
<el-tag type="info" v-else>{{scope.row[col.name]}}</el-tag>
<el-tag type="success" v-if="scope.row.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
<el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
<el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
<el-tag type="info" v-else>{{$t(scope.row[col.name])}}</el-tag>
</template>
</el-table-column>
<el-table-column v-else
:key="col.name"
:property="col.name"
:label="col.label"
:label="$t(col.label)"
:sortable="col.sortable"
align="center"
:width="col.width">
</el-table-column>
</template>
<el-table-column label="Action" align="center" width="auto">
<el-table-column :label="$t('Action')" align="center" width="auto">
<template slot-scope="scope">
<el-tooltip content="View" placement="top">
<el-tooltip :content="$t('View')" placement="top">
<el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
</el-tooltip>
</template>
@@ -150,12 +150,12 @@ export default {
}
return false
})
// .filter((d, index) => {
// // pagination
// const pageNum = this.pageNum
// const pageSize = this.pageSize
// return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
// })
// .filter((d, index) => {
// // pagination
// const pageNum = this.pageNum
// const pageSize = this.pageSize
// return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
// })
}
},
methods: {