nilsbu / lastfm

Last.FM tools in Go
1 stars 0 forks source link

fix init #30

Open github-actions[bot] opened 1 year ago

github-actions[bot] commented 1 year ago

https://github.com/nilsbu/lastfm/blob/fae7bc70c9c0fe4d404320ba7e555c869f6c71e8/static/react/script.js#L11


const YEAR = new Date().getFullYear();

const CMD = {
    "year":        (v) => `/json/print/period/${v}`,
    "fade":        (v) => `/json/print/fade/${v}`,
    "fromYear":    (v) => `/json/print/total?by=year&name=${v}`,
};

const OPTS = {
    "pages": ["main", "years"],
    "years": Array.from({length: YEAR - 2007 + 1}, (x, i) => i + 2007), // TODO fix init
};

class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            page: OPTS.pages[0],
        };
    }

    choose = (page) => {
        this.setState(Object.assign({}, this.state, {
            page: page,
        }));
    }

    render() {
        return (
            <div className="container">
                <div className="row" style={{height: '10%'}}>
                    <Choices onSubmit={this.choose} type={OPTS.pages} page={this.state.page}/>
                </div>
                <Content page={this.state.page}/>
            </div>
        )
    }
}

function Content(props) {
    switch (props.page) {
    case "main":
        return (
            <div className="row" style={{height: '90%'}}>
                <div className="col-sm table-responsive" style={{height: '100%'}}><Charts name="year" param={YEAR}/></div>
                <div className="col-sm table-responsive" style={{height: '100%'}}><Charts name="fade" param="365"/></div>
                <div className="col-sm table-responsive" style={{height: '100%'}}><Charts name="fade" param="3653"/></div>
            </div>
        );
    case "years":
        return (
            <div className="row table-responsive" style={{height: '90%'}}>
                <ChosenCharts options={OPTS.years} func={"fromYear"} /> 
            </div>
        );
    }
}

class ChosenCharts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            current: props.options[0],
        };

        this.choose = (page) => this.setState(Object.assign({}, this.state, {
            current: page,
        }));
    }

    render() {
        return (
            <div>
                <div className="row" style={{height: '10%'}}>
                    <Choices onSubmit={this.choose} type={this.props.options} page={this.state.current}/>
                </div>
                <div className="col-sm table-responsive" style={{height: '100%'}} key={this.props.func+this.state.current}>
                    <Charts name={this.props.func} param={this.state.current}/>
                </div>
            </div>
    )}
}

class Charts extends React.Component {