Добавлен диалог whatsNew

client/components/Reader/Reader.vue

@@ -74,7 +74,21 @@
             <HelpPage v-if="helpActive" ref="helpPage" @help-toggle="helpToggle"></HelpPage>
             <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
             <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
+
+            <el-dialog
+                title="Что нового:"
+                :visible.sync="whatsNewVisible"
+                width="60%">
+                <div v-html="whatsNewContent"></div>
+
+                <span class="clickable" @click="openVersionHistory">Посмотреть историю версий</span>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="whatsNewDisable">Больше не показывать</el-button>
+                </span>
+            </el-dialog>
+
         </el-main>
+
     </el-container>
 </template>
 
@@ -101,6 +115,8 @@ import ServerStorage from './ServerStorage/ServerStorage.vue';
 import bookManager from './share/bookManager';
 import readerApi from '../../api/reader';
 import * as utils from '../../share/utils';
+import * as cryptoUtils from '../../share/cryptoUtils';
+import {versionHistory} from './versionHistory';
 
 export default @Component({
     components: {
@@ -172,6 +188,9 @@ class Reader extends Vue {
     actionCur = -1;
     hidden = false;
 
+    whatsNewVisible = false;
+    whatsNewContent = '';
+
     created() {
         this.loading = true;
         this.commit = this.$store.commit;
@@ -231,6 +250,8 @@ class Reader extends Vue {
 
             this.checkSetStorageAccessKey();
             this.loading = false;
+
+            await this.showWhatsNew();
         })();
     }
 
@@ -257,6 +278,28 @@ class Reader extends Vue {
         }
     }
 
+    async showWhatsNew() {
+        await utils.sleep(2000);
+
+        const whatsNew = versionHistory[0];
+        if (whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
+            utils.stringToHex(cryptoUtils.sha256(whatsNew.content)) != this.whatsNewContentHash) {
+            this.whatsNewContent = whatsNew.content;
+            this.whatsNewVisible = true;
+        }
+    }
+
+    openVersionHistory() {
+        this.whatsNewVisible = false;
+        this.versionHistoryToggle();
+    }
+
+    whatsNewDisable() {
+        this.whatsNewVisible = false;
+        const whatsNew = versionHistory[0];
+        this.commit('reader/setWhatsNewContentHash', utils.stringToHex(cryptoUtils.sha256(whatsNew.content)));
+    }
+
     get routeParamPos() {
         let result = undefined;
         const q = this.$route.query;
@@ -353,6 +396,10 @@ class Reader extends Vue {
         return this.$store.state.reader.settings;
     }
 
+    get whatsNewContentHash() {
+        return this.$store.state.reader.whatsNewContentHash;
+    }
+
     addAction(pos) {
         let a = this.actionList;
         if (!a.length || a[a.length - 1] != pos) {
@@ -523,6 +570,15 @@ class Reader extends Vue {
         }
     }
 
+    versionHistoryToggle() {
+        this.helpToggle();
+        if (this.helpActive) {
+            this.$nextTick(() => {
+                this.$refs.helpPage.activateVersionHistoryHelpPage();
+            });
+        }
+    }
+
     refreshBook() {
         if (this.mostRecentBook()) {
             this.loadBook({url: this.mostRecentBook().url, force: true});
@@ -1010,4 +1066,10 @@ i {
 .clear {
     color: rgba(0,0,0,0);
 }
+
+.clickable {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+}
 </style>

client/components/Reader/versionHistory.js

@@ -0,0 +1,14 @@
+export const versionHistory = [
+{
+    showUntil: '2019-05-05',
+    content:
+`
+Версия 0.6.7 (2019-05-01)
+<ul>
+    <li>Добавлен диалог "Что нового"</li>
+    <li>Добавлена возможность настройки отображаемых кнопок на панели управления</li>
+</ul>
+`
+},
+
+]

client/element.js

@@ -86,8 +86,8 @@ import './theme/form-item.css';
 import ElColorPicker from 'element-ui/lib/color-picker';
 import './theme/color-picker.css';
 
-//import ElDialog from 'element-ui/lib/dialog';
-//import './theme/dialog.css';
+import ElDialog from 'element-ui/lib/dialog';
+import './theme/dialog.css';
 
 import Notification from 'element-ui/lib/notification';
 import './theme/notification.css';
@@ -106,7 +106,7 @@ const components = {
     ElCol, ElContainer, ElAside, ElMain, ElHeader,
     ElInput, ElInputNumber, ElSelect, ElOption, ElTable, ElTableColumn,
     ElProgress, ElSlider, ElForm, ElFormItem,
-    ElColorPicker,
+    ElColorPicker, ElDialog,
 };
 
 for (let name in components) {

client/share/utils.js

@@ -39,6 +39,8 @@ export function formatDate(d, format) {
         case 'normal':
             return `${d.getDate().toString().padStart(2, '0')}.${(d.getMonth() + 1).toString().padStart(2, '0')}.${d.getFullYear()} ` + 
                 `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+        case 'coDate':
+            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
     }
     
 }

client/store/modules/reader.js

@@ -183,6 +183,7 @@ const state = {
     profiles: {},
     profilesRev: 0,
     allowProfilesSave: false,//подстраховка для разработки
+    whatsNewContentHash: '',
     currentProfile: '',
     settings: Object.assign({}, settingDefaults),
     settingsRev: {},
@@ -214,6 +215,9 @@ const mutations = {
     setAllowProfilesSave(state, value) {
         state.allowProfilesSave = value;
     },
+    setWhatsNewContentHash(state, value) {
+        state.whatsNewContentHash = value;
+    },
     setCurrentProfile(state, value) {
         state.currentProfile = value;
     },