diff --git a/vocodes/src/v2/NewTopNav.tsx b/vocodes/src/v2/NewTopNav.tsx new file mode 100644 index 0000000000..bf7f9316e2 --- /dev/null +++ b/vocodes/src/v2/NewTopNav.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { SessionStateResponse } from '../v1/api/SessionState'; +import { SessionWrapper } from '../session/SessionWrapper'; +import { Link } from 'react-router-dom'; + +interface Props { + sessionState?: SessionStateResponse, + sessionWrapper: SessionWrapper, + ///historyBadgeCount: number, + //isHistoryCountBadgeVisible: boolean, + logoutHandler: () => void, +} + +function NewTopNav(props: Props) { + let badge = ; + + /*if (props.historyBadgeCount > 0) { + let className = "tag is-info is-light"; + + if (props.isHistoryCountBadgeVisible) { + className = "tag is-danger"; + } + + badge = {props.historyBadgeCount}; + }*/ + + let loggedIn = false; + let displayName = "My Account"; + + if (props.sessionState !== undefined) { + console.log('sessionstate', props.sessionState); + loggedIn = props.sessionState.logged_in; + if (props.sessionState.user !== undefined && + props.sessionState.user !== null) { + displayName = props.sessionState.user.display_name; + } + } + + // Vo.codes 2.0 + let loginManagement = ; + let extendedFeatures = ; + let column1 =
; + let column2 =
; + + if (true) { + if (loggedIn) { + loginManagement = ( + + {}}>{displayName} + {}}>Log Out + + ); + column1 = ( +
+ +
+ ); + } else { + loginManagement = ( + + {}}>Login + {}} className="signup">Sign Up + + ); + column1 = ( +
+ +
+ ); + column2 = ( +
+ +
+ ); + } + + extendedFeatures = ( +
+ NEW Community Features let you use Your Own Voices and Video: +
+
+ {}}>TTS + {}}>Video + {}}>Upload + {}}>My Data +
+ ); + } + + + return ( + + ) +} + +export { NewTopNav }; diff --git a/vocodes/src/v2/NewVocodesContainer.tsx b/vocodes/src/v2/NewVocodesContainer.tsx index eef965ee51..a537920fdc 100644 --- a/vocodes/src/v2/NewVocodesContainer.tsx +++ b/vocodes/src/v2/NewVocodesContainer.tsx @@ -4,7 +4,11 @@ import { LoginComponent } from './login/LoginComponent'; import { SignupComponent } from './signup/SignupComponent'; import { Switch, Route } from 'react-router-dom'; import { SessionWrapper } from '../session/SessionWrapper'; - +import { UploadComponent } from './upload/UploadComponent'; +import { FirehoseComponent } from './firehose/FirehoseComponent'; +import { ProfileComponent } from './profile/ProfileComponent'; +import { TtsModelListComponent } from './tts_model/TtsModelListComponent'; +import { W2lTemplateListComponent } from './w2l_template_list/W2lTemplateListComponent'; interface Props { sessionWrapper: SessionWrapper, @@ -36,6 +40,13 @@ class NewVocodesContainer extends React.Component { /> + + {}} + sessionWrapper={this.props.sessionWrapper} + /> + + {}} @@ -43,12 +54,41 @@ class NewVocodesContainer extends React.Component { /> + + {}} + sessionWrapper={this.props.sessionWrapper} + /> + + {}} sessionWrapper={this.props.sessionWrapper} /> + + + {}} + sessionWrapper={this.props.sessionWrapper} + /> + + + + {}} + sessionWrapper={this.props.sessionWrapper} + /> + + + + {}} + sessionWrapper={this.props.sessionWrapper} + /> + + diff --git a/vocodes/src/v2/firehose/FirehoseComponent.tsx b/vocodes/src/v2/firehose/FirehoseComponent.tsx new file mode 100644 index 0000000000..894b6636af --- /dev/null +++ b/vocodes/src/v2/firehose/FirehoseComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class FirehoseComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { FirehoseComponent }; \ No newline at end of file diff --git a/vocodes/src/v2/profile/ProfileComponent.tsx b/vocodes/src/v2/profile/ProfileComponent.tsx new file mode 100644 index 0000000000..9820e38cff --- /dev/null +++ b/vocodes/src/v2/profile/ProfileComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class ProfileComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { ProfileComponent }; \ No newline at end of file diff --git a/vocodes/src/v2/tts_model/TtsModelListComponent.tsx b/vocodes/src/v2/tts_model/TtsModelListComponent.tsx new file mode 100644 index 0000000000..7b698251c2 --- /dev/null +++ b/vocodes/src/v2/tts_model/TtsModelListComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class TtsModelListComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { TtsModelListComponent }; diff --git a/vocodes/src/v2/tts_model_view/TtsModelViewComponent.tsx b/vocodes/src/v2/tts_model_view/TtsModelViewComponent.tsx new file mode 100644 index 0000000000..148b09f4f4 --- /dev/null +++ b/vocodes/src/v2/tts_model_view/TtsModelViewComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class TtsModelViewComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { TtsModelViewComponent }; diff --git a/vocodes/src/v2/upload/UploadComponent.tsx b/vocodes/src/v2/upload/UploadComponent.tsx new file mode 100644 index 0000000000..cb9c8f6162 --- /dev/null +++ b/vocodes/src/v2/upload/UploadComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class UploadComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { UploadComponent }; diff --git a/vocodes/src/v2/w2l_template_list/W2lTemplateListComponent.tsx b/vocodes/src/v2/w2l_template_list/W2lTemplateListComponent.tsx new file mode 100644 index 0000000000..4227f3991a --- /dev/null +++ b/vocodes/src/v2/w2l_template_list/W2lTemplateListComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class W2lTemplateListComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { W2lTemplateListComponent }; \ No newline at end of file diff --git a/vocodes/src/v2/w2l_template_view/W2lTemplateViewComponent.tsx b/vocodes/src/v2/w2l_template_view/W2lTemplateViewComponent.tsx new file mode 100644 index 0000000000..b0b93b862d --- /dev/null +++ b/vocodes/src/v2/w2l_template_view/W2lTemplateViewComponent.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { ApiConfig } from '../../v1/api/ApiConfig'; +import { Mode } from '../../AppMode'; +import { SessionWrapper } from '../../session/SessionWrapper'; + +enum FieldTriState { + EMPTY_FALSE, + FALSE, + TRUE, +} + +interface Props { + sessionWrapper: SessionWrapper, + querySessionCallback : () => void, + switchModeCallback?: (mode: Mode) => void, +} + +interface State { + usernameOrEmail: string, + usernameOrEmailValid: FieldTriState, + usernameOrEmailInvalidReason: string, + + password: string, + passwordValid: FieldTriState, + passwordInvalidReason: string, +} + +class W2lTemplateViewComponent extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + usernameOrEmail: "", + usernameOrEmailValid: FieldTriState.EMPTY_FALSE, + usernameOrEmailInvalidReason: "", + + password: "", + passwordValid: FieldTriState.EMPTY_FALSE, + passwordInvalidReason: "", + }; + } + + handleUsernameOrEmailChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const usernameOrEmail = (ev.target as HTMLInputElement).value; + + this.setState({ + usernameOrEmail: usernameOrEmail, + }) + + return false; + } + + handlePasswordChange = (ev: React.FormEvent) => { + ev.preventDefault(); + + const password = (ev.target as HTMLInputElement).value; + + this.setState({ + password: password, + }) + + return false; + } + + handleFormSubmit = (ev: React.FormEvent) : boolean => { + ev.preventDefault(); + + const api = new ApiConfig(); + const endpointUrl = api.login(); + + const request = { + username_or_email: this.state.usernameOrEmail, + password: this.state.password, + } + + fetch(endpointUrl, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + }, + credentials: 'include', + body: JSON.stringify(request), + }) + .then(res => res.json()) + .then(res => { + console.log('login response', res) + if (res.success) { + console.log('querying new session'); + this.props.querySessionCallback(); + + if (this.props.switchModeCallback !== undefined) { + this.props.switchModeCallback(Mode.SPEAK_MODE); + } + return; + } + }) + .catch(e => { + //this.props.onSpeakErrorCallback(); + }); + + return false; + } + + public render() { + if (this.props.sessionWrapper.isLoggedIn()) { + return
Invalid view for logged in users.
; + } + + return ( +
+

Login

+ +

+ +
+
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+ + + + + + + +
+ {/*

*/} +
+ +
+ +
+
+ +
+
+
+
+ ) + } +} + +export { W2lTemplateViewComponent }; \ No newline at end of file