diff options
author | 2020-02-02 19:27:46 +0000 | |
---|---|---|
committer | 2020-02-02 19:27:46 +0000 | |
commit | 1584ac712f243707197128b3e3d344e435bd2f31 (patch) | |
tree | 70ed41e168dd155a85010167a81a932967097345 /sdnr/wt/odlux/framework/src/views/about.tsx | |
parent | 33b86ad077a2e472df5d4ed15227298a238eb8ae (diff) | |
parent | 05ef023752abdb4f1e072332496dc7c6eaff8965 (diff) |
Merge "SDN-R add updated odlux"
Diffstat (limited to 'sdnr/wt/odlux/framework/src/views/about.tsx')
-rw-r--r-- | sdnr/wt/odlux/framework/src/views/about.tsx | 77 |
1 files changed, 64 insertions, 13 deletions
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx index d47e09c3a..59a71512c 100644 --- a/sdnr/wt/odlux/framework/src/views/about.tsx +++ b/sdnr/wt/odlux/framework/src/views/about.tsx @@ -15,17 +15,68 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react';
-
-const AboutComponent = () => {
-
- return (
- <div>
- <h2>About</h2>
- <div style={{ margin: "0 auto" }}>##odlux.version##</div>
- </div>
- );
-};
-
-export const About = AboutComponent;
+import * as React from 'react'; +import * as marked from 'marked'; +import * as hljs from 'highlight.js'; +import { requestRestExt } from '../services/restService'; +const defaultRenderer = new marked.Renderer(); +defaultRenderer.link = (href, title, text) => ( + `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>` +); +interface AboutState { + content: string | null; +} + +class AboutComponent extends React.Component<any, AboutState> { + + + constructor(props: any) { + super(props); + this.state = { content: null } + this.loadAboutContent(); + } + private loadAboutContent(): void { + requestRestExt<string>('/about').then((response) => { + this.setState({ content: response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error" }) + }).catch((error) => { + this.setState({ content: error }) + }) + } + render() { + + const markedOptions: marked.MarkedOptions = { + gfm: true, + breaks: false, + pedantic: false, + sanitize: true, + smartLists: true, + smartypants: false, + langPrefix: 'hljs ', + ...({}), + highlight: (code, lang) => { + if (!!(lang && hljs.getLanguage(lang))) { + return hljs.highlight(lang, code).value; + } + return code; + } + }; + + + const className = "about-table" + const style: React.CSSProperties = {}; + + const html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer })); + + return ( + <div + dangerouslySetInnerHTML={{ __html: html }} + className={className} + style={style} + /> + + ); + } +}; + +export const About = AboutComponent; export default About;
\ No newline at end of file |