Add dashboard view

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': ''
     })
   ]
 })

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)}
 
-        <grampsjs-view-dashboard class="page" ?active=${this._page === 'home'} .strings="${this._strings}"></grampsjs-view-dashboard>
+        <grampsjs-view-dashboard class="page" ?active=${this._page === 'home'} .strings="${this._strings}" .dbInfo="${this._dbInfo}"></grampsjs-view-dashboard>
         <grampsjs-view-blog class="page" ?active=${this._page === 'blog'} .strings="${this._strings}"></grampsjs-view-blog>
 
         <grampsjs-view-people class="page" ?active=${this._page === 'people'} .strings="${this._strings}"></grampsjs-view-people>

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`
+    <h2>${this._('Statistics')}</h2>
+    <table>
+      ${_classes.map(key => {
+    if (!(key in this.data)) {
+      return ''
+    }
+    return html`
+      <tr>
+        <th>
+          ${this._(`Number of ${key}`)}
+        </th>
+        <td>
+          ${this.data[key]}
+        </td>
+      </tr>
+      `
+  }, this)}
+    </table>
+    `
+  }
+}
+
+
+window.customElements.define('grampsjs-statistics', GrampsjsStatistics)

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',

src/util.js

@@ -153,6 +153,8 @@ export function showObject(type, obj, strings) {
         >${getName(obj, type) || type}
         </a>
         `
+  case 'tag':
+    return html``
   default:
     return `unknown type: ${type}`
   }

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
-    `
+    <div class="column">
+      <grampsjs-statistics
+        .data="${this.dbInfo?.object_counts || {}}"
+        id="statistics"
+        .strings="${this.strings}">
+      </grampsjs-statistics>
+    </div>
+    <div class="column">
+      <grampsjs-view-recently-changed
+        active
+        id="recently-changed"
+        .strings="${this.strings}">
+      </grampsjs-view-recently-changed>
+    </div>
+      `
   }
 
 }

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`
+    <h2>${this._('Recently changed objects')}</h2>
+    ${!this.loading && this._searchResult.length === 0 ? html`
+      <p>${this._('No items')}.</p>
+      ` : html`
+      <grampsjs-search-results
+        .data="${this._searchResult}"
+        .strings="${this.strings}"
+      ></grampsjs-search-results>
+    `}`
+  }
+
+  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)

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,

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`
+    <h2>${this._('Statistics')}</h2>
+    `
+  }
+
+  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)

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()