Init

Preview: http://dashboards.webkom.co/react/airframe
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
--- a/app/routes/components/VersionSelector.js
+++ b/app/routes/components/VersionSelector.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import fetch from 'node-fetch';
+import classNames from 'classnames';
+import _ from 'lodash';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import {
+    UncontrolledButtonDropdown,
+    DropdownMenu,
+    DropdownItem,
+    DropdownToggle
+} from './../../components';
+
+const SERVICE_URL = "http://dashboards.webkom.co:8000";
+
+export class VersionSelector extends React.Component {
+    static propTypes = {
+        dashboard: PropTypes.string,
+        down: PropTypes.bool,
+        compact: PropTypes.bool,
+        render: PropTypes.func,
+        className: PropTypes.string,
+        sidebar: PropTypes.bool
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            versions: [],
+            isError: false,
+            render: null
+        };
+    }
+
+    async fetchVersions() {
+        const { dashboard } = this.props;
+        let versions;
+        try {
+            versions = await fetch(`${SERVICE_URL}/dashboards/versions`)
+                .then(response => response.json());
+        } catch(exc) {
+            this.setState({ isError: true })
+        }
+        const targetVersions = _.filter(versions, { dashboardName: dashboard });
+        
+        this.setState({ versions: targetVersions });
+    }
+
+    componentDidMount() {
+        this.fetchVersions();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.dashboard !== this.props.dashboard) {
+            this.fetchVersions();
+        }
+    }
+
+    render() {
+        const { down, render, className, sidebar } = this.props;
+        const { versions } = this.state;
+        const currentVersion = _.find(versions, { label: "React" });
+
+        return (
+            <UncontrolledButtonDropdown direction={ down ? "down" : "up" } className={ className }>
+                <DropdownToggle
+                    disabled={ _.isEmpty(versions) }
+                    tag="a"
+                    href="javascript:;"
+                    className={classNames(
+                        'btn-switch-version',
+                        {
+                            'sidebar__link': sidebar,
+                        }
+                    )}
+                >
+                    {
+                        currentVersion ? (
+                            render ? render(currentVersion) : (
+                                <React.Fragment>
+                                    React {currentVersion.version} <i className={`fa ${down ? "fa-angle-down" : "fa-angle-up"} ml-2`}></i>
+                                    <br />
+                                    <span className={ classNames('small', { 'sidebar__link--muted': sidebar }) }>
+                                        { moment(currentVersion.date).format("ddd, MMM DD, YYYY h:mm:ss A") }
+                                    </span>
+                                </React.Fragment>
+                            )
+                        ) : (
+                            <span>Loading...</span>
+                        )
+                    }
+                </DropdownToggle>
+                {
+                    (!_.isEmpty(versions)) && (
+                        <DropdownMenu>
+                            <DropdownItem header>
+                                Bootstrap 4 Versions:
+                            </DropdownItem>
+                            {
+                                _.map(versions, (version, index) => (
+                                    <DropdownItem
+                                        key={ index }
+                                        href={ version.demoUrl }
+                                        className="d-flex"
+                                        active={ version === currentVersion }
+                                    >
+                                        <span>
+                                            { version.label } { version.version }
+                                            <br />
+                                            <span className="small">
+                                                { moment(version.date).format("ddd, MMM DD, YYYY h:mm:ss A") }
+                                            </span>
+                                        </span>
+                                        {
+                                            (version === currentVersion) && (
+                                                <i className="fa fa-fw fa-check text-success ml-auto align-self-center pl-3" />
+                                            )
+                                        }
+                                    </DropdownItem>
+                                ))
+                            }
+                        </DropdownMenu>
+                    )
+                }
+            </UncontrolledButtonDropdown>
+        );
+    }
+}