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

Last change on this file since 964 was 964, checked in by Maciej Komosinski, 4 years ago

Improved layout, added one free-text question, properly counted the number of Parts in the Model instead of counting 'X' in the genotype

File size: 15.8 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 hands = [
14    { value: 'empty', label: ' ' },
15    { value: 'left', label: 'Lewa' },
16    { value: 'right', label: 'Prawa' },
17    { value: 'both', label: 'Obie' }
18];
19
20const currentYear = new Date().getFullYear();
21
22const years = [];
23years.push({value: 'empty', label: ' '})
24   
25for (let i = 0; i < 50; i += 1) {
26    years.push({ value: currentYear - i, label: currentYear - i });
27}
28
29const hours = [];
30hours.push({value: 'empty', label: ' '})
31   
32for (let i = 0; i < 16.5; i += 0.5) {
33    hours.push({ value: i, label: i });
34}
35
36const hours_week = [];
37hours_week.push({value: 'empty', label: ' '})
38   
39for (let i = 0; i < 26; i += 1) {
40    hours_week.push({ value: i, label: i });
41}
42
43const years_num = [];
44years_num.push({value: 'empty', label: ' '})
45   
46for (let i = 0; i < 31; i += 1) {
47    years_num.push({ value: i, label: i });
48}
49
50const language_num = [];
51language_num.push({value: 'empty', label: ' '})
52   
53for (let i = 0; i < 11; i += 1) {
54    language_num.push({ value: i, label: i });
55}
56
57const percent_num = [];
58percent_num.push({value: 'empty', label: ' '})
59   
60for (let i = 0; i < 101; i += 10) {
61    percent_num.push({ value: i, label: i });
62}
63
64const likert = [];
65likert.push({value: 'empty', label: ' '})
66likert.push({value: 'definetely_not', label: 'zdecydowanie się nie zgadzam'})
67likert.push({value: 'rather_not', label: 'raczej się nie zgadzam'})
68likert.push({value: 'undecided', label: 'trudno powiedzieć'})
69likert.push({value: 'rather_yes', label: 'raczej się zgadzam'})
70likert.push({value: 'definetely_yes', label: 'zdecydowanie się zgadzam'})
71
72const yes_no = [];
73yes_no.push({value: 'empty', label: ' '});
74yes_no.push({value: 'yes', label: 'tak'});
75yes_no.push({value: 'no', label: 'nie'});
76
77const musical_level = [];
78musical_level.push({value: 'empty', label: ' '});
79musical_level.push({value: 'amateur', label: 'amatorsko'});
80musical_level.push({value: 'proffesional', label: 'profesjonalnie'});
81musical_level.push({value: 'none', label: 'wcale'});
82
83const sports = [];
84sports.push({value: 'empty', label: ' '});
85sports.push({value: 'none', label: 'nie uprawiam sportu'});
86sports.push({value: 'cardio', label: 'wytrzymałościowy'});
87sports.push({value: 'strength', label: 'siłowy'});
88sports.push({value: 'intellectual', label: 'intelektualny'});
89sports.push({value: 'combination', label: 'jakaś kombinacja powyższych'});
90
91const styles = {
92    header: {
93        display: 'table',
94        width: '100%',
95        height: '20px'
96    },
97    row: {
98        display: 'table',
99        width: '100%',
100        tableLayout: 'fixed'
101    },
102    desc: {
103        display: 'table-cell',
104        textAlign: 'right',
105        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
106        webkitUserSelect : 'none',
107        mozUserSelect: 'none',
108        msUserSelect: 'none',
109        userSelect: 'none'
110    },
111    ind: {
112        display: 'table-cell',
113        width: '20px',
114        webkitUserSelect : 'none',
115        mozUserSelect: 'none',
116        msUserSelect: 'none',
117        userSelect: 'none'
118    },
119    select: {
120        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
121    }
122}
123
124/**
125 * Component for adding user parameters
126 */
127class ParmViewer extends React.Component {
128    /**
129     * Basic constructor.
130     * @param {any} props properties of Component
131     */
132    constructor(props) {
133        super(props);
134        this.props = props;
135        this.state = {};
136    }
137
138     
139    render() {
140       
141        return (
142            <div>
143                <div style={styles.header}/>
144                <div className='age' style={styles.row}>
145                    <span htmlFor="age" style={styles.desc}>Rok urodzenia</span>
146                    <Select
147                        options={years}
148                        onChange={this.props.handleChangeYear}
149                        placeholder={'Wybierz rok urodzenia'}
150                        display={'table-cell'}
151                        height={'20px'}
152                        styles={styles.select}
153                        noValidate
154                    />
155                    <div style={styles.ind}/>
156                </div>
157                <div className='gender' style={styles.row}>
158                    <span htmlFor="gender" style={styles.desc}>Płeć</span>
159                    <Select
160                        options={genders}
161                        onChange={this.props.handleChangeGender}
162                        placeholder='Wybierz płeć'
163                        display={'table-cell'}
164                        height={'20px'}
165                        styles={styles.select}
166                        noValidate
167                    />
168                    <div style={styles.ind}/>
169                </div>
170                    <div className='hand' style={styles.row}>
171                    <span htmlFor="hand" style={styles.desc}>Dominująca ręka</span>
172                    <Select
173                        options={hands}
174                        onChange={this.props.handleChangeHand}
175                        placeholder='Wybierz dominującą rękę'
176                        display={'table-cell'}
177                        height={'20px'}
178                        styles={styles.select}
179                        noValidate
180                    />
181                    <div style={styles.ind}/>
182                </div>               
183                <div className='sleep_hours' style={styles.row}>
184                    <span htmlFor="sleep_hours" style={styles.desc}>Średnia liczba godzin snu</span>
185                    <Select
186                        options={hours}
187                        onChange={this.props.handleChangeSleepHours}
188                        placeholder={'Wybierz średnią liczbę godzin snu'}
189                        display={'table-cell'}
190                        height={'20px'}
191                        styles={styles.select}
192                        noValidate
193                    />
194                    <div style={styles.ind}/>
195                </div>
196                <div className='sleep_hours_today' style={styles.row}>
197                    <span htmlFor="sleep_hours_today" style={styles.desc}>Liczba godzin snu dzisiaj</span>
198                    <Select
199                        options={hours}
200                        onChange={this.props.handleChangeSleepHoursToday}
201                        placeholder={'Wybierz liczbę godzin snu dzisiejszej nocy'}
202                        display={'table-cell'}
203                        height={'20px'}
204                        styles={styles.select}
205                        noValidate
206                    />
207                    <div style={styles.ind}/>
208                </div>
209                <div className='years_game_playing' style={styles.row}>
210                    <span htmlFor="years_game_playing" style={styles.desc}>Liczba lat grania w gry komputerowe</span>
211                    <Select
212                        options={years_num}
213                        onChange={this.props.handleChangeYearsGamePlaying}
214                        placeholder={'Wybierz liczbę lat grania w gry komputerowe'}
215                        display={'table-cell'}
216                        height={'20px'}
217                        styles={styles.select}
218                        noValidate
219                    />
220                    <div style={styles.ind}/>
221                </div>
222                <div className='hours_game_playing' style={styles.row}>
223                    <span htmlFor="hours_game_playing" style={styles.desc}>Średnio godzin grania w gry komputerowe na dobę</span>
224                    <Select
225                        options={hours}
226                        onChange={this.props.handleChangeHoursGamePlaying}
227                        placeholder={'Wybierz średnią liczbę godzin grania w gry komputerowe na dobę'}
228                        display={'table-cell'}
229                        height={'20px'}
230                        styles={styles.select}
231                        noValidate
232                    />
233                    <div style={styles.ind}/>
234                </div>
235                <div className='musical_experience' style={styles.row}>
236                    <span htmlFor="musical_experience" style={styles.desc}>Gram na instrumencie lub śpiewam: poziom</span>
237                    <Select
238                        options={musical_level}
239                        onChange={this.props.handleChangeMusicalExperience}
240                        placeholder={'Wybierz na jakim poziomie grasz na instrumencie lub śpiewasz'}
241                        display={'table-cell'}
242                        height={'20px'}
243                        styles={styles.select}
244                        noValidate
245                    />
246                    <div style={styles.ind}/>
247                </div>
248                <div className='musical_duration' style={styles.row}>
249                    <span htmlFor="musical_duration" style={styles.desc}>Gram na instrumencie lub śpiewam: liczba lat</span>
250                    <Select
251                        options= {years_num}
252                        onChange={this.props.handleChangeMusicalDuration}
253                        placeholder={'Wybierz ile lat grasz na instrumencie lub śpiewasz'}
254                        display={'table-cell'}
255                        height={'20px'}
256                        styles={styles.select}
257                        noValidate
258                    />
259                    <div style={styles.ind}/>
260                </div>
261                <div className='languages' style={styles.row}>
262                    <span htmlFor="languages" style={styles.desc}>Liczba języków obcych</span>
263                    <Select
264                        options= {language_num}
265                        onChange={this.props.handleChangeLanguages}
266                        placeholder={'Wybierz ilu języków obcych się uczysz/uczyłeś/uczyłaś'}
267                        display={'table-cell'}
268                        height={'20px'}
269                        styles={styles.select}
270                        noValidate
271                    />
272                    <div style={styles.ind}/>
273                </div>
274                <div className='sport_years' style={styles.row}>
275                    <span htmlFor="sport_years" style={styles.desc}>Liczba lat treningu sportowego</span>
276                    <Select
277                        options= {years_num}
278                        onChange={this.props.handleChangeSportYears}
279                        placeholder={'Wybierz od ilu lat uprawiasz sport'}
280                        display={'table-cell'}
281                        height={'20px'}
282                        styles={styles.select}
283                        noValidate
284                    />
285                    <div style={styles.ind}/>
286                </div>
287                <div className='sport_hours' style={styles.row}>
288                    <span htmlFor="sport_hours" style={styles.desc}>Liczba godzin treningu sportowego tygodniowo</span>
289                    <Select
290                        options= {hours_week}
291                        onChange={this.props.handleChangeSportHours}
292                        placeholder={'Wybierz ile godzin tygodniowo uprawiasz sport'}
293                        display={'table-cell'}
294                        height={'20px'}
295                        styles={styles.select}
296                        noValidate
297                    />
298                    <div style={styles.ind}/>
299                </div>
300                <div className='strength_percent' style={styles.row}>
301                    <span htmlFor="strength_percent" style={styles.desc}>Procent komponentu siłowego w aktywności sportowej</span>
302                    <Select
303                        options= {percent_num}
304                        onChange={this.props.handleChangeStrengthPercent}
305                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent siłowy'}
306                        display={'table-cell'}
307                        height={'20px'}
308                        styles={styles.select}
309                        noValidate
310                    />
311                    <div style={styles.ind}/>
312                </div>
313                <div className='cardio_percent' style={styles.row}>
314                    <span htmlFor="cardio_percent" style={styles.desc}>Procent komponentu wytrzymałościowego w aktywności sportowej</span>
315                    <Select
316                        options= {percent_num}
317                        onChange={this.props.handleChangeCardioPercent}
318                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent wytrzymałościowy'}
319                        display={'table-cell'}
320                        height={'20px'}
321                        styles={styles.select}
322                        noValidate
323                    />
324                    <div style={styles.ind}/>
325                </div>
326                    <div className='intellect_percent' style={styles.row}>
327                    <span htmlFor="intellect_percent" style={styles.desc}>Procent komponentu intelektualnego w aktywności sportowej</span>
328                    <Select
329                        options= {percent_num}
330                        onChange={this.props.handleChangeIntellectPercent}
331                        placeholder={'Wybierz ile procent twojej aktywności stanowi komponent intelektualny'}
332                        display={'table-cell'}
333                        height={'20px'}
334                        styles={styles.select}
335                        noValidate
336                    />
337                    <div style={styles.ind}/>
338                </div>
339                <div className='cons' style={styles.row}>
340                    <span htmlFor="cons" style={styles.desc}>Uważam się za osobę sumienną</span>
341                    <Select
342                        options= {likert}
343                        onChange={this.props.handleChangeCons}
344                        placeholder={'Wybierz na ile zgadzasz się ze zdaniem po lewej'}
345                        display={'table-cell'}
346                        height={'20px'}
347                        styles={styles.select}
348                        noValidate
349                    />
350                    <div style={styles.ind}/>
351                </div>
352                <div className='calculations' style={styles.row}>
353                    <span htmlFor="calculations" style={styles.desc}>Uważam, że sprawnie wykonuję obliczenia w pamięci</span>
354                    <Select
355                        options= {likert}
356                        onChange={this.props.handleChangeCalculations}
357                        placeholder={'Wybierz na ile zgadzasz się ze zdaniem po lewej'}
358                        display={'table-cell'}
359                        height={'20px'}
360                        styles={styles.select}
361                        noValidate
362                    />
363                    <div style={styles.ind}/>
364                </div>
365                <div className='navigation' style={styles.row}>
366                    <span htmlFor="navigation" style={styles.desc}>Uważam, że sprawnie posługuję się mapą/nawigacją i dobrze orientuję się w terenie</span>
367                    <Select
368                        options= {likert}
369                        onChange={this.props.handleChangeNavigation}
370                        placeholder={'Wybierz na ile zgadzasz się ze zdaniem po lewej'}
371                        display={'table-cell'}
372                        height={'20px'}
373                        styles={styles.select}
374                        noValidate
375                    />
376                    <div style={styles.ind}/>
377                </div>
378            </div>
379        );
380    }
381}                   
382
383export default ParmViewer;
Note: See TracBrowser for help on using the repository browser.