Merge pull request #540 from SlashNephy/feat/append-version-string

バージョン情報を WUI 上に表示するように

api.d.ts

@@ -747,3 +747,10 @@ export interface StorageItem extends DiskUsage {
 export interface StorageInfo {
     items: StorageItem[];
 }
+
+/**
+ * バージョン情報
+ */
+export interface VersionInfo {
+    version: string;
+}

client/src/components/navigation/Navigation.vue

@@ -9,7 +9,7 @@
     >
         <v-list-item>
             <v-list-item-content>
-                <v-list-item-title class="title">EPGStation</v-list-item-title>
+                <v-list-item-title class="title">{{ versionState.getVersionString() }}</v-list-item-title>
             </v-list-item-content>
         </v-list-item>
 
@@ -41,6 +41,9 @@
 import container from '@/model/ModelContainer';
 import IServerConfigModel from '@/model/serverConfig/IServerConfigModel';
 import INavigationState from '@/model/state/navigation/INavigationState';
+import ISocketIOModel from '@/model/socketio/ISocketIOModel';
+import ISnackbarState from '@/model/state/snackbar/ISnackbarState';
+import IVersionState from '@/model/state/version/IVersionState';
 import { ISettingStorageModel, ISettingValue } from '@/model/storage/setting/ISettingStorageModel';
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { Location } from 'vue-router';
@@ -58,9 +61,23 @@ export default class Navigation extends Vue {
 
     private serverConfig: IServerConfigModel = container.get<IServerConfigModel>('IServerConfigModel');
     private setting: ISettingStorageModel = container.get<ISettingStorageModel>('ISettingStorageModel');
+    private socketIoModel: ISocketIOModel = container.get<ISocketIOModel>('ISocketIOModel');
+    private snackbarState: ISnackbarState = container.get<ISnackbarState>('ISnackbarState');
+    private versionState: IVersionState = container.get<IVersionState>('IVersionState');
+    private onUpdateStatusCallback = (async (): Promise<void> => {
+        await this.versionState.fetchData();
+    }).bind(this);
 
     public created(): void {
         this.navigationState.updateItems(this.$route);
+
+        // socket.io イベント
+        this.socketIoModel.onUpdateState(this.onUpdateStatusCallback);
+    }
+
+    public beforeDestroy(): void {
+        // socket.io イベント
+        this.socketIoModel.offUpdateState(this.onUpdateStatusCallback);
     }
 
     public getNavigationItemClass(index: number): any {
@@ -94,6 +111,16 @@ export default class Navigation extends Vue {
     @Watch('$route', { immediate: true, deep: true })
     public onUrlChange(): void {
         this.updateSelected();
+
+        this.$nextTick(async () => {
+            await this.versionState.fetchData().catch(err => {
+                this.snackbarState.open({
+                    color: 'error',
+                    text: 'バージョン情報取得に失敗',
+                });
+                console.error(err);
+            });
+        });
     }
 
     /**

client/src/model/ModelContainerSetter.ts

@@ -121,6 +121,10 @@ import VideoPlayerSettingModel from './storage/video/VideoPlayerSettingModel';
 import StorageOperationModel from './storage/StorageOperationModel';
 import IColorThemeState from '@/model/state/IColorThemeState';
 import ColorThemeState from '@/model/state/ColorThemeState';
+import VersionState from '@/model/state/version/VersionState';
+import IVersionState from '@/model/state/version/IVersionState';
+import VersionApiModel from '@/model/api/version/VersionApiModel';
+import IVersionApiModel from '@/model/api/version/IVersionApiModel';
 
 /**
  * container に各 Model を登録する
@@ -154,6 +158,8 @@ export default (container: Container): void => {
 
     container.bind<IStorageApiModel>('IStorageApiModel').to(StorageApiModel).inSingletonScope();
 
+    container.bind<IVersionApiModel>('IVersionApiModel').to(VersionApiModel).inSingletonScope();
+
     container.bind<IThumbnailApiModel>('IThumbnailApiModel').to(ThumbnailApiModel).inSingletonScope();
 
     container.bind<IStorageOperationModel>('IStorageOperationModel').to(StorageOperationModel).inSingletonScope();
@@ -246,5 +252,7 @@ export default (container: Container): void => {
 
     container.bind<IStorageState>('IStorageState').to(StorageState).inSingletonScope();
 
+    container.bind<IVersionState>('IVersionState').to(VersionState).inSingletonScope();
+
     container.bind<IColorThemeState>('IColorThemeState').to(ColorThemeState).inSingletonScope();
 };

client/src/model/api/version/IVersionApiModel.ts

@@ -0,0 +1,5 @@
+import * as apid from '../../../../../api';
+
+export default interface IStorageApiModel {
+    getInfo(): Promise<apid.VersionInfo>;
+}

client/src/model/api/version/VersionApiModel.ts

@@ -0,0 +1,23 @@
+import { inject, injectable } from 'inversify';
+import * as apid from '../../../../../api';
+import IRepositoryModel from '../IRepositoryModel';
+import IVersionApiModel from './IVersionApiModel';
+
+@injectable()
+export default class VersionApiModel implements IVersionApiModel {
+    private repository: IRepositoryModel;
+
+    constructor(@inject('IRepositoryModel') repository: IRepositoryModel) {
+        this.repository = repository;
+    }
+
+    /**
+     * バージョン情報の取得
+     * @return Promise<apid.VersionInfo>
+     */
+    public async getInfo(): Promise<apid.VersionInfo> {
+        const result = await this.repository.get('/version');
+
+        return result.data;
+    }
+}

client/src/model/state/version/IVersionState.ts

@@ -0,0 +1,10 @@
+export interface VersionInfo {
+    version: string;
+}
+
+export default interface IStorageState {
+    clearData(): void;
+    fetchData(): Promise<void>;
+    getInfo(): VersionInfo | null;
+    getVersionString(): string;
+}

client/src/model/state/version/VersionState.ts

@@ -0,0 +1,46 @@
+import { inject, injectable } from 'inversify';
+import IVersionApiModel from '../../api/version/IVersionApiModel';
+import IVersionState, { VersionInfo } from './IVersionState';
+
+@injectable()
+export default class VersionState implements IVersionState {
+    private versionApiModel: IVersionApiModel;
+
+    private info: VersionInfo | null = null;
+
+    constructor(@inject('IVersionApiModel') versionApiModel: IVersionApiModel) {
+        this.versionApiModel = versionApiModel;
+    }
+
+    /**
+     * 取得したバージョン情報をクリア
+     */
+    public clearData(): void {
+        this.info = null;
+    }
+
+    /**
+     * バージョン情報の取得
+     */
+    public async fetchData(): Promise<void> {
+        const version = await this.versionApiModel.getInfo();
+
+        this.info = version;
+    }
+
+    /**
+     * 取得したバージョン情報を返す
+     * @return VersionInfo
+     */
+    public getInfo(): VersionInfo | null {
+        return this.info;
+    }
+
+    /**
+     * バージョン文字列を返す
+     * @return string
+     */
+    public getVersionString(): string {
+        return this.info == null ? 'EPGStation' : `EPGStation v${this.info.version}`;
+    }
+}

client/src/views/Dashboard.vue

@@ -1,6 +1,6 @@
 <template>
     <v-main>
-        <TitleBar title="EPGStation"></TitleBar>
+        <TitleBar :title="versionState.getVersionString()"></TitleBar>
         <div class="app-content d-flex flex-column mx-auto">
             <transition name="page">
                 <div v-if="isShow" class="dashboard" v-bind:class="dashboardClass">
@@ -70,6 +70,7 @@ import IRecordedState from '@/model/state/recorded/IRecordedState';
 import IRecordingState from '@/model/state/recording/IRecordingState';
 import IReservesState from '@/model/state/reserve/IReservesState';
 import ISnackbarState from '@/model/state/snackbar/ISnackbarState';
+import IVersionState from '@/model/state/version/IVersionState';
 import { ISettingStorageModel, ISettingValue } from '@/model/storage/setting/ISettingStorageModel';
 import UaUtil from '@/util/UaUtil';
 import Util from '@/util/Util';
@@ -106,6 +107,7 @@ class Dashboard extends Vue {
     private scrollState: IScrollPositionState = container.get<IScrollPositionState>('IScrollPositionState');
     private snackbarState: ISnackbarState = container.get<ISnackbarState>('ISnackbarState');
     private socketIoModel: ISocketIOModel = container.get<ISocketIOModel>('ISocketIOModel');
+    private versionState: IVersionState = container.get<IVersionState>('IVersionState');
     private onUpdateStatusCallback = (async (): Promise<void> => {
         await this.dashboardState.fetchData();
         await this.recordingState.fetchData(this.createFetchRecordingDataOption());