1- import { customElement , html , LitElement , property , TemplateResult } from "lit-element" ;
1+ import { customElement , html , LitElement , property , query , TemplateResult } from "lit-element" ;
2+ import { translate } from "lit-translate" ;
23
3- import { newPendingStateEvent , newWizardEvent } from "../foundation.js" ;
4+ import { newPendingStateEvent } from "../foundation.js" ;
45
56import { CompasSclDataService } from "../compas-services/CompasSclDataService.js" ;
67import { createLogEvent } from "../compas-services/foundation.js" ;
@@ -10,22 +11,23 @@ import {TypeSelectedEvent} from "./CompasSclTypeList.js";
1011
1112import './CompasSclTypeList.js' ;
1213import './CompasScl.js' ;
13- import { translate } from "lit-translate" ;
1414
1515/* Event that will be used when a SCL Document is retrieved. */
1616export interface DocRetrievedDetail {
1717 element : Element ,
18- doc : Document
18+ doc : Document ,
19+ docName ?: string ,
1920}
2021export type DocRetrievedEvent = CustomEvent < DocRetrievedDetail > ;
2122export function newDocRetrievedEvent (
2223 element : Element ,
23- doc : Document
24+ doc : Document ,
25+ docName ?: string ,
2426) : DocRetrievedEvent {
2527 return new CustomEvent < DocRetrievedDetail > ( 'docRetrieved' , {
2628 bubbles : true ,
2729 composed : true ,
28- detail : { element, doc } ,
30+ detail : { element, doc, docName } ,
2931 } ) ;
3032}
3133
@@ -34,9 +36,8 @@ export default class CompasOpenElement extends LitElement {
3436 @property ( )
3537 selectedType : string | undefined ;
3638
37- retrieveSclDocument ( id ?: string ) : void {
38- getOpenScdElement ( ) . dispatchEvent ( newPendingStateEvent ( this . getSclDocument ( id ) ) ) ;
39- }
39+ @query ( '#scl-file' )
40+ private sclFileUI ! : HTMLInputElement ;
4041
4142 private async getSclDocument ( id ?: string ) : Promise < void > {
4243 const sclDocument = await CompasSclDataService ( )
@@ -47,27 +48,72 @@ export default class CompasOpenElement extends LitElement {
4748 }
4849 }
4950
50- cancel ( ) : void {
51- if ( this . selectedType ) {
52- this . selectedType = undefined ;
53- } else {
54- this . dispatchEvent ( newWizardEvent ( ) ) ;
55- }
51+ private async getSclFile ( evt : Event ) : Promise < void > {
52+ const file = ( < HTMLInputElement | null > evt . target ) ?. files ?. item ( 0 ) ?? false ;
53+ if ( ! file ) return ;
54+
55+ const text = await file . text ( ) ;
56+ const docName = file . name ;
57+ const doc = new DOMParser ( ) . parseFromString ( text , 'application/xml' ) ;
58+
59+ this . dispatchEvent ( newDocRetrievedEvent ( this , doc , docName ) ) ;
60+ this . sclFileUI . onchange = null ;
5661 }
5762
58- render ( ) : TemplateResult {
59- if ( this . selectedType ) {
60- return html `
61- < h3 > ${ translate ( 'compas.open.listScls' , { type : this . selectedType } ) } </ h3 >
62- < compas-scl-list .type =${ this . selectedType }
63- @sclSelected =${ ( evt : SclSelectedEvent ) =>
64- this . retrieveSclDocument ( evt . detail . docId ) } />
65- `
66- }
63+ private renderFileSelect ( ) : TemplateResult {
6764 return html `
68- < h3 > ${ translate ( 'compas.open.listSclTypes' ) } </ h3 >
65+ < input id ="scl-file " accept =".sed,.scd,.ssd,.isd,.iid,.cid,.icd "
66+ type ="file " hidden required
67+ @change =${ ( evt : Event ) =>
68+ getOpenScdElement ( ) . dispatchEvent ( newPendingStateEvent ( this . getSclFile ( evt ) ) )
69+ } >
70+
71+ < mwc-button label ="${ translate ( 'compas.open.selectFileButton' ) }
72+ @click =${ ( ) => {
73+ const input = < HTMLInputElement | null > this . shadowRoot ! . querySelector ( "#scl-file" ) ;
74+ input ?. click ( ) ;
75+ } } >
76+ </ mwc-button >
77+ ` ;
78+ }
79+
80+ private renderSclTypeList ( ) : TemplateResult {
81+ return html `
82+ < p > ${ translate ( 'compas.open.listSclTypes' ) } </ p >
6983 < compas-scltype-list @typeSelected =${ ( evt : TypeSelectedEvent ) =>
70- this . selectedType = evt . detail . type } / >
84+ this . selectedType = evt . detail . type
85+ } / >
86+ ` ;
87+ }
88+
89+ private renderSclList ( ) : TemplateResult {
90+ return html `
91+ < p > ${ translate ( 'compas.open.listScls' , { type : this . selectedType ?? '' } ) } </ p >
92+ < compas-scl-list .type =${ this . selectedType }
93+ @sclSelected =${ ( evt : SclSelectedEvent ) =>
94+ getOpenScdElement ( ) . dispatchEvent ( newPendingStateEvent ( this . getSclDocument ( evt . detail . docId ) ) )
95+ } />
96+ </ compas-scl-list>
97+ < mwc-button id ="reselect-type "
98+ label ="${ translate ( 'compas.open.otherTypeButton' ) }
99+ icon ="arrow_back "
100+ @click =${ ( ) => {
101+ this . selectedType = undefined ;
102+ } } >
103+ </ mwc-button >
104+ ` ;
105+ }
106+
107+ render ( ) : TemplateResult {
108+ return html `
109+ < section >
110+ < h3 > Local</ h3 >
111+ ${ this . renderFileSelect ( ) }
112+ </ section >
113+ < section >
114+ < h3 > CoMPAS</ h3 >
115+ ${ ( this . selectedType ) ? this . renderSclList ( ) : this . renderSclTypeList ( ) }
116+ </ section >
71117 `
72118 }
73119}
0 commit comments