Skip to content

Commit

Permalink
Separate Vue Components
Browse files Browse the repository at this point in the history 
This patch moves several components to their own component files instead
of keeping everything in one huge JavaScript file.
  • Loading branch information
@lkiesow
lkiesow committed Dec 22, 2020
1 parent 2280a59 commit 8db49a5
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 455 deletions.
463 changes: 105 additions & 358 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@
"vue": "^2.6.12"
},
"devDependencies": {
"@vue/component-compiler-utils": "^3.2.0",
"eslint": "^7.16.0",
"eslint-plugin-vue": "^7.3.0",
"parcel-bundler": "^1.12.4"
"parcel-bundler": "^1.12.4",
"vue-template-compiler": "^2.6.12"
}
}
73 changes: 73 additions & 0 deletions ui/Event.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<tr>
<td>{{ event.start }}</td>
<td>{{ event.end }}</td>
<td>
<div class=event_status>
{{ event.status }}
<span class=warning v-if="is_error_state(event)">
<font-awesome-icon icon="exclamation-triangle" />
</span>
<span class=action
v-if="event.status == 'failed uploading'"
v-on:click="retry_ingest(event)"
title="Retry upload">
<font-awesome-icon icon="sync" v-bind:class="{ 'fa-spin': event.processing }" />
</span>
</div>
</td>
</tr>
</template>

<script>
export default {
props: ['event'],
methods: {
is_error_state: event => [
'partial recording',
'failed recording'
].indexOf(event.status) >= 0,
retry_ingest: function(event) {
if (!event.processing) {
event.processing = true;
processing_events.push(event.id);
var requestOptions = {
method: "PATCH",
headers: { "Content-Type": "application/vnd.api+json" },
body: JSON.stringify(
{"data": [{
"attributes": {"status": "finished recording"},
"id": event.id,
"type": "event"
}]})
};
fetch("/api/events/" + event.id, requestOptions)
.then( function(response) {
if (response.status != 200) {throw "Error: request failed - status "; }
})
.catch(function(error) { console.log(error); })
.finally ( () => {
processing_events.pop(event.id);
update_data
})
}
}
}
};
</script>

<style scoped>
div.event_status {
display: flex;
justify-content: space-between;
}
div.event_status span.warning {
color: red;
}
div.event_status span.action {
cursor: pointer;
}
</style>
20 changes: 20 additions & 0 deletions ui/Metrics.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<tbody>
<th colspan="2">{{ metric.header }}</th>
<template v-for="item in metric.metrics">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</template>
</tbody>
</template>

<script>
export default {
props: ['metric'],
};
</script>

<style scoped>
</style>
16 changes: 16 additions & 0 deletions ui/Preview.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<img :src="image" />
</template>

<script>
export default {
props: ['image'],
};
</script>

<style scoped>
img {
max-width: 90%;
max-height: 300px;
}
</style>
80 changes: 8 additions & 72 deletions ui/func.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExcla
import { faSync } from '@fortawesome/free-solid-svg-icons/faSync'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import Event from './Event.vue'
import Metrics from './Metrics.vue'
import Preview from './Preview.vue'

library.add(faExclamationTriangle)
library.add(faSync)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Expand Down Expand Up @@ -66,7 +70,7 @@ var update_data = function () {
});
// Get events.
axios
.get('/api/events/')
.get('/api/events')
.then(response => {
data.upcoming_events = response.data.data.filter(
x => x.attributes.status === "upcoming").map(
Expand Down Expand Up @@ -175,77 +179,9 @@ window.onload = function () {
el: "#app",
data: data,
components: {
'component-preview': {
props: ['image'],
template: '<img :src="image" />',
},
'component-events': {
props: ['event'],
template: `
<tr>
<td>{{ event.start }}</td>
<td>{{ event.end }}</td>
<td>
<div class=event_status>
{{ event.status }}
<span class=warning v-if="is_error_state(event)">
<font-awesome-icon icon="exclamation-triangle" />
</span>
<span class=action
v-if="event.status == 'failed uploading'"
v-on:click="retry_ingest(event)"
title="Retry upload">
<font-awesome-icon icon="sync" v-bind:class="{ 'fa-spin': event.processing }" />
</span>
</div>
</td>
</tr>`,
methods: {
is_error_state: event => [
'partial recording',
'failed recording'
].indexOf(event.status) >= 0,
retry_ingest: function(event) {
if (!event.processing) {
event.processing = true;
processing_events.push(event.id);
var requestOptions = {
method: "PATCH",
headers: { "Content-Type": "application/vnd.api+json" },
body: JSON.stringify(
{"data": [{
"attributes": {"status": "finished recording"},
"id": event.id,
"type": "event"
}]})
};

fetch("/api/events/" + event.id, requestOptions)
.then( function(response) {
if (response.status != 200) {throw "Error: request failed - status "; }
})
.catch(function(error) { console.log(error); })
.finally ( () => {
processing_events.pop(event.id);
update_data
})
}
}
}
},
'component-metric': {
props: ['metric'],
template: `
<tbody>
<th colspan="2">{{ metric.header }}</th>
<template v-for="item in metric.metrics">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</template>
</tbody>`,
}
Preview,
Event,
Metrics,
},
created: update_data,
});
Expand Down
12 changes: 6 additions & 6 deletions ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ <h1>
<section id=preview>
<h2>Preview Images</h2>
<div v-if="previews && previews.length">
<component-preview v-for="item in previews" v-bind:image="item" v-bind:key="item.id">
</component-preview>
<Preview v-for="item in previews" v-bind:image="item" v-bind:key="item.id">
</Preview>
</div>
<div v-else>No preview image</div>
</section>
Expand All @@ -76,9 +76,9 @@ <h2>Recordings</h2>
</td>
</tr>
</template>
<tr is="component-events" v-for="item in upcoming_events.slice(0,limit_upcoming)"
<tr is="Event" v-for="item in upcoming_events.slice(0,limit_upcoming)"
v-bind:event="item" v-bind:key="item.start"></tr>
<tr is="component-events" v-for="item in recorded_events.slice(0,limit_processed)"
<tr is="Event" v-for="item in recorded_events.slice(0,limit_processed)"
v-bind:event="item" v-bind:key="item.start"></tr>
<template v-if="processed > limit_processed">
<tr class=extendlist>
Expand All @@ -95,8 +95,8 @@ <h2>Recordings</h2>
<h2>Status</h2>
<table>
<template>
<component-metric v-for="item in metrics" v-bind:metric="item" v-bind:key="item.header">
</component-metric>
<Metrics v-for="item in metrics" v-bind:metric="item" v-bind:key="item.header">
</Metrics>
</template>
</table>
</section>
Expand Down
18 changes: 0 additions & 18 deletions ui/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,6 @@ tr.extendlist td {
text-align: center;
}

#preview img {
max-width: 90%;
max-height: 300px;
}

td.more {
cursor: pointer;
font-style: italic;
Expand All @@ -118,19 +113,6 @@ td.more:hover {
background-color: #eee;
}

div.event_status {
display: flex;
justify-content: space-between;
}

div.event_status span.warning {
color: red;
}

div.event_status span.action {
cursor: pointer;
}

div.logs {
width: 100%;
overflow-x: scroll;
Expand Down

0 comments on commit 8db49a5

Please sign in to comment.