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

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

Added more questions to questionnaire

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