time_ago in vue nearly done
This commit is contained in:
parent
363059e67d
commit
7ae775d7aa
7 changed files with 7409 additions and 9876 deletions
|
@ -14,9 +14,6 @@
|
|||
<div class="icon-container">
|
||||
<i class="fa fa-code-fork"></i>
|
||||
</div>
|
||||
<!--
|
||||
I need to know which branch things are comming from
|
||||
-->
|
||||
<a class="monospace branch-name" href="./commits/master">master</a>
|
||||
<div class="icon-container commit-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
//= require ./stages.js.es6
|
||||
//= require ./pipeline_actions.js.es6
|
||||
//= require ./branch_commit.js.es6
|
||||
//= require ./time_ago.js.es6
|
||||
//= require ./pipelines.js.es6
|
||||
|
||||
(() => {
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
'vue-pipeline-head': gl.VuePipelineHead,
|
||||
'vue-gl-pagination': gl.VueGlPagination,
|
||||
'vue-status-scope': gl.VueStatusScope,
|
||||
'vue-time-ago': gl.VueTimeAgo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -75,7 +76,7 @@
|
|||
>
|
||||
</vue-branch-commit>
|
||||
<vue-stages></vue-stages>
|
||||
<td></td>
|
||||
<vue-time-ago :pipeline='pipeline'></vue-time-ago>
|
||||
<vue-pipeline-actions></vue-pipeline-actions>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
@ -15,10 +15,8 @@
|
|||
'Something went wrong on our end.'
|
||||
));
|
||||
|
||||
// inital fetch and then start timeout loop
|
||||
goFetch();
|
||||
|
||||
// eventually clearInterval(this.intervalId)
|
||||
this.intervalId = setInterval(() => {
|
||||
goFetch();
|
||||
}, 3000);
|
||||
|
|
96
app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
Normal file
96
app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
Normal file
|
@ -0,0 +1,96 @@
|
|||
/* global Vue, gl */
|
||||
/* eslint-disable no-param-reassign */
|
||||
((gl) => {
|
||||
gl.VueTimeAgo = Vue.extend({
|
||||
props: [
|
||||
'pipeline',
|
||||
],
|
||||
methods: {
|
||||
formatSection(section) {
|
||||
if (`${section}`.split('').length <= 1) return `0${section}`;
|
||||
return `${section}`;
|
||||
},
|
||||
hours(date) {
|
||||
return this.formatSection(date.getHours());
|
||||
},
|
||||
minutes(date) {
|
||||
return this.formatSection(date.getMinutes());
|
||||
},
|
||||
seconds(date) {
|
||||
return this.formatSection(date.getSeconds());
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
finishdate() {
|
||||
const date = new Date(
|
||||
new Date(
|
||||
this.pipeline.finished_at
|
||||
).getTime() - new Date(
|
||||
this.pipeline.started_at
|
||||
).getTime()
|
||||
);
|
||||
return (
|
||||
`${this.hours(date)}:${this.minutes(date)}:${this.seconds(date)}`
|
||||
);
|
||||
},
|
||||
runningdate() {
|
||||
const date = new Date(
|
||||
new Date().getTime() - new Date(this.pipeline.started_at).getTime()
|
||||
);
|
||||
return (
|
||||
`${this.hours(date)}:${this.minutes(date)}:${this.seconds(date)}`
|
||||
);
|
||||
},
|
||||
timeStopped() {
|
||||
const options = {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
};
|
||||
|
||||
options.timeZoneName = 'short';
|
||||
|
||||
const finished = this.pipeline.finished_at;
|
||||
|
||||
if (!finished) return false;
|
||||
|
||||
return {
|
||||
words: gl.utils.getTimeago().format(finished),
|
||||
};
|
||||
},
|
||||
duration() {
|
||||
if (this.timeStopped) return this.finishdate;
|
||||
return this.runningdate;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<td>
|
||||
<p class="duration">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
>
|
||||
<g fill="#8F8F8F" fill-rule="evenodd">
|
||||
<path d="M29.513 10.134A15.922 15.922 0 0 0 23 7.28V6h2.993C26.55 6 27 5.552 27 5V2a1 1 0 0 0-1.007-1H14.007C13.45 1 13 1.448 13 2v3a1 1 0 0 0 1.007 1H17v1.28C9.597 8.686 4 15.19 4 23c0 8.837 7.163 16 16 16s16-7.163 16-16c0-3.461-1.099-6.665-2.967-9.283l1.327-1.58a2.498 2.498 0 0 0-.303-3.53 2.499 2.499 0 0 0-3.528.315l-1.016 1.212zM20 34c6.075 0 11-4.925 11-11s-4.925-11-11-11S9 16.925 9 23s4.925 11 11 11z"></path><path d="M19 21h-4.002c-.552 0-.998.452-.998 1.01v1.98c0 .567.447 1.01.998 1.01h7.004c.274 0 .521-.111.701-.291a.979.979 0 0 0 .297-.704v-8.01c0-.54-.452-.995-1.01-.995h-1.98a.997.997 0 0 0-1.01.995V21z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
{{duration}}
|
||||
</p>
|
||||
<p class="finished-at" v-if='timeStopped'>
|
||||
<i class="fa fa-calendar"></i>
|
||||
<time
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
data-container="body"
|
||||
:data-original-title='9 + 9'
|
||||
>
|
||||
{{timeStopped.words}}
|
||||
</time>
|
||||
</p>
|
||||
</td>
|
||||
`,
|
||||
});
|
||||
})(window.gl || (window.gl = {}));
|
17170
vendor/assets/javascripts/vue.full.js
vendored
17170
vendor/assets/javascripts/vue.full.js
vendored
File diff suppressed because it is too large
Load diff
10
vendor/assets/javascripts/vue.min.js
vendored
10
vendor/assets/javascripts/vue.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue