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

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