From c73008fe03f00424c85b1a4f7753cf2a5f14d539 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Thu, 7 Jul 2022 09:06:28 +0500 Subject: [PATCH] add open table date in dashboard --- src/{ => assets}/favicon.ico | Bin src/components/excel/Excel.ts | 6 ++++-- src/components/header/Header.ts | 7 +++---- src/constants.ts | 1 + src/core/ExcelComponent.ts | 3 +-- src/core/StoreSubscriber.ts | 2 ++ src/core/routes/ActiveRoute.ts | 4 ++++ src/index.html | 4 ++-- src/pages/dashboard.functions.ts | 16 +++++++--------- src/redux/actions.ts | 18 +++++++++++++++++- src/redux/constants.ts | 1 + src/redux/rootReducer.ts | 26 ++++++++++++++++---------- 12 files changed, 58 insertions(+), 30 deletions(-) rename src/{ => assets}/favicon.ico (100%) diff --git a/src/favicon.ico b/src/assets/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/assets/favicon.ico diff --git a/src/components/excel/Excel.ts b/src/components/excel/Excel.ts index 6f070e8..414ef5f 100644 --- a/src/components/excel/Excel.ts +++ b/src/components/excel/Excel.ts @@ -1,8 +1,9 @@ import { Store } from 'core/createStore'; -import { $, Dom } from 'core/dom'; +import { $ } from 'core/dom'; import { Emitter } from 'core/Emitter'; import { ExcelComponent } from 'core/ExcelComponent'; import { StoreSubscriber } from 'core/StoreSubscriber'; +import { updateOpenDate } from 'redux/actions'; interface ExcelOptionsType { components: any[], @@ -10,7 +11,6 @@ interface ExcelOptionsType { } export class Excel { - $el: HTMLElement | Dom; components: any[]; emitter: Emitter; store: Store; @@ -47,6 +47,8 @@ export class Excel { init() { this.subscriber.subscribeComponents(this.components); this.components.forEach(component => component.init()); + + this.store.dispatch(updateOpenDate(Date.now().toString())); } destroy() { diff --git a/src/components/header/Header.ts b/src/components/header/Header.ts index 77e46cc..2f31819 100644 --- a/src/components/header/Header.ts +++ b/src/components/header/Header.ts @@ -1,5 +1,6 @@ import { $, Dom } from 'core/dom'; import { ExcelStateComponent } from 'core/ExcelStateComponent'; +import { ActiveRoute } from 'core/routes/ActiveRoute'; import { deleteTable } from 'redux/actions'; import * as actions from 'redux/actions'; @@ -48,14 +49,12 @@ export class Header extends ExcelStateComponent { switch (btnEvent) { case 'exit': { - window.location.hash = ''; + ActiveRoute.navigateTo = ''; break; } case 'delete-table': { - this.$dispatch(deleteTable(this.store.getState().id)); - console.log('THIS', this); - this.destroy(); + confirm('Действительно хочешь удалить ?') && this.$dispatch(deleteTable(this.store.getState().id)); break; } diff --git a/src/constants.ts b/src/constants.ts index d9824b3..5d0b15e 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -19,5 +19,6 @@ export function getNormalizeInitialState(params: string): StateType { ...storage(`excel:${params}`), currentStyles: { ...storage(`excel:${params}`)?.stylesState?.['0:0'] }, id: params, + openDate: Date.now(), }; } diff --git a/src/core/ExcelComponent.ts b/src/core/ExcelComponent.ts index f18f304..747ab2c 100644 --- a/src/core/ExcelComponent.ts +++ b/src/core/ExcelComponent.ts @@ -1,4 +1,4 @@ -import { ActionType, SubscribeType } from 'redux/types'; +import { ActionType } from 'redux/types'; import { Store } from './createStore'; import { Dom } from './dom'; import { DomListener } from './DomListener'; @@ -22,7 +22,6 @@ export abstract class ExcelComponent extends DomListener implements ExcelCompone name: string; emitter: Emitter; store: Store; - storeSub: SubscribeType; subscribe: string[]; private unsubscribers: ((args?: any) => any)[]; diff --git a/src/core/StoreSubscriber.ts b/src/core/StoreSubscriber.ts index a866ef6..d4096aa 100644 --- a/src/core/StoreSubscriber.ts +++ b/src/core/StoreSubscriber.ts @@ -15,6 +15,8 @@ export class StoreSubscriber { this.prevState = this.store.getState(); this.sub = this.store.subscribe((state: StateType) => { + if (!state) return; + Object.keys(state).forEach(key => { if (!isEqual(this.prevState[key], state[key])) { components.forEach(component => { diff --git a/src/core/routes/ActiveRoute.ts b/src/core/routes/ActiveRoute.ts index e477fdb..493be24 100644 --- a/src/core/routes/ActiveRoute.ts +++ b/src/core/routes/ActiveRoute.ts @@ -6,4 +6,8 @@ export class ActiveRoute { static get param() { return window.location.hash.split('/'); } + + static set navigateTo(path: string) { + window.location.hash = path; + } } diff --git a/src/index.html b/src/index.html index c070220..c3a0fe8 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ - + Excel course @@ -14,4 +14,4 @@
- \ No newline at end of file + diff --git a/src/pages/dashboard.functions.ts b/src/pages/dashboard.functions.ts index 465c828..3e00e21 100644 --- a/src/pages/dashboard.functions.ts +++ b/src/pages/dashboard.functions.ts @@ -1,21 +1,19 @@ import { storage } from 'core/utils'; function toHtml(key: string) { - const date = +key.split(':')[1]; - const params = storage(key); - const link = `#excel/${date}`; + const params = +key.split(':')[1]; + const state = storage(key); + const link = `#excel/${params}`; + const date = new Date(+state.openDate); + return `
  • - ${params.title} - ${new Date(date).toLocaleDateString()} + ${state.title} + ${date.toLocaleDateString()} ${date.toLocaleTimeString()}
    • `; } -export function getAllRecords() { - -} - export function createRecordsTable() { const keys = getAllKeys(); if (!keys.length) return '

    Пока не создали ни одной таблицы

    '; diff --git a/src/redux/actions.ts b/src/redux/actions.ts index 6df4d9d..fe10f13 100644 --- a/src/redux/actions.ts +++ b/src/redux/actions.ts @@ -1,4 +1,13 @@ -import { CHANGE_TEXT, CHANGE_STYLES, TABLE_RESIZE, APPLY_STYLES, CHANGE_TITLE, DELETE_TABLE } from './constants'; +import { ActionType } from 'redux/types'; +import { + CHANGE_TEXT, + CHANGE_STYLES, + TABLE_RESIZE, + APPLY_STYLES, + CHANGE_TITLE, + DELETE_TABLE, + UPDATE_DATE, +} from './constants'; export function tableResize(resizeData: any) { return { @@ -41,3 +50,10 @@ export function deleteTable(data: string) { data, }; } + +export function updateOpenDate(data: string): ActionType { + return { + type: UPDATE_DATE, + data, + }; +} diff --git a/src/redux/constants.ts b/src/redux/constants.ts index 99a746d..b25a8c6 100644 --- a/src/redux/constants.ts +++ b/src/redux/constants.ts @@ -4,3 +4,4 @@ export const APPLY_STYLES = 'APPLY_STYLES'; export const CHANGE_STYLES = 'CURRENT_STYLES'; export const CHANGE_TITLE = 'CHANGE_TITLE'; export const DELETE_TABLE = 'DELETE_TABLE'; +export const UPDATE_DATE = 'UPDATE_DATE'; diff --git a/src/redux/rootReducer.ts b/src/redux/rootReducer.ts index ebe34e2..0f379d4 100644 --- a/src/redux/rootReducer.ts +++ b/src/redux/rootReducer.ts @@ -1,5 +1,14 @@ +import { ActiveRoute } from 'core/routes/ActiveRoute'; import { storageName } from 'pages/ExcelPage'; -import { CHANGE_TEXT, CHANGE_STYLES, TABLE_RESIZE, APPLY_STYLES, CHANGE_TITLE, DELETE_TABLE } from './constants'; +import { + CHANGE_TEXT, + CHANGE_STYLES, + TABLE_RESIZE, + APPLY_STYLES, + CHANGE_TITLE, + DELETE_TABLE, + UPDATE_DATE, +} from './constants'; import { ActionType, StateType } from './types'; export function rootReducer(state: StateType, action: ActionType) { @@ -47,19 +56,16 @@ export function rootReducer(state: StateType, action: ActionType) { case DELETE_TABLE: { const name = storageName(action.data); - console.log('delete table item', name); localStorage.removeItem(name); - window.location.hash = ''; + ActiveRoute.navigateTo = ''; - return { ...state }; + return null; + } + + case UPDATE_DATE: { + return { ...this.state, openDate: action.data }; } default: return state; } } - -// function value(state, field, action) { -// const val = state[field] || {}; -// val[action.data.id] = action.data.value; -// return val; -// }