source: js/human_3d_alignment/src/index.jsx @ 944

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

Added more questions to questionnaire
File size: 36.6 KB
Line 
1/*global Module*/
2"use strict";
3import http from 'http';
4import React from 'react';
5import Genotypes from './utils/genotypes';
6import TitlePanel from './viewskeleton/titlepanel';
7import WidgetsContainer from './viewskeleton/widgetscontainer';
8import TextViewer from './widgets/textviewer';
9import ParmViewer from './widgets/parmviewer';
10import SimilViewer from './widgets/similviewer';
11import FitViewer from './widgets/fitviewer';
12import SliderViewer from './widgets/sliderviewer';
13import EndViewer from './widgets/endviewer';
14
15const ROUNDS = 15;
16
17const styles = {
18    contentHeaderMenuLink: {
19        textDecoration: 'none',
20        color: 'white',
21        padding: 8,
22    },
23    content: {
24        padding: '16px',
25    },
26    sidebarLink: {
27        display: 'block',
28        padding: '16px 0px',
29        color: 'gray',
30        textDecoration: 'none',
31    },
32    divider: {
33        margin: '8px 0',
34        height: 1,
35        backgroundColor: 'gray',
36    },
37};
38
39
40/**
41 * Main class running Framsticks.JS page.
42 */
43class MainView extends React.Component {
44    /**
45     * Basic constructor holding informations about sidebar states
46     * @param {any} props component properties
47     */
48    constructor(props) {
49        super(props);
50        this.onLayoutChange = this.onLayoutChange.bind(this);
51
52        window.genetics = new Module.PreconfiguredGenetics();
53        window.logger = new Module.LoggerToStdout(Module.LoggerBase.Enable); // While this object exists, all messages emitted by SDK loggers will be printf()'ed and consequently will appear in the JS console.
54        this.layout = [
55            {name:'0,textviewer', x: 0, y: 0, w: 12, h: 1},
56            {name:'2,similviewer', x: 0, y: 1, w: 6, h: 4},
57            {name:'3,fitviewer', x: 6, y: 1, w: 6, h: 2},
58            {name:'4,sliderviewer', x: 6, y: 3, w: 6, h: 2},
59            {name:'1,parmviewer', x: 9, y: 6, w: 12, h: 1}
60        ];
61
62        this.container = <WidgetsContainer onRef={ref => (this.widgetscontainer = ref)} onLayoutChange={this.onLayoutChange} />;
63
64        this.state = {
65            genotypes: 0,
66            round: 0,
67            genotype1: '',
68            genotype2: '',
69            pairs: [],
70            id1: 0,
71            id2: 0,
72            parts1: 0,
73            parts2: 0,
74            selected1: [],
75            selected2: [],
76            position1: [0, 0, 0],
77            position2: [0, 0, 0],
78            rotation1: [0, 0, 0],
79            rotation2: [0, 0, 0],
80            userId: 0,
81            userIp: 'localhost',
82            timeStart: 0,
83            selectedGender: {value: "empty", label: " "},
84            selectedYear: {value: "empty", label: " "},
85            selectedSleepHours: {value: "empty", label: " "},
86            selectedSleepHoursToday: {value: "empty", label: " "},
87            selectedHand: {value: "empty", label: " "},
88            selectedYearsGamePlaying: {value: "empty", label: " "},
89            selectedHoursGamePlaying: {value: "empty", label: " "},
90            selectedMusicalExperience: {value: "empty", label: " "},
91            selectedMusicalDuration: {value: "empty", label: " "},
92            selectedLanguages: {value: "empty", label: " "},
93            selectedSportYears: {value: "empty", label: " "},
94            selectedSportHours: {value: "empty", label: " "},
95            selectedSportType: {value: "empty", label: " "},
96            selectedCons: {value: "empty", label: " "},
97            selectedCalculations: {value: "empty", label: " "},
98            selectedNavigation: {value: "empty", label: " "},
99            percent: 0,
100            sliderUpdated: true,
101            isDisable: true,
102            isFinished: false,
103            fitHeight: 2,
104            fitWidth: 6,
105            controlMode: 'translate',
106            blockView: true,
107            result: ''
108        };
109
110        this.start = this.start.bind(this);
111        this.getIp = this.getIp.bind(this);
112        this.nextRound = this.nextRound.bind(this);
113        this.saveRound = this.saveRound.bind(this);
114        this.saveFit = this.saveFit.bind(this);
115        this.refresh = this.refresh.bind(this);
116        this.sendToServer = this.sendToServer.bind(this);
117        this.finishApp = this.finishApp.bind(this);
118        this.isReady = this.isReady.bind(this);
119        this.isFitted = this.isFitted.bind(this);
120        this.browserData = this.browserData.bind(this);
121        this.loadNewGenotypes = this.loadNewGenotypes.bind(this);
122        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
123        this.handleChangeId = this.handleChangeId.bind(this);
124        this.handleChangeIp = this.handleChangeIp.bind(this);
125        this.handleChangeGender =  this.handleChangeGender.bind(this);
126        this.handleChangeHand =  this.handleChangeHand.bind(this);
127        this.handleChangeYearsGamePlaying =  this.handleChangeYearsGamePlaying.bind(this);
128        this.handleChangeHoursGamePlaying =  this.handleChangeHoursGamePlaying.bind(this);
129        this.handleChangeYear = this.handleChangeYear.bind(this);
130        this.handleChangeSleepHours = this.handleChangeSleepHours.bind(this);
131        this.handleChangeSleepHoursToday = this.handleChangeSleepHoursToday.bind(this);
132        this.handleChangeMusicalExperience = this.handleChangeMusicalExperience.bind(this);
133        this.handleChangeMusicalDuration = this.handleChangeMusicalDuration.bind(this);
134        this.handleChangeLanguages = this.handleChangeLanguages.bind(this);
135        this.handleChangeSportYears = this.handleChangeSportYears.bind(this);
136        this.handleChangeSportHours = this.handleChangeSportHours.bind(this);
137        this.handleChangeSportType = this.handleChangeSportType.bind(this);
138        this.handleChangeCons = this.handleChangeCons.bind(this);
139        this.handleChangeCalculations = this.handleChangeCalculations.bind(this);
140        this.handleChangeNavigation = this.handleChangeNavigation.bind(this);
141        this.handleChangePercent = this.handleChangePercent.bind(this);
142        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
143        this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
144        this.handleChangeFitWidth = this.handleChangeFitWidth.bind(this);
145        this.handleChangeControlMode = this.handleChangeControlMode.bind(this);
146        this.handleChangePosition1 = this.handleChangePosition1.bind(this);
147        this.handleChangePosition2 = this.handleChangePosition2.bind(this);
148        this.handleChangeRotation1 = this.handleChangeRotation1.bind(this);
149        this.handleChangeRotation2 = this.handleChangeRotation2.bind(this);
150        this.handleChangeBlockView = this.handleChangeBlockView.bind(this);
151        this.onClickNext = this.onClickNext.bind(this);
152        this.onClickFinish = this.onClickFinish.bind(this);
153    }
154
155    /**
156     * Uses default layout.
157    */
158    componentDidMount() {
159        window.addEventListener( 'keydown', ( event ) => {
160            switch ( event.keyCode ) {
161                case 84: // T
162                    this.handleChangeControlMode( "translate" );
163                    break;
164                case 82: // R
165                    this.handleChangeControlMode( "rotate" );
166                    break;
167            }
168        } );
169        let timeStart = new Date();
170        this.handleChangeStartTime(timeStart); //set time start
171        this.handleChangeId(  Math.round(timeStart.getTime() / 1000).toString() +  (Math.floor(Math.random() * (9999999 - 1000000 + 1) ) + 1000000).toString() + this.browserData().toString() ); //set user id = time + random + browserData_hash
172        this.getIp();   //set user ip
173        this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
174        //or another URL...
175        let head = "'User ID'|'User IP'|'Gender'|'Year of birth'|'Handeness'|'Sleep hours'|'Sleep hours today'|'YearsGamePlaying'|'HoursGamePlaying'|'Musical experience'|'MusicalDuration'|'Languages'|'SportYears'|'SportHours'|'SportType'|'Cons'|'Calculations'|'Navigation'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'\n"
176        this.handleChangeResult(head);
177    }
178
179    /**
180     * Calls resize event in order to properly set layout
181    */
182    componentDidUpdate() {
183        //window.dispatchEvent(new Event('resize'));
184        if (this.state.genotype1 != '' && this.state.genotype2 != '') {
185            this.useLayout(this.layout);
186        }
187    }
188
189
190    /**
191     * Start questionnaire if genotypes are loaded
192     */
193    start() {
194        this.setState({ genotypes: this.genotypes.id.length }, function() {
195            console.log(`Genotypes: `, this.state.genotypes);
196        });
197
198        this.loadNewGenotypes();
199        this.handleChangeBlockView(false);
200        this.useLayout(this.layout);
201    }
202
203    getIp() {
204        http.get({'host': 'api.ipify.org', 'port': 80, 'path': '/'}, (resp) => {
205            resp.on('data', ip => {
206                this.handleChangeIp(ip)
207            });
208        });
209    }
210
211    /**
212     * Save data about this round
213     */
214    saveRound() {
215        this.setState({ sliderUpdated: false }, function() {
216            console.log('Slider Updated: ' + this.state.sliderUpdated);
217        });
218        this.isReady();
219    }
220
221    /**
222     * Preset result as:
223     * user ID - IP - gender - year of born - start : end - position of 1. : position of 2.
224     * - rotation of 1. : rotation of 2. - id of 1. : id of second - pairs (1. mesh : 2. mesh) - fit result (0 - 100) ;
225     */
226    saveFit() {
227        let min = Math.min(this.state.parts1, this.state.parts2);
228        let timeStop = new Date();
229        let start = this.state.timeStart;
230        let stop = timeStop;
231        start = ("0" + start.getDate()).slice(-2) + '.' + ("0" + (start.getMonth() + 1)).slice(-2) + '.' + start.getFullYear() + ' ' + String(start.getHours()).padStart(2, '0') + ':' + String(start.getMinutes()).padStart(2, '0') + ':' + String(start.getSeconds()).padStart(2, '0');
232        stop = ("0" + stop.getDate()).slice(-2) + '.' + ("0" + (stop.getMonth() + 1)).slice(-2) + '.' + stop.getFullYear() + ' ' + String(stop.getHours()).padStart(2, '0') + ':' + String(stop.getMinutes()).padStart(2, '0') + ':' + String(stop.getSeconds()).padStart(2, '0');
233
234        let fit =   this.state.userId + '|' +
235                    this.state.userIp + '|' +
236                    this.state.selectedGender.value + '|' +
237                    this.state.selectedYear.value + '|' +
238                    this.state.selectedHand.value + '|' +
239                    this.state.selectedSleepHours.value + '|' +
240                    this.state.selectedSleepHoursToday.value + '|' +
241                    this.state.selectedYearsGamePlaying.value + '|' +
242                    this.state.selectedHoursGamePlaying.value + '|' +
243                    this.state.selectedMusicalExperience.value + '|' +
244                    this.state.selectedMusicalDuration.value + '|' +
245                    this.state.selectedLanguages.value + '|' +
246                    this.state.selectedSportYears.value + '|' +
247                    this.state.selectedSportHours.value + '|' +
248                    this.state.selectedSportType.value + '|' +
249                    this.state.selectedCons.value + '|' +
250                    this.state.selectedCalculations.value + '|' +
251                    this.state.selectedNavigation.value + '|' +
252                    start + '|' +
253                    stop + '|' +
254                    '(' + this.state.position1[0] + ',' + this.state.position1[1] + ',' + this.state.position1[2] + ')|' + 
255                    '(' + this.state.position2[0] + ',' + this.state.position2[1] + ',' + this.state.position2[2] + ')|' + 
256                    '(' + this.state.rotation1[0] + ',' + this.state.rotation1[1] + ',' + this.state.rotation1[2] + ')|' + 
257                    '(' + this.state.rotation2[0] + ',' + this.state.rotation2[1] + ',' + this.state.rotation2[2] + ')|'; 
258                   
259       
260        let pair = this.state.pairs[this.state.pairs.length - 1];
261        fit = fit + this.genotypes.id[pair[0]] + '|' + this.genotypes.id[pair[1]] + '|';
262
263        for (let i = 0; i < min; i++) {
264            fit = fit + this.state.selected1[i] + ':' + (this.state.selected2[i].charCodeAt(0) - 65 + 1);
265            if (i < min - 1) {
266                fit = fit + ';';
267            }
268        }
269        fit = fit + '|' + this.state.percent + '\n';
270
271        this.sendToServer(fit);
272
273        this.handleChangeResult(this.state.result + fit);
274        this.handleChangeStartTime(timeStop);
275    }
276
277
278
279    sendToServer(fit) {
280        let rawFile = new XMLHttpRequest();
281        rawFile.addEventListener('load', () => {
282            console.log(rawFile.responseText);
283        });
284        rawFile.addEventListener('error', () => {
285            console.log('Błąd wysyłania na serwer');
286        });
287       
288        rawFile.open("POST", 'https://ptsv2.com/t/b7nhq-1578108725/post'); //or another URL...
289        rawFile.setRequestHeader("Content-type", 'text/plain');
290        rawFile.send(fit);
291    }
292
293    /**
294     * Load next pair of genotypes
295     */
296    nextRound() {
297        this.loadNewGenotypes();
298        this.handleChangeBlockView(false);
299    }
300
301    /**
302     * Refresh used default layout
303     */
304    refresh() {
305        this.useLayout(this.layout);
306    }
307
308    /**
309     * Load new genotypes to simulator viewer
310     */
311    loadNewGenotypes() {
312        //Firstly it chooses pair of genotypes that user doesnt used before
313        let rand1, rand2, amount1, amount2, gen1, gen2;
314
315        do {
316            rand1 = 0, rand2 = 0;
317            do  {
318                while (rand1 == rand2) {
319                    rand1 = Math.floor(Math.random() * this.state.genotypes);
320                    rand2 = Math.floor(Math.random() * this.state.genotypes);
321                }
322            } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
323
324            //This part load genotypes to the state
325            gen1 = this.genotypes.genotype[rand1];
326            gen2 = this.genotypes.genotype[rand2];
327            amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
328            amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
329            if (amount1 > 0) {
330                amount1++;
331            }
332            if (amount2 > 0) {
333                amount2++
334            }
335        } while (amount1 > 52 || amount2 > 52);
336
337        let newpairs = this.state.pairs;
338        if (amount1 <= amount2) {
339            newpairs.push([rand1, rand2]);
340            this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
341                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
342            });
343            this.setState({parts1: amount1, parts2: amount2}, function() {
344                console.log(this.state.parts1 + ' ' + this.state.parts2);
345            });
346        } else {
347            newpairs.push([rand2, rand1]);
348            this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
349                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
350            });
351            this.setState({parts1: amount2, parts2: amount1}, function() {
352                console.log(this.state.parts1 + ' ' + this.state.parts2);
353            });
354        }
355        this.setState({ pairs: newpairs }, function() {
356            console.log(`Pairs: `, this.state.pairs);
357        });
358
359        //Load tables of selected parts in fitviewer
360        let min = Math.min(amount1, amount2);
361        let s1 = [];
362        let s2 = [];
363        for (let i = 0; i < min; i++) {
364            s1.push((i+1).toString());
365            s2.push(' ');
366        }
367
368        //Start new round and load to state tables of selected and round
369        let r = this.state.round + 1;
370        this.setState({ round: r, selected1: s1, selected2: s2}, function() {
371            console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
372        });
373    }
374
375    /**
376     * Check if the user is ready to go to the next question by checking if all the answers are selected
377     */
378    isReady() {
379        if (this.state.selectedSportType.value != 'empty' && this.state.selectedYearsGamePlaying.value != 'empty' && this.state.selectedHoursGamePlaying.value != 'empty' && this.state.selectedMusicalDuration.value != 'empty' && this.state.selectedLanguages.value != 'empty' && this.state.selectedSportYears.value != 'empty' && this.state.selectedSportHours.value != 'empty' && this.state.selectedCons.value != 'empty' && this.state.selectedCalculations.value != 'empty' && this.state.selectedNavigation.value != 'empty' && this.state.selectedMusicalExperience.value != 'empty' && this.state.selectedGender.value != 'empty' && this.state.selectedSleepHoursToday.value != 'empty' && this.state.selectedSleepHours.value != 'empty' && this.state.selectedHand.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
380            this.setState({isDisable: false}, function() {
381                console.log(this.state.isDisable);
382            });
383        } else {
384            if (!this.state.isDisable) {
385                this.setState({isDisable: true}, function() {
386                    console.log(this.state.isDisable);
387                });
388            }
389        }
390    }
391
392    /**
393     * Check is user matched all needed sticks
394     */
395    isFitted() {
396        let index1 = this.state.selected1.indexOf(' ');
397        let index2 = this.state.selected2.indexOf(' ');
398
399        if (index1 < 0 && index2 < 0 && this.state.sliderUpdated) {
400            this.setState({sliderUpdated: false}, function() {
401                console.log(this.state.sliderUpdated);
402                this.isReady();
403            });
404        }
405    }
406
407    /**
408     * Return hash data of browser
409     */
410    browserData() {
411        let data = navigator.userAgent;
412        let hash = 0;
413        for (let i = 0; i < data.length; i++) {
414            let character = data.charCodeAt(i);
415            hash = ((hash<<5)-hash)+character;
416            hash = hash & hash; // Convert to 32bit integer
417        }
418        return hash;
419    }
420
421    /**
422     * Performed at the end of the survey
423     */
424    finishApp() {
425        this.layout = [
426            {name:'5,endviewer', x: 0, y: 0, w: 12, h: 4}
427        ];
428        this.useLayout(this.layout);
429    }
430
431    /**
432     * Allow to change gender in state
433     * @param {string} gen choosed gender by user in listbox
434     */
435    handleChangeGender(gen) {
436        this.setState({ selectedGender: gen }, function() {
437            console.log(`Gender selected:`, this.state.selectedGender);
438            this.isReady();
439        });
440    };
441   
442     /**
443     * Allow to change sport type in state
444     * @param {string} sport type choosed sport type by user in listbox
445     */
446    handleChangeSportType(sporttype) {
447        this.setState({ selectedSportType: sporttype }, function() {
448            console.log(`Sport type selected:`, this.state.selectedSportType);
449            this.isReady();
450        });
451    };
452   
453         /**
454     * Allow to years game playing type in state
455     * @param {string} gameyp type choosed years game playing by user in listbox
456     */
457    handleChangeYearsGamePlaying(gameyp) {
458        this.setState({ selectedYearsGamePlaying: gameyp }, function() {
459            console.log(`Years game playing selected:`, this.state.selectedYearsGamePlaying);
460            this.isReady();
461        });
462    };
463
464         /**
465     * Allow to hours game playing type in state
466     * @param {string} gamehp type choosed hours game playing by user in listbox
467     */   
468    handleChangeHoursGamePlaying(gamehp) {
469        this.setState({ selectedHoursGamePlaying: gamehp }, function() {
470            console.log(`Hours game playing selected:`, this.state.selectedHoursGamePlaying);
471            console.log(this.genotypes.id.length)
472            this.isReady();
473        });
474    };
475   
476    /**
477     * Allow to change musical expereince in state
478     * @param {string} musexp choosed musical expereince by user in listbox
479     */
480    handleChangeMusicalExperience(musexp) {
481        this.setState({ selectedMusicalExperience: musexp }, function() {
482            console.log(`Musical experience selected:`, this.state.selectedMusicalExperience);
483            this.isReady();
484        });
485    };
486   
487     /**
488     * Allow to change hand in state
489     * @param {string} hand choosed hand by user in listbox
490     */
491    handleChangeHand(hand) {
492        this.setState({ selectedHand: hand }, function() {
493            console.log(`Hand selected:`, this.state.selectedHand);
494            this.isReady();
495        });
496    };
497   
498     /**
499     * Allow to change musical duration in state
500     * @param {string} musdur choosed musical duration by user in listbox
501     */
502    handleChangeMusicalDuration(musdur) {
503        this.setState({ selectedMusicalDuration: musdur }, function() {
504            console.log(`Musical hours selected:`, this.state.selectedMusicalDuration);
505            this.isReady();
506        });
507    };
508   
509     /**
510     * Allow to languages hand in state
511     * @param {string} languages choosed languages by user in listbox
512     */
513    handleChangeLanguages(languages) {
514        this.setState({ selectedLanguages: languages }, function() {
515            console.log(`Languages selected:`, this.state.selectedLanguages);
516            this.isReady();
517        });
518    };
519   
520    /**
521     * Allow to change sport years hand in state
522     * @param {string} sportyr choosed sport years by user in listbox
523     */
524    handleChangeSportYears(sportyr) {
525        this.setState({ selectedSportYears: sportyr }, function() {
526            console.log(`Sport years selected:`, this.state.selectedSportYears);
527            this.isReady();
528        });
529    };
530   
531     /**
532     * Allow to change sport hours in state
533     * @param {string} sporthr choosed sport hours by user in listbox
534     */
535    handleChangeSportHours(sporthr) {
536        this.setState({ selectedSportHours: sporthr }, function() {
537            console.log(`Sport hours selected:`, this.state.selectedSportHours);
538            this.isReady();
539        });
540    };
541   
542    /**
543     * Allow to change conscientiousness in state
544     * @param {string} cons choosed hand by user in listbox
545     */
546    handleChangeCons(cons) {
547        this.setState({ selectedCons: cons }, function() {
548            console.log(`Conscientiousness selected:`, this.state.selectedCons);
549            this.isReady();
550        });
551    };
552   
553     /**
554     * Allow to change calculations in state
555     * @param {string} calculations choosed calculations by user in listbox
556     */
557    handleChangeCalculations(calculations) {
558        this.setState({ selectedCalculations: calculations }, function() {
559            console.log(`Calculations selected:`, this.state.selectedCalculations);
560            this.isReady();
561        });
562    };
563   
564     /**
565     * Allow to change navigation in state
566     * @param {string} navigation choosed navigation by user in listbox
567     */
568    handleChangeNavigation(navigation) {
569        this.setState({ selectedNavigation: navigation }, function() {
570            console.log(`Navigation selected:`, this.state.selectedNavigation);
571            this.isReady();
572        });
573    };
574   
575    /**
576     * Allow to change IP
577     * @param {number} ip user IP
578     */
579    handleChangeIp(ip) {
580        this.setState({ userIp: ip }, function() {
581            console.log(`IP:`, this.state.userIp);
582        });
583    }
584   
585    /**
586     * Allow to change user ID
587     * @param {number} id user ID
588     */
589    handleChangeId(id) {
590        this.setState({ userId: id }, function() {
591            console.log(`ID:`, this.state.userId);
592        });
593    }
594   
595    /**
596     * Allow to change start time
597     * @param {number} time time of begging fitting framsticks
598     */
599    handleChangeStartTime(time) {
600        this.setState({ timeStart: time }, function() {
601            console.log(`Start time:`, this.state.timeStart);
602        });
603    }
604
605    /**
606     * Allow to change birth year in state
607     * @param {number} year choosed birth year by user in listbox
608     */
609    handleChangeYear(year) {
610        this.setState({ selectedYear: year }, function() {
611            console.log(`Birth year selected:`, this.state.selectedYear);
612            this.isReady();
613        });
614    }
615
616        /**
617     * Allow to change birth year in state
618     * @param {number} year choosed birth year by user in listbox
619     */
620    handleChangeSleepHours(hours) {
621        this.setState({ selectedSleepHours: hours }, function() {
622            console.log(`Birth year selected:`, this.state.selectedSleepHours);
623            this.isReady();
624        });
625    }
626   
627            /**
628     * Allow to change birth year in state
629     * @param {number} year choosed birth year by user in listbox
630     */
631    handleChangeSleepHoursToday(hours) {
632        this.setState({ selectedSleepHoursToday: hours }, function() {
633            console.log(`Birth year selected:`, this.state.selectedSleepHoursToday);
634            this.isReady();
635        });
636    }
637
638    /**
639     * Allow to change percent in state and mark this in state.sliderUpdated
640     * @param {Integer} per choosed similarity of framsticks by user in percentage
641     */
642    handleChangePercent(per) {
643        this.setState({ percent: per, sliderUpdated: true }, function() {
644            console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
645            this.isReady();
646        });
647    }
648
649    /**
650     *
651     * @param {number} nr framstick id
652     * @param {number} pos position on the match map
653     * @param {*} val id of choosed stick
654     */
655    handleChangeSelected(nr, pos, val) {
656        if (nr == 1) {
657            this.setState(state => {
658                const selected1 = state.selected1.map((item, i) => {
659                    if (pos === i) {
660                        return val;
661                    } else {
662                        return item;
663                    }
664                });
665
666                return {
667                    selected1,
668                };
669            },  function() {
670                console.log(this.state.selected1);
671                this.isFitted();
672            });
673        } else {
674            this.setState(state => {
675                const selected2 = state.selected2.map((item, i) => {
676                    if (pos === i) {
677                        let v = val.charCodeAt(0);
678                        if (v > 90) {
679                            v = v - 6;
680                        }
681                        let res = String.fromCharCode(v);
682                        return res;
683                    } else {
684                        return item;
685                    }
686                });
687
688                return {
689                    selected2,
690                };
691            }, function() {
692                console.log(this.state.selected2);
693                this.isFitted();
694            });
695        }
696    }
697   
698    /**
699     * Function to inform fitviewer about change of height to update scrollbar (for firefox)
700     * @param {number} h height
701     */
702    handleChangeFitHeight(h) {
703        this.setState({ fitHeight: h }, function() {
704            console.log(`Fit Height:`, this.state.fitHeight);
705        });
706    }
707   
708    /**
709     * Function to inform fitviewer about change of width to update scrollbar (for firefox)
710     * @param {number} w width
711     */
712    handleChangeFitWidth(w) {
713        this.setState({ fitWidth: w }, function() {
714            console.log(`Fit Width:`, this.state.fitWidth);
715        });
716    }
717
718    /**
719     * Allow to change transform controler mode
720     * @param {number} mode translate or rotation
721     */
722    handleChangeControlMode(mode) {
723        this.setState({ controlMode: mode }, function() {
724            console.log(`Control mode:`, this.state.controlMode);
725        });
726    }
727
728    /**
729     * Allow to save actural position of first genotype
730     * @param {Array} pos position [x, y, z] of first genotype
731     */
732    handleChangePosition1(pos) {
733        this.setState({ position1: pos}, function() {
734            console.log('Position1: ', this.state.position1);
735        });
736    }
737
738    /**
739     * Allow to save actural position of second genotype
740     * @param {Array} pos position [x, y, z] of second genotype
741     */
742    handleChangePosition2(pos) {
743        this.setState({ position2: pos}, function() {
744            console.log('Position2: ', this.state.position2);
745        });
746    }
747
748    /**
749     * Allow to save actural rotation of first genotype
750     * @param {Array} rot rotation [x, y, z] of first genotype
751     */
752    handleChangeRotation1(rot) {
753        this.setState({ rotation1: rot}, function() {
754            console.log('Rotation1: ', this.state.rotation1);
755        });
756    }
757
758    /**
759     * Allow to save actural rotation of second genotype
760     * @param {Array} rot rotation [x, y, z] of second genotype
761     */
762    handleChangeRotation2(rot) {
763        this.setState({ rotation2: rot}, function() {
764            console.log('Rotation2: ', this.state.rotation2);
765        });
766    }
767
768    /**
769     * Allow to block view in simviewer
770     * @param {Array} rot rotation [x, y, z] of second genotype
771     */
772    handleChangeBlockView(bool) {
773        this.setState({ blockView: bool}, function() {
774            console.log('Block View: ', this.state.blockView);
775        });
776    }
777
778    /**
779     * Allow to change finish result that will be save in the file at the end
780     * @param {string} res text to be save in file
781     */
782    handleChangeResult(res) {
783        this.setState({ result: res }, function() {
784            console.log('Result: ', this.state.result);
785        });
786    }
787
788    /**
789     * Next button function
790     */
791    onClickNext() {
792        this.handleChangeBlockView(true);
793        this.saveFit();
794        if (this.state.round == ROUNDS) {
795            this.setState({ isFinished: true }, function() {
796                console.log('Finish state: ' + this.state.isFinished);
797   
798                if (this.state.isFinished) {
799                    this.finishApp();
800                }
801            });
802        } else {
803            this.nextRound();
804        }
805    }
806
807    /**
808     * Close button function
809     */
810    onClickFinish() {
811        this.setState({ isFinished: true }, function() {
812            console.log('Finish state: ' + this.state.isFinished);
813
814            if (this.state.isFinished) {
815                this.finishApp();
816            }
817        });
818    }
819
820    /**
821     * Stores layout, for LocalStorage layout saving
822     * @param {any} layout layout to be saved
823     */
824    onLayoutChange(layout) {
825        let newlayout = [];
826        for (let i = 0; i < layout.length; i++) {
827            newlayout.push({name: layout[i].i, x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
828            if (newlayout[i].name == '2fitviewer') {
829                this.handleChangeFitHeight(newlayout[i].h);
830                this.handleChangeFitWidth(newlayout[i].w);
831            }
832        }
833    }
834    /**
835     * Passes layout to widgetscontainer.
836     * @param {any} layout layout to be used
837     */
838    useLayout(layout) {
839        let items = [];
840        for (let i = 0; i < layout.length; i++) {
841            let name = layout[i].name.split(',')[1];
842            switch (name) {
843                case 'textviewer':
844                    items.push({content: <TextViewer/>, i: "" + i + 'textviewer',
845                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
846                    break;
847                case 'similviewer':
848                    items.push({content: <SimilViewer
849                            genotype1 = {this.state.genotype1}
850                            genotype2 = {this.state.genotype2}
851                            selected1 = {this.state.selected1}
852                            selected2 = {this.state.selected2}
853                            blockView = {this.state.blockView}
854                            handleChangePosition1 = {(pos) => this.handleChangePosition1(pos)}
855                            handleChangePosition2 = {(pos) => this.handleChangePosition2(pos)}
856                            handleChangeRotation1 = {(rot) => this.handleChangeRotation1(rot)}
857                            handleChangeRotation2 = {(rot) => this.handleChangeRotation2(rot)}
858                            controlMode = {this.state.controlMode}
859                            round = {this.state.round}/>,
860                        i: "" + i + 'similviewer',
861                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
862                    break;
863                case 'parmviewer':
864                    items.push({content: <ParmViewer
865                            handleChangeYear = {(year) => {this.handleChangeYear(year)}}
866                            handleChangeSleepHours = {(hours) => {this.handleChangeSleepHours(hours)}}
867                            handleChangeSleepHoursToday = {(hours) => {this.handleChangeSleepHoursToday(hours)}}                           
868                            handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
869                            handleChangeSportType = {(gen) => {this.handleChangeSportType(gen)}}
870                            handleChangeMusicalExperience = {(gen) => {this.handleChangeMusicalExperience(gen)}}
871                            handleChangeHand = {(hand) => {this.handleChangeHand(hand)}}
872                            handleChangeYearsGamePlaying = {(hand) => {this.handleChangeYearsGamePlaying(hand)}}
873                            handleChangeHoursGamePlaying = {(hand) => {this.handleChangeHoursGamePlaying(hand)}}
874                            handleChangeMusicalDuration = {(hand) => {this.handleChangeMusicalDuration(hand)}}
875                            handleChangeLanguages = {(hand) => {this.handleChangeLanguages(hand)}}
876                            handleChangeSportHours = {(hand) => {this.handleChangeSportHours(hand)}}
877                            handleChangeSportYears = {(hand) => {this.handleChangeSportYears(hand)}}
878                            handleChangeCons = {(hand) => {this.handleChangeCons(hand)}}
879                            handleChangeCalculations = {(hand) => {this.handleChangeCalculations(hand)}}
880                            handleChangeNavigation = {(hand) => {this.handleChangeNavigation(hand)}}                                               
881                        />,
882                        i: "" + i + 'parmviewer',
883                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
884                    break;
885                case 'fitviewer':
886                    items.push({content: <FitViewer
887                            selected1 = {this.state.selected1}
888                            selected2 = {this.state.selected2}
889                            parts1 = {this.state.parts1}
890                            parts2 = {this.state.parts2}
891                            fitHeight = {this.state.fitHeight}
892                            fitWidth = {this.state.fitWidth}
893                            handleChangeSelected = {(nr, pos, val) => {this.handleChangeSelected(nr, pos, val)}}/>,
894                        i: "" + i + 'fitviewer',
895                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
896                    break;
897                case 'sliderviewer':
898                    items.push({content: <SliderViewer
899                            isDisable = {this.state.isDisable}
900                            parts1 = {this.state.parts1}
901                            parts2 = {this.state.parts2}
902                            selected1 = {this.state.selected1}
903                            selected2 = {this.state.selected2}
904                            onClickNext = {() => {this.onClickNext()}}
905                            onClickFinish = {() => {this.onClickFinish()}}
906                            handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
907                        i: "" + i + 'sliderviewer',
908                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
909                    break;
910                case 'endviewer':
911                    items.push({content: <EndViewer
912                            userId = {this.state.userId}
913                            result = {this.state.result}/>,
914                        i: "" + i + 'endviewer',
915                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
916                    break;
917            }
918        }
919        this.widgetscontainer.addMultipleItems(items);
920    }
921
922    /**
923     * Render function.
924     * @returns {JSX.Element} main page of Framsticks.JS
925     */
926    render() {
927       
928        const contentHeader = (
929            <span>   
930                <span style={{marginLeft: '20px', fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"}}>
931                    Badanie
932                </span>
933            </span>
934        );
935
936        return (
937            <TitlePanel
938                title={contentHeader}
939            >
940                <div style={styles.content}>
941                    {this.container}
942                </div>
943            </TitlePanel>
944        );
945    }
946}
947
948export default MainView;
Note: See TracBrowser for help on using the repository browser.