UI improvements on buttons (#67)

scrapydweb/static/v120/css/style.css

@@ -489,46 +489,30 @@ table>tbody tr:last-child {
  padding-right: 10px;
 }
 
-.state.normal{
+.state.normal, .button.normal{
  background: #409EFF;
 }
 
-.state.safe {
+.state.safe, .button.safe {
  background: #67c23a;
 }
 
-.state.delete {
+.state.delete, .button.delete {
  background: #909399;
 }
 
-.state.warning {
+.state.warning, .button.warning {
  background: #feb324;
 }
 
-.state.danger {
+.state.danger, .button.danger {
  background: #fd6b6e;
 }
 
-
-.button.normal{
- background: #409EFF;
+.state.multinode, .button.multinode {
+ background: #7E57C2;
 }
 
-.button.safe {
- background: #67c23a;
-}
-
-.button.delete {
- background: #909399;
-}
-
-.button.warning {
- background: #feb324;
-}
-
-.button.danger {
- background: #fd6b6e;
-}
 
 
 

scrapydweb/static/v120/css/style_mobileui.css

@@ -134,6 +134,10 @@ nav {
  background: #feb324;
 }
 
+.state.multinode, .button.multinode{
+ background: #7E57C2;
+}
+
 
 
 

scrapydweb/templates/scrapydweb/jobs.html

@@ -90,7 +90,7 @@ <h3 id="logparser_alert" style="color: red; display: none;"></h3>
  <el-table-column prop="action" label="Action" sortable align="center" width="170" :sort-method="sortByIndex">
  <template slot-scope="scope">
  <span style="color: red;" :style="{ display: scope.row.display_kill }">Kill {{scope.row.pid}} manually</span>
- <a class="state warning" :style="{ display: scope.row.display_action }" :href="scope.row.url_multinode">multinode</a>
+ <a class="state multinode" :style="{ display: scope.row.display_action }" :href="scope.row.url_multinode">multinode</a>
  <a :class="scope.row.action_class" :style="{ display: scope.row.display_action }" @click="handleActionClick(scope.row.url_action)">{{scope.row.action}}</a>
  </template>
  </el-table-column>

scrapydweb/templates/scrapydweb/jobs_classic.html

@@ -57,7 +57,7 @@ <h3>Pending ({{ pending_jobs|length }})</h3>
  <td>{{ job['job'] }}</td>
  <td id="pending_cancel_{{ loop.index }}">
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
- <a class="state warning" style="margin-right: 5px;" href="{{ job['url_multinode_stop'] }}">multinode</a>
+ <a class="state multinode" style="margin-right: 5px;" href="{{ job['url_multinode_stop'] }}">multinode</a>
  {% endif %}
  <a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false, id='pending_cancel_{{ loop.index }}');">Cancel</a>
  </td>
@@ -114,7 +114,7 @@ <h3>Running ({{ running_jobs|length }}) <strong id="logparser_last_update" style
  {% endif %}
  <td id="running_stop_{{ loop.index }}">
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
- <a class="state warning" style="margin-right: 5px;" href="{{ job['url_multinode_stop'] }}">multinode</a>
+ <a class="state multinode" style="margin-right: 5px;" href="{{ job['url_multinode_stop'] }}">multinode</a>
  {% endif %}
  <a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false, id='running_stop_{{ loop.index }}');">Stop</a>
  </td>
@@ -174,9 +174,8 @@ <h3>Finished ({{ finished_jobs|length }}) <strong style="color: red;">DESC</stro
  {% endif %}
  <td>
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
- <a class="state safe" style="margin-right: 5px;" href="{{ job['url_multinode_run'] }}">multinode</a>
+ <a class="state multinode" style="margin-right: 5px;" href="{{ job['url_multinode_run'] }}">multinode</a>
  {% endif %}
-
  <a class="state safe" href="{{ job['url_schedule'] }}">Start</a>
  </td>
  </tr>

scrapydweb/templates/scrapydweb/jobs_mobileui.html

@@ -49,7 +49,7 @@
 
 {% block neck %}
 <a id="switch_table_style" class="button normal" href="javascript:;">Restyle table</a>
-<a class="button warning" target="_blank" href="http:https://{{ SCRAPYD_SERVERS[node-1] }}">Scrapyd server</a>
+<a class="button multinode" target="_blank" href="http:https://{{ SCRAPYD_SERVERS[node-1] }}">Scrapyd server</a>
 {% endblock %}
 
 

scrapydweb/templates/scrapydweb/listspiders.html

@@ -3,7 +3,7 @@
  <tr style="margin: 10px 0;">
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
  <td style="width: 100px;">
- <a class="state safe" href="{{ url_multinode_schedule }}">multinode</a>
+ <a class="state multinode" href="{{ url_multinode_schedule }}">multinode</a>
  </td>
  {% endif %}
 

scrapydweb/templates/scrapydweb/listversions.html

@@ -1,7 +1,7 @@
 <div class="table wrap">
  <div style="margin-bottom: 15px;">
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
- <a class="button danger"
+ <a class="button multinode"
  href="{{ url_multinode_delproject }}">
  multinode
  </a>
@@ -35,7 +35,7 @@
  </td>
  <td id="delversion{{ project + version }}">
  {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
- <a class="state delete" href="{{ url_multinode_delversion }}">multinode</a>
+ <a class="state multinode" href="{{ url_multinode_delversion }}">multinode</a>
  {% endif %}
 
  <a class="state delete" href="javascript:;"

scrapydweb/templates/scrapydweb/task_results.html

@@ -50,12 +50,12 @@ <h2>
  :default-sort="{prop: 'execute_time', order: 'descending'}"
  style="width: 100%;"
  :size="size"
- 
+
  highlight-current-row
  @current-change="handleSelectRow"
  >
  <!-- :fit=false -->
- 
+
  <el-table-column prop="index" label="Index" sortable align="center" width="100"></el-table-column>
  <!-- <el-table-column prop="id" label="#" sortable align="center" width="80"></el-table-column> -->
  <el-table-column prop="execute_time" label="Execute time" sortable align="center" width="155"></el-table-column>
@@ -66,28 +66,33 @@ <h2>
  <template slot-scope="scope"><span :class="scope.row.pass_count_class">{{scope.row.pass_count}}</span></template>
  </el-table-column>
  <el-table-column prop="task_job_results" label="Job results" sortable :sort-method="sortJobResults" :sort-orders="sortOrders" align="center" width="115">
- <template slot-scope="scope"><a :class="scope.row.task_job_results_class" :href="scope.row.url_task_job_results">Details</a></template>
+ <template slot-scope="scope">
+ <a :class="scope.row.task_job_results_class" :href="scope.row.url_task_job_results">
+ <i class="el-icon-loading" :style="{ display: scope.row.task_job_results_display_loading }"></i>
+ Details
+ </a>
+ </template>
  </el-table-column>
  <el-table-column prop="action" label="Action" sortable :sort-method="sortJobResults" :sort-orders="sortOrders" align="left" min-width="90">
  <template slot-scope="scope"><a class="state delete" @click="deleteRow(scope.$index, tableData)">Delete</a></template>
  </el-table-column>
  </el-table>
- 
+
  <el-pagination
  background
  :total='{{ task_results.total }}'
  :page-sizes="[10, 100, 1000]"
  :page-size='{{ task_results.per_page }}'
  :page-count='{{ task_results.pages }}'
  :current-page.sync="currentPage"
- 
+
  :pager-count="11"
  layout="total, sizes, prev, pager, next"
- 
+
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  >
- </el-pagination> 
+ </el-pagination>
 </template>
 </div>
 
@@ -110,12 +115,12 @@ <h2>
  pass_count: {{ task_result.pass_count }},
  fail_count_class: {% if task_result.fail_count > 0 %}'count_warn'{% else %}''{% endif %},
  pass_count_class: {% if task_result.pass_count > 0 %}''{% else %}'count_warn'{% endif %},
- 
+
  url_action: '{{ task_result.url_action }}',
- 
+
  url_task_job_results: '{{ task_result.url_task_job_results }}',
  task_job_results_class: {% if task_result.fail_count %}'state danger'{% elif task_result.pass_count %}'state safe'{% else %}'state warning'{% endif %},
-
+ task_job_results_display_loading: {% if task_result.fail_count or task_result.pass_count %}'none'{% else %}''{% endif %},
  },
  {% endfor %}
  ],

scrapydweb/templates/scrapydweb/tasks.html

@@ -21,7 +21,7 @@
  .demo-table-expand .el-form-item label{text-align: right;}
  .demo-table-expand .el-form-item .el-form-item__content{
  margin-left: 30px;
- text-align: left; 
+ text-align: left;
  width: 200px;
  }
  </style>
@@ -67,7 +67,7 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
  :max-height="maxHeight"
  :size="size"
  @cell-click="handleCellClick"
- 
+
  highlight-current-row
  @current-change="handleSelectRow"
  >
@@ -81,35 +81,35 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
  <el-form-item label="create_time"><span>{{props.row.create_time}}</span></el-form-item>
  <el-form-item label="year"><span>{{props.row.year}}</span></el-form-item>
  <el-form-item label="start_date"><span>{{props.row.start_date}}</span></el-form-item>
- 
+
  <el-form-item label="update_time"><span>{{props.row.update_time}}</span></el-form-item>
  <el-form-item label="month"><span>{{props.row.month}}</span></el-form-item>
  <el-form-item label="end_date"><span>{{props.row.end_date}}</span></el-form-item>
- 
+
  <el-form-item label="version"><span>{{props.row.version}}</span></el-form-item>
  <el-form-item label="day"><span>{{props.row.day}}</span></el-form-item>
  <el-form-item label="timezone"><span>{{props.row.timezone}}</span></el-form-item>
- 
+
  <el-form-item label="jobid"><span>{{props.row.jobid}}</span></el-form-item>
  <el-form-item label="week"><span>{{props.row.week}}</span></el-form-item>
  <el-form-item label="jitter"><span>{{props.row.jitter}}</span></el-form-item>
- 
+
  <el-form-item></el-form-item>
  <el-form-item label="day_of_week"><span>{{props.row.day_of_week}}</span></el-form-item>
  <el-form-item label="misfire_grace_time"><span>{{props.row.misfire_grace_time}}</span></el-form-item>
- 
+
  <el-form-item></el-form-item>
  <el-form-item label="hour"><span>{{props.row.hour}}</span></el-form-item>
  <el-form-item label="coalesce"><span>{{props.row.coalesce}}</span></el-form-item>
- 
+
  <el-form-item></el-form-item>
  <el-form-item label="minute"><span>{{props.row.minute}}</span></el-form-item>
  <el-form-item label="max_instances"><span>{{props.row.max_instances}}</span></el-form-item>
- 
+
  <el-form-item></el-form-item>
  <el-form-item label="second"><span>{{props.row.second}}</span></el-form-item>
  <el-form-item></el-form-item>
- 
+
  <el-form-item label="settings_arguments"><span>{{props.row.settings_arguments}}</span></el-form-item>
  <el-form-item></el-form-item>
  <el-form-item label="selected_nodes"><span>{{props.row.selected_nodes}}</span></el-form-item>
@@ -145,7 +145,10 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
  <el-table-column prop="prev_run_result" label="Prev run result" sortable align="center" :sort-method="sortPrevRunResult" :sort-orders="sortOrders" width="190">
  <template slot-scope="scope">
  <label :title="scope.row.prev_run_result_label">
- <a :class="scope.row.prev_run_result_class" :href="scope.row.url_prev_run_result" :target="scope.row.prev_run_result_target">{{scope.row.prev_run_result}}</a>
+ <a :class="scope.row.prev_run_result_class" :href="scope.row.url_prev_run_result" :target="scope.row.prev_run_result_target">
+ <i class="el-icon-loading" :style="{ display: scope.row.prev_run_display_loading }"></i>
+ {{scope.row.prev_run_result}}
+ </a>
  </label>
  </template>
  </el-table-column>
@@ -216,17 +219,18 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
 
  prev_run_result: '{{ task.prev_run_result }}',
  prev_run_result_label: {% if task.prev_run_result == 'FAIL 0, PASS 0' %}'the task is being executed'{% else %}''{% endif %},
+ prev_run_display_loading: {% if task.prev_run_result == 'FAIL 0, PASS 0' %}''{% else %}'none'{% endif %},
  url_prev_run_result: '{{ task.url_prev_run_result }}',
  prev_run_result_class: 'state ' + {% if task.prev_run_result == 'N/A' %}'normal forbid'{% elif task.prev_run_result == 'FAIL 0, PASS 0' %}'warning'{% elif task.prev_run_result[:5] != 'FAIL ' or task.prev_run_result[:7] == 'FAIL 0,' %}'normal'{% else %}'danger'{% endif %},
  prev_run_result_target: {% if task.prev_run_result == 'N/A' or task.prev_run_result[:5] == 'FAIL ' %}'_self'{% else %}'_blank'{% endif %},
- 
+
  next_run_time: '{{ task.next_run_time }}',
  next_run_time_color: {% if 'DISABLED' in task.next_run_time %}'red'{% else %}'unset'{% endif %},
  fail_times: {{ task.fail_times }},
  run_times: {% if task.fail_times %}'FAIL {{ task.fail_times }} / {{ task.run_times }}'{% else %}{{ task.run_times }}{% endif %},
  url_task_results: '{{ task.url_task_results }}',
  task_results_class: {% if task.fail_times %}'state danger'{% else %}'state normal'{% endif %},
- 
+
  create_time: '{{ task.create_time }}',
  update_time: '{{ task.update_time }}',
  project: '{{ task.project }}',
@@ -235,7 +239,7 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
  jobid: '{{ task.jobid }}',
  settings_arguments: '{{ task.settings_arguments|replace("'", "\\'")|replace("\r", " ")|replace("\n", " ")|safe }}',
  selected_nodes: '{{ task.selected_nodes }}',
- 
+
  year: '{{ task.year }}',
  month: '{{ task.month }}',
  day: '{{ task.day }}',
@@ -252,7 +256,7 @@ <h2 style="display: inline-block;">Get the list of timer tasks.</h2>
  misfire_grace_time: '{{ task.misfire_grace_time }}',
  coalesce: '{{ task.coalesce }}',
  max_instances: {{ task.max_instances }},
- 
+
  url_edit: '{{ task.url_edit }}',
  url_fire: '{{ task.url_fire }}',
  display_fire: {% if task.url_fire %}''{% else %}'none'{% endif %},