DashboardApp.ts 4.82 KB
Newer Older
20after4's avatar
20after4 committed
1
2
3
import Tonic from '@operatortc/tonic';
import {TonicIcon} from './TonicIcon.js'
import TonicLoader from '@operatortc/components/loader/'
20after4's avatar
WIP  
20after4 committed
4
5
6
import { DataSource, DataSet, BaseDataSet, initDataSets} from './datasource.js';
import { InputFilter, DaterangeFilter, NavTabs, TabItem, AutocompleteFilter } from './filter-input.js';
import { VegaChart } from './vega-tonic.js'
20after4's avatar
20after4 committed
7
8
import {DependableComponent, Query} from "./dom.js"
import { DateTime } from "luxon";
9
import { TaskDialog} from "./ui.js"
20after4's avatar
WIP  
20after4 committed
10
11

function initApp() {
20after4's avatar
20after4 committed
12
13
14
  if (window['BASE_URL'])
    DependableComponent._base_url = window['BASE_URL'];
  initDataSets();
20after4's avatar
20after4 committed
15
16
  Tonic.add(TonicIcon);
  Tonic.add(TonicLoader.TonicLoader, 'tonic-loader');
20after4's avatar
WIP  
20after4 committed
17
18
19
20
  Tonic.add(AutocompleteFilter);
  Tonic.add(InputFilter);
  Tonic.add(DaterangeFilter);
  Tonic.add(VegaChart);
20after4's avatar
20after4 committed
21

20after4's avatar
20after4 committed
22
23
  Tonic.add(DashboardApp);
  initDataSets();
20after4's avatar
WIP  
20after4 committed
24
  const app = <DashboardApp> <unknown>document.getElementsByTagName('dashboard-app')[0];
25
  console.log(TaskDialog);
20after4's avatar
WIP  
20after4 committed
26
27
28
29
30
31

  console.log('---------------- init ----------------')
}


class DashboardApp extends DependableComponent {
20after4's avatar
20after4 committed
32
  query:Query;
20after4's avatar
20after4 committed
33
34
35
  submitListener:any;
  popstateListener:any;

20after4's avatar
WIP  
20after4 committed
36
37
  constructor() {
    super();
20after4's avatar
20after4 committed
38
39
40
    this.query = Query.init();


20after4's avatar
WIP  
20after4 committed
41
42
43
    this.addEventListener('change', this.change);

    const form = this.querySelector('form');
20after4's avatar
20after4 committed
44
    this.submitListener = (e) => {
20after4's avatar
20after4 committed
45
      this.submit(e);
20after4's avatar
20after4 committed
46
47
48
49
50
    }
    this.popstateListener = (e) => {
      window.setTimeout(() => {
        this.popstate(e);
      }, 0);
20after4's avatar
WIP  
20after4 committed
51
    }
20after4's avatar
20after4 committed
52
53
54
    form.addEventListener('submit', this.submitListener);
    window.addEventListener('popstate', this.popstateListener);
    this.setState(this.query);
20after4's avatar
WIP  
20after4 committed
55

20after4's avatar
20after4 committed
56
57
58
59
60
61
62
63
64
65
66
67
    const loaded = (event?) => {
        console.log("Content loaded");
        for (const chart of document.querySelectorAll('vega-chart')) {
          (chart as unknown as VegaChart).loadcharts();
        }
        this.loadContent(this.query.url);
    };
    if (document.readyState === 'loading') {  // Loading hasn't finished yet
      document.addEventListener('DOMContentLoaded', loaded);
    } else {  // `DOMContentLoaded` has already fired
      loaded();
    }
20after4's avatar
20after4 committed
68
69
70
71
  }

  update_state_listeners() {
    if (this.query.change_count) {
20after4's avatar
20after4 committed
72
      for (const ele of this.querySelectorAll(`[data-state="*"]`) as any as DataSet[]) {
20after4's avatar
20after4 committed
73
74
        ele.stateChanged('project', this.query.state_changes);
      }
20after4's avatar
WIP  
20after4 committed
75
    }
20after4's avatar
20after4 committed
76
    this.query.reset_changes();
20after4's avatar
WIP  
20after4 committed
77
78
79
80
81
82
83
  }

  change(e) {
    if (!e.target.state){
      return;
    }

20after4's avatar
20after4 committed
84
85
86
    this.query.set(e.target.id, e.target.value)
    console.log('changed', e.target.id, e.target.value);
    this.update_state_listeners();
20after4's avatar
WIP  
20after4 committed
87
88
89
  }

  popstate(e){
20after4's avatar
20after4 committed
90
    this.debug('popstate', e);
20after4's avatar
WIP  
20after4 committed
91
    if (e.state) {
20after4's avatar
20after4 committed
92
93
94
      const url = new URL(location.href)
      this.query.url = url;
      this.query.state = e.state;
20after4's avatar
WIP  
20after4 committed
95
      this.setState(e.state);
20after4's avatar
20after4 committed
96
      this.loadContent(url);
20after4's avatar
WIP  
20after4 committed
97
98
99
100
    }
  }

  setState(state=null) {
20after4's avatar
20after4 committed
101
102
    console.log('setState');
    //this.update_state_listeners();
20after4's avatar
20after4 committed
103
    for (const ele of this.querySelectorAll('.filter') as any as InputFilter[]) {
20after4's avatar
20after4 committed
104
105
      console.log('setState',ele,this.query);
      ele.setState(this.query);
20after4's avatar
WIP  
20after4 committed
106
107
108
    }
  }

20after4's avatar
20after4 committed
109
110
  submit(e?){
    //const e = arguments[0];
20after4's avatar
WIP  
20after4 committed
111
112
113
114
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
20after4's avatar
20after4 committed
115
    for (var child of this.querySelectorAll('.filter') as any as InputFilter[]) {
20after4's avatar
WIP  
20after4 committed
116
      if (child['modifyState']) {
20after4's avatar
20after4 committed
117
        child.modifyState(this.query);
20after4's avatar
WIP  
20after4 committed
118
119
      }
    }
20after4's avatar
20after4 committed
120
121
122

    const state_changes = this.query.reset_changes();

20after4's avatar
WIP  
20after4 committed
123
    const invalidated:Set<BaseDataSet> = new Set();
20after4's avatar
20after4 committed
124
    for (const k in state_changes) {
20after4's avatar
20after4 committed
125
      for (const ele of this.querySelectorAll(`[data-state~="${k}"], [data-state="*"]`) as any as DataSet[]) {
20after4's avatar
20after4 committed
126
        ele.stateChanged(k, state_changes);
20after4's avatar
WIP  
20after4 committed
127
128
129
130
        invalidated.add(ele);
      }
    }

20after4's avatar
20after4 committed
131
132
    this.debug('submit', this.query);
    history.pushState(this.query.state, window.document.title, this.query.url);
20after4's avatar
WIP  
20after4 committed
133

20after4's avatar
20after4 committed
134
135
136
    for (const ele of invalidated) {
      this.debug('rerender', ele);
      ele.reRender();
20after4's avatar
WIP  
20after4 committed
137
138
    }

20after4's avatar
20after4 committed
139
    this.loadContent(this.query.url);
20after4's avatar
WIP  
20after4 committed
140
141
    return false;
  }
20after4's avatar
20after4 committed
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

  async loadContent(url:URL) {
    console.log('loadContent', url);

    // for (const ele of  document.querySelectorAll('data-set')) {
    //   const ds = ele as unknown as DataSet;
    //   ds.reRender();
    // }

    var reportUrl = new URL(url);
    reportUrl.pathname = url.pathname.replace('dashboard/project-metric', 'cycletime/')
    console.log('reportUrl', reportUrl.href);
    const response = await fetch(reportUrl.href);
    if (response.status === 200) {
      const tmpl = document.createElement('template');
      const text = await response.text();
      tmpl.innerHTML=text;
      const newBody = tmpl.content.querySelector('.metrics-report');
      const oldBody = document.querySelector('#cycle');
      oldBody.replaceChildren(newBody);
    }
  }

20after4's avatar
WIP  
20after4 committed
165
166
167
168
169
170
171
172
173
174
175
176
  render() {
    return this.html`
    ${this.elements}
    `;
  }
}



initApp();


20after4's avatar
20after4 committed
177
export {DashboardApp, InputFilter, VegaChart, DateTime, TonicIcon};
20after4's avatar
WIP  
20after4 committed
178
export default DashboardApp;