Skip to content

Commit

Permalink
Updated to latest buefy
Browse files Browse the repository at this point in the history
  • Loading branch information
@cld9x
cld9x committed Dec 22, 2020
1 parent 45e0d5b commit e9a0e8e
Show file tree
Hide file tree
Showing 7 changed files with 1,241 additions and 772 deletions.
6 changes: 6 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,9 @@ indent_size = 2
[{*.go,go.mod,go.sum}]
indent_style = tab
indent_size = 4

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
62 changes: 34 additions & 28 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,52 @@
"name": "xbvr",
"private": true,
"scripts": {
"dev": "concurrently 'npm:dev:ui' 'npm:dev:go'",
"serve": "cd ui && vue-cli-service serve",
"build": "cd ui && vue-cli-service build",
"lint": "cd ui && vue-cli-service lint",
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
"i18n:extract": "yarn vue-i18n-extract report -v './ui/src/**/*.?(js|vue)' -l './ui/src/locales/*.?(js|json)'",
"dev:ui": "cd ui && vue-cli-service build --watch --silent",
"dev:go": "air"
"dev": "concurrently 'npm:dev:ui' 'npm:dev:go'",
"dev:go": "air",
"dev:ui": "cd ui && vue-cli-service build --watch --silent"
},
"dependencies": {
"@fortawesome/fontawesome-free": "5.13.1",
"@fortawesome/fontawesome-free": "5.15.1",
"@fortawesome/fontawesome-svg-core": "1.2.32",
"@mdi/font": "5.3.45",
"buefy": "0.8.20",
"@mdi/font": "5.8.55",
"buefy": "0.9.4",
"bulma-extensions": "6.2.7",
"date-fns": "2.14.0",
"ky": "0.21.0",
"pretty-bytes": "5.3.0",
"videojs-hotkeys": "0.2.26",
"date-fns": "2.16.1",
"ky": "0.25.1",
"pretty-bytes": "5.4.1",
"videojs-hotkeys": "0.2.27",
"videojs-vr": "1.7.1",
"vue": "2.6.12",
"vue-debounce": "2.5.7",
"vue-debounce": "2.5.8",
"vue-gallery": "2.0.1",
"vue-global-events": "1.1.2",
"vue-i18n": "8.18.2",
"vue-load-image": "0.1.11",
"vue-router": "3.3.4",
"vue-slider-component": "3.2.7",
"vue-star-rating": "1.6.1",
"vuex": "3.5.1",
"wampy": "6.2.2"
"vue-global-events": "1.2.1",
"vue-i18n": "8.22.2",
"vue-load-image": "0.1.12",
"vue-router": "3.4.9",
"vue-slider-component": "3.2.11",
"vue-star-rating": "1.7.0",
"vuex": "3.6.0",
"wampy": "6.3.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"concurrently": "5.2.0",
"eslint": "7.4.0",
"eslint-plugin-vue": "6.2.2",
"less": "3.11.3",
"@vue/cli-plugin-babel": "4.5.9",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "4.5.9",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"concurrently": "5.3.0",
"eslint": "7.16.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "7.3.0",
"less": "3.12.2",
"less-loader": "6.2.0",
"node-sass": "4.14.1",
"sass-loader": "9.0.2",
Expand All @@ -58,7 +63,8 @@
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
"eslint:recommended",
"@vue/standard"
],
"rules": {},
"parserOptions": {
Expand Down
223 changes: 113 additions & 110 deletions ui/src/views/files/List.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,53 @@
<div class="column">
<b-loading :is-full-page="true" :active.sync="isLoading"></b-loading>
<div v-if="items.length > 0 && !isLoading">
<b-table :data="items" ref="table" backend-sorting :default-sort="[sortField, sortOrder]" @sort="onSort" :paginated="true">
<template slot-scope="props">
<b-table-column style="word-break:break-all;" class="is-one-fifth" field="filename" :label="$t('File')"
sortable>
{{props.row.filename}}
<br/><small>{{props.row.path}}</small>
</b-table-column>
<b-table-column field="created_time" :label="$t('Created')" style="white-space: nowrap;" sortable>
{{format(parseISO(props.row.created_time), "yyyy-MM-dd hh:mm:ss")}}
</b-table-column>
<b-table-column field="size" :label="$t('Size')" style="white-space: nowrap;" sortable>
{{prettyBytes(props.row.size)}}
</b-table-column>
<b-table-column field="video_width" :label="$t('Width')" sortable>
<span v-if="props.row.video_width !== 0">{{props.row.video_width}}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_height" :label="$t('Height')" sortable>
<span v-if="props.row.video_height !== 0">{{props.row.video_height}}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_bitrate" :label="$t('Bitrate')" style="white-space: nowrap;" sortable>
<span v-if="props.row.video_bitrate !== 0">{{prettyBytes(props.row.video_bitrate)}}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="duration" :label="$t('Duration')" style="white-space: nowrap;" sortable>
<span v-if="props.row.duration !== 0">{{humanizeSeconds(props.row.duration)}}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_avgfps_val" :label="$t('FPS')" style="white-space: nowrap;" sortable>
<span v-if="props.row.video_avgfps_val !== 0">{{props.row.video_avgfps_val}}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column style="white-space: nowrap;">
<b-button @click="play(props.row)">{{$t('Play')}}</b-button>
&nbsp;
<b-button v-if="props.row.scene_id === 0" @click="match(props.row)">{{$t('Match')}}</b-button>
<b-button v-else disabled>{{$t('Match')}}</b-button>
&nbsp;
<button class="button is-danger is-outlined" @click='removeFile(props.row)'>
<b-icon pack="fas" icon="trash"></b-icon>
</button>
</b-table-column>
</template>
<b-table :data="items" ref="table" backend-sorting :default-sort="[sortField, sortOrder]" @sort="onSort"
:paginated="true">
<b-table-column style="word-break:break-all;" class="is-one-fifth" field="filename" :label="$t('File')"
sortable v-slot="props">
{{ props.row.filename }}
<br/><small>{{ props.row.path }}</small>
</b-table-column>
<b-table-column field="created_time" :label="$t('Created')" style="white-space: nowrap;" sortable
v-slot="props">
{{ format(parseISO(props.row.created_time), "yyyy-MM-dd hh:mm:ss") }}
</b-table-column>
<b-table-column field="size" :label="$t('Size')" style="white-space: nowrap;" sortable v-slot="props">
{{ prettyBytes(props.row.size) }}
</b-table-column>
<b-table-column field="video_width" :label="$t('Width')" sortable v-slot="props">
<span v-if="props.row.video_width !== 0">{{ props.row.video_width }}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_height" :label="$t('Height')" sortable v-slot="props">
<span v-if="props.row.video_height !== 0">{{ props.row.video_height }}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_bitrate" :label="$t('Bitrate')" style="white-space: nowrap;" sortable
v-slot="props">
<span v-if="props.row.video_bitrate !== 0">{{ prettyBytes(props.row.video_bitrate) }}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="duration" :label="$t('Duration')" style="white-space: nowrap;" sortable
v-slot="props">
<span v-if="props.row.duration !== 0">{{ humanizeSeconds(props.row.duration) }}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column field="video_avgfps_val" :label="$t('FPS')" style="white-space: nowrap;" sortable
v-slot="props">
<span v-if="props.row.video_avgfps_val !== 0">{{ props.row.video_avgfps_val }}</span>
<span v-else>-</span>
</b-table-column>
<b-table-column style="white-space: nowrap;" v-slot="props">
<b-button @click="play(props.row)">{{ $t('Play') }}</b-button>
&nbsp;
<b-button v-if="props.row.scene_id === 0" @click="match(props.row)">{{ $t('Match') }}</b-button>
<b-button v-else disabled>{{ $t('Match') }}</b-button>
&nbsp;
<button class="button is-danger is-outlined" @click='removeFile(props.row)'>
<b-icon pack="fas" icon="trash"></b-icon>
</button>
</b-table-column>
</b-table>
</div>
<div v-if="items.length === 0 && !isLoading">
Expand All @@ -60,7 +63,7 @@
</span>
</h1>
<h2 class="subtitle">
{{$t('No files matching your selection')}}
{{ $t('No files matching your selection') }}
</h2>
</div>
</div>
Expand All @@ -72,78 +75,78 @@
</template>

<script>
import prettyBytes from "pretty-bytes";
import {format, parseISO} from "date-fns";
import ky from "ky";
import prettyBytes from "pretty-bytes";
import {format, parseISO} from "date-fns";
import ky from "ky";
export default {
name: "List",
data() {
return {
files: [],
prettyBytes,
format,
parseISO,
sortField: 'created_time',
sortOrder: 'desc',
}
export default {
name: "List",
data() {
return {
files: [],
prettyBytes,
format,
parseISO,
sortField: 'created_time',
sortOrder: 'desc',
}
},
computed: {
isLoading() {
return this.$store.state.files.isLoading;
},
computed: {
isLoading() {
return this.$store.state.files.isLoading;
},
items() {
return this.$store.state.files.items;
}
},
mounted() {
this.$store.state.files.filters.sort = `${this.sortField}_${this.sortOrder}`;
items() {
return this.$store.state.files.items;
}
},
mounted() {
this.$store.state.files.filters.sort = `${this.sortField}_${this.sortOrder}`;
this.$store.dispatch("files/load");
},
methods: {
onSort(field, order) {
this.sortField = field;
this.sortOrder = order;
this.$store.state.files.filters.sort = `${field}_${order}`;
this.$store.dispatch("files/load");
},
methods: {
onSort(field, order) {
this.sortField = field;
this.sortOrder = order;
this.$store.state.files.filters.sort = `${field}_${order}`;
this.$store.dispatch("files/load");
},
play(file) {
this.$store.commit("overlay/showPlayer", {file: file});
},
match(file) {
this.$store.commit("overlay/showMatch", {file: file});
},
humanizeSeconds(seconds) {
return new Date(seconds * 1000).toISOString().substr(11, 8);
},
removeFile(file) {
this.$buefy.dialog.confirm({
title: 'Remove file',
message: `You're about to remove file <strong>${file.filename}</strong> from <strong>disk</strong>.`,
type: 'is-danger',
hasIcon: true,
onConfirm: () => {
ky.delete(`/api/files/file/${file.id}`).json().then(data => {
this.$store.dispatch("files/load");
});
}
});
},
play(file) {
this.$store.commit("overlay/showPlayer", {file: file});
},
match(file) {
this.$store.commit("overlay/showMatch", {file: file});
},
humanizeSeconds(seconds) {
return new Date(seconds * 1000).toISOString().substr(11, 8);
},
removeFile(file) {
this.$buefy.dialog.confirm({
title: 'Remove file',
message: `You're about to remove file <strong>${file.filename}</strong> from <strong>disk</strong>.`,
type: 'is-danger',
hasIcon: true,
onConfirm: () => {
ky.delete(`/api/files/file/${file.id}`).json().then(data => {
this.$store.dispatch("files/load");
});
}
});
},
}
},
}
</script>

<style scoped>
small {
opacity: 0.6;
}
small {
opacity: 0.6;
}
.is-superlarge {
height: 96px;
max-height: 96px;
max-width: 96px;
min-height: 96px;
min-width: 96px;
width: 96px;
}
.is-superlarge {
height: 96px;
max-height: 96px;
max-width: 96px;
min-height: 96px;
min-width: 96px;
width: 96px;
}
</style>
Loading

0 comments on commit e9a0e8e

Please sign in to comment.