source: js/human_3d_alignment/src/widgets/parmviewer.jsx @ 911

Last change on this file since 911 was 911, checked in by Maciej Komosinski, 5 years ago

Added the actual functionality of the app in place of previous draft

File size: 2.9 KB
Line 
1/*global Module*/
2"use strict";
3
4import React from 'react';
5import Select from 'react-select';
6
7const genders = [
8    { value: 'empty', label: ' ' },
9    { value: 'man', label: 'Mężczyzna' },
10    { value: 'woman', label: 'Kobieta' }
11];
12
13const currentYear = new Date().getFullYear();
14
15const years = [];
16years.push({value: 'empty', label: ' '})
17   
18for (let i = 0; i < 120; i += 1) {
19    years.push({ value: currentYear - i, label: currentYear - i });
20}
21
22const styles = {
23    header: {
24        display: 'table',
25        width: '100%',
26        height: '20px'
27    },
28    row: {
29        display: 'table',
30        width: '100%',
31        tableLayout: 'fixed'
32    },
33    desc: {
34        display: 'table-cell',
35        textAlign: 'right',
36        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
37        webkitUserSelect : 'none',
38        mozUserSelect: 'none',
39        msUserSelect: 'none',
40        userSelect: 'none'
41    },
42    ind: {
43        display: 'table-cell',
44        width: '20px',
45        webkitUserSelect : 'none',
46        mozUserSelect: 'none',
47        msUserSelect: 'none',
48        userSelect: 'none'
49    },
50    select: {
51        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
52    }
53}
54
55/**
56 * Component for adding user parameters
57 */
58class ParmViewer extends React.Component {
59    /**
60     * Basic constructor.
61     * @param {any} props properties of Component
62     */
63    constructor(props) {
64        super(props);
65        this.props = props;
66        this.state = {};
67    }
68     
69    render() {
70       
71        return (
72            <div>
73                <div style={styles.header}/>
74                <div className='age' style={styles.row}>
75                    <span htmlFor="age" style={styles.desc}>Wiek</span>
76                    <Select
77                        options={years}
78                        onChange={this.props.handleChangeYear}
79                        placeholder={'Wybierz rok urodzenia'}
80                        display={'table-cell'}
81                        height={'20px'}
82                        styles={styles.select}
83                        noValidate
84                    />
85                    <div style={styles.ind}/>
86                </div>
87                <div className='gender' style={styles.row}>
88                    <span htmlFor="gender" style={styles.desc}>Płeć</span>
89                    <Select
90                        options={genders}
91                        onChange={this.props.handleChangeGender}
92                        placeholder='Wybierz płeć'
93                        display={'table-cell'}
94                        height={'20px'}
95                        styles={styles.select}
96                        noValidate
97                    />
98                    <div style={styles.ind}/>
99                </div>
100            </div>
101        );
102    }
103}                   
104
105export default ParmViewer;
Note: See TracBrowser for help on using the repository browser.