From 3bdbfb5b2923068dd158db52f7730715de1c766a Mon Sep 17 00:00:00 2001 From: David Straub Date: Wed, 23 Dec 2020 22:20:21 +0100 Subject: [PATCH] Add dashboard view --- rollup.config.js | 6 +- src/GrampsJs.js | 3 +- src/components/GrampsjsStatistics.js | 56 +++++++++++++++++ src/strings.js | 9 +++ src/util.js | 2 + src/views/GrampsjsViewDashboard.js | 47 ++++++++++++++- src/views/GrampsjsViewRecentlyChanged.js | 66 +++++++++++++++++++++ src/views/GrampsjsViewSettingsOnboarding.js | 2 +- src/views/GrampsjsViewStatistics.js | 58 ++++++++++++++++++ src/views/GrampsjsViewTree.js | 1 + 10 files changed, 243 insertions(+), 7 deletions(-) create mode 100644 src/components/GrampsjsStatistics.js create mode 100644 src/views/GrampsjsViewRecentlyChanged.js create mode 100644 src/views/GrampsjsViewStatistics.js diff --git a/rollup.config.js b/rollup.config.js index 81ff76fd..25def5d0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,7 +1,7 @@ import merge from 'deepmerge' import copy from 'rollup-plugin-copy' import {createSpaConfig} from '@open-wc/building-rollup' - +import replace from '@rollup/plugin-replace' const baseConfig = createSpaConfig({ developmentMode: process.env.ROLLUP_WATCH === 'true', @@ -15,7 +15,11 @@ export default merge(baseConfig, { copy({ targets: [ {src: './leaflet.css', dest: 'dist/'}, + {src: './images/**/*', dest: 'dist/images'} ] + }), + replace({ + 'http://localhost:5555': '' }) ] }) diff --git a/src/GrampsJs.js b/src/GrampsJs.js index 16a7cf4c..1ae89c56 100644 --- a/src/GrampsJs.js +++ b/src/GrampsJs.js @@ -22,7 +22,6 @@ import {apiGetTokens, apiGet, getSettings, apiResetPassword} from './api.js' import {grampsStrings, additionalStrings} from './strings.js' import './dayjs_locales.js' - import './views/GrampsjsViewPeople.js' import './views/GrampsjsViewFamilies.js' import './views/GrampsjsViewPlaces.js' @@ -397,7 +396,7 @@ export class GrampsJs extends LitElement { ${this._tabHtml(tabs)} - + diff --git a/src/components/GrampsjsStatistics.js b/src/components/GrampsjsStatistics.js new file mode 100644 index 00000000..3f1c7ac1 --- /dev/null +++ b/src/components/GrampsjsStatistics.js @@ -0,0 +1,56 @@ +import {html, css} from 'lit-element' + +import {GrampsjsTableBase} from './GrampsjsTableBase.js' + +const _classes = [ + 'people', + 'families', + 'events', + 'places', + 'sources', + 'citations', + 'repositories', + 'notes', + 'media', + 'tags' +] + +export class GrampsjsStatistics extends GrampsjsTableBase { + + static get styles() { + return [ + super.styles, + css` + :host { + margin-bottom: 5em; + } + ` + ] + } + + render() { + return html` +

${this._('Statistics')}

+ + ${_classes.map(key => { + if (!(key in this.data)) { + return '' + } + return html` + + + + + ` + }, this)} +
+ ${this._(`Number of ${key}`)} + + ${this.data[key]} +
+ ` + } +} + + +window.customElements.define('grampsjs-statistics', GrampsjsStatistics) diff --git a/src/strings.js b/src/strings.js index 6b1b04ef..46de0502 100644 --- a/src/strings.js +++ b/src/strings.js @@ -9,6 +9,7 @@ export const additionalStrings = { 'Menu': 'Menü', 'Blog': 'Blog', 'Recently browsed objects': 'Kürzlich betrachtete Objekte', + 'Recently changed objects': 'Kürzlich geänderte Objekte', 'Show in tree': 'Im Stammbaum anzeigen', 'User settings': 'Benutzer-Einstellungen', 'Select language': 'Sprache auswählen', @@ -109,6 +110,13 @@ export const grampsStrings = [ 'Number of generations:', 'Number of individuals', 'Number of places', + 'Number of citations', + 'Number of media', + 'Number of notes', + 'Number of people', + 'Number of repositories', + 'Number of sources', + 'Number of tags', 'Number', 'Page', 'Parents', @@ -150,6 +158,7 @@ export const grampsStrings = [ 'Sources', 'Spouses', 'State', + 'Statistics', 'Street', 'Surname', 'Text', diff --git a/src/util.js b/src/util.js index 061dd4d9..bf5ae7d8 100644 --- a/src/util.js +++ b/src/util.js @@ -153,6 +153,8 @@ export function showObject(type, obj, strings) { >${getName(obj, type) || type} ` + case 'tag': + return html`` default: return `unknown type: ${type}` } diff --git a/src/views/GrampsjsViewDashboard.js b/src/views/GrampsjsViewDashboard.js index 0c431dfb..b1bd008b 100644 --- a/src/views/GrampsjsViewDashboard.js +++ b/src/views/GrampsjsViewDashboard.js @@ -1,19 +1,60 @@ -import {html} from 'lit-element' +import {html, css} from 'lit-element' import {GrampsjsView} from './GrampsjsView.js' +import './GrampsjsViewRecentlyChanged.js' +import '../components/GrampsjsStatistics.js' export class GrampsjsViewDashboard extends GrampsjsView { + + static get properties() { + return { + dbInfo: {type: Object}, + } + } + constructor() { super() + this.dbInfo = {} + } + + static get styles() { + return [ + super.styles, + css` + .column { + float: left; + width: 50%; + } + + @media screen and (max-width: 768px) { + .column { + width: 100%; + } + } + ` + ] } renderContent() { return html` - Dashboard - ` +
+ + +
+
+ + +
+ ` } } diff --git a/src/views/GrampsjsViewRecentlyChanged.js b/src/views/GrampsjsViewRecentlyChanged.js new file mode 100644 index 00000000..68b56db2 --- /dev/null +++ b/src/views/GrampsjsViewRecentlyChanged.js @@ -0,0 +1,66 @@ +import {html, css} from 'lit-element' +import '@material/mwc-button' + +import {GrampsjsView} from './GrampsjsView.js' +import {apiGet} from '../api.js' +import '../components/GrampsjsSearchResults.js' + + +export class GrampsjsViewRecentlyChanged extends GrampsjsView { + + + static get styles() { + return [ + super.styles, + css` + :host { + margin: 0; + } + ` + ] + } + + static get properties() { + return { + _searchResult: {type: Array} + } + } + + constructor() { + super() + this._searchResult = [] + } + + renderContent() { + return html` +

${this._('Recently changed objects')}

+ ${!this.loading && this._searchResult.length === 0 ? html` +

${this._('No items')}.

+ ` : html` + + `}` + } + + async _fetchData() { + this.loading = true + const query = 'changed:\'-1 year to now\'' + const data = await apiGet(`/api/search/?sort=-changed&query=${query}&locale=${this.strings?.__lang__ || 'en'}&profile=all&page=1&pagesize=10`) + this.loading = false + if ('data' in data) { + this._searchResult = data.data + } else if ('error' in data) { + this.error = true + this._errorMessage = data.error + } + } + + firstUpdated() { + this._fetchData() + } +} + + +window.customElements.define('grampsjs-view-recently-changed', GrampsjsViewRecentlyChanged) diff --git a/src/views/GrampsjsViewSettingsOnboarding.js b/src/views/GrampsjsViewSettingsOnboarding.js index cfbf3b17..2f98127e 100644 --- a/src/views/GrampsjsViewSettingsOnboarding.js +++ b/src/views/GrampsjsViewSettingsOnboarding.js @@ -209,7 +209,7 @@ export class GrampsjsViewSettingsOnboarding extends GrampsjsView { this.loading = true this._peopleLoading = true const seachPhrase = this._settings.homePerson? `(${textField.value} OR ${this._settings.homePerson})` : textField.value - const dataPeople = await apiGet(`/api/search/?locale=${this.strings?.__lang__ || 'en'}&profile=self&query=${encodeURIComponent(`${seachPhrase} AND type:person)`)}`) + const dataPeople = await apiGet(`/api/search/?locale=${this.strings?.__lang__ || 'en'}&profile=self&query=${encodeURIComponent(`${seachPhrase} AND type:person`)}`) if ('data' in dataPeople) { this._people = dataPeople.data.map(obj =>({ gramps_id: obj.object.gramps_id, diff --git a/src/views/GrampsjsViewStatistics.js b/src/views/GrampsjsViewStatistics.js new file mode 100644 index 00000000..17587505 --- /dev/null +++ b/src/views/GrampsjsViewStatistics.js @@ -0,0 +1,58 @@ +import {html, css} from 'lit-element' +import '@material/mwc-button' + +import {GrampsjsView} from './GrampsjsView.js' +import {apiGet} from '../api.js' + + +export class GrampsjsViewStatistics extends GrampsjsView { + + + static get styles() { + return [ + super.styles, + css` + :host { + margin: 0; + } + ` + ] + } + + static get properties() { + return { + data: {type: Object} + } + } + + constructor() { + super() + this.data = {} + } + + renderContent() { + return html` +

${this._('Statistics')}

+ ` + } + + async _fetchData() { + this.loading = true + const query = 'changed:\'-1 year to now\'' + const data = await apiGet(`/api/search/?sort=-changed&query=${query}&locale=${this.strings?.__lang__ || 'en'}&profile=all&page=1&pagesize=10`) + this.loading = false + if ('data' in data) { + this._searchResult = data.data + } else if ('error' in data) { + this.error = true + this._errorMessage = data.error + } + } + + firstUpdated() { + this._fetchData() + } +} + + +window.customElements.define('grampsjs-view-statistics', GrampsjsViewStatistics) diff --git a/src/views/GrampsjsViewTree.js b/src/views/GrampsjsViewTree.js index 5f414b6c..1c4aee2c 100644 --- a/src/views/GrampsjsViewTree.js +++ b/src/views/GrampsjsViewTree.js @@ -149,6 +149,7 @@ export class GrampsjsViewTree extends GrampsjsView { } if (changed.has('_depth')) { this.setZoom() + this._fetchData(this.grampsId) } if (changed.has('active')) { this.setZoom()