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

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

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

File size: 5.7 KB
Line 
1/*global Module*/
2"use strict";
3
4import React from 'react';
5import Slider from 'react-input-slider';
6
7const styles = {
8    header: {
9        textAlign: 'center',
10        letterSpacing: '5px',
11        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
12        webkitUserSelect : 'none',
13        mozUserSelect: 'none',
14        msUserSelect: 'none',
15        userSelect: 'none'
16    },
17    interval: {
18        display: 'table',
19        width: '100%',
20        height: '20px'
21    },
22    small_interval: {
23        display: 'table',
24        width: '100%',
25        height: '5px'
26    },
27    slider_position: {
28        textAlign: 'center',
29        width: '100%'
30    },
31    nextButton_position: {
32        display: 'table',
33        width: '100%',
34        textAlign: 'center'
35    },
36    finishButton_position: {
37        display: 'table',
38        width: '90%',
39        textAlign: 'right'
40    },
41    slider: {
42        width: '80%'
43    },
44    textArea: {
45        display: 'table',
46    marginLeft: 'auto',
47    marginRight: 'auto'
48    },
49    nextButton: {
50        width: '250px',
51        height: '50px',
52        fontSize: '28px'
53    },
54    finishButton: {
55        width: '200px',
56        height: '40px',
57        backgroundColor: 'red',
58        color: 'white',
59        fontSize: '16px'
60    },
61    percent: {
62        textAlign: 'center',
63        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
64        webkitUserSelect : 'none',
65        mozUserSelect: 'none',
66        msUserSelect: 'none',
67        userSelect: 'none'
68    }
69}
70
71/**
72 * Component for adding user parameters
73 */
74class SliderViewer extends React.Component {
75    /**
76     * Basic constructor.
77     * @param {any} props properties of Component
78     */
79    constructor(props) {
80        super(props);
81        this.props = props;
82        this.state = {
83            percent: 50,
84            textValue: ''
85        }
86
87        this.handleChangePercent = this.handleChangePercent.bind(this);
88        this.handleChangeText = this.handleChangeText.bind(this);
89        this.onClickNext = this.onClickNext.bind(this);
90    }
91   
92    /**
93     * Allow to change percent in state of sliderViewer and set it also in props
94     * @param {number} per choosed similarity of framsticks by user in percentage
95     */
96    handleChangePercent(per) {
97        this.setState({ percent: per.x }, function() {
98            console.log(this.state.percent);
99            this.props.handleChangePercent(this.state.percent);
100        });
101    }
102   
103    handleChangeText(text_) {
104        this.setState({ textValue: text_.target.value }, function() {
105            this.props.handleChangeText(this.state.textValue);
106        });
107    }
108
109    onClickNext() {
110        let index1 = this.props.selected1.indexOf(' ');
111        let index2 = this.props.selected2.indexOf(' ');
112
113        if (index1 < 0 && index2 < 0) {
114            this.props.onClickNext();
115            this.setState({ percent: 50 }, function() {
116                console.log(this.state.percent);
117                this.props.handleChangePercent(this.state.percent);
118            });
119            this.setState({ textValue: '' }, function() {
120                console.log(this.state.percent);
121                this.props.handleChangeText(this.state.textValue);
122            });
123        } else {
124            let min = '';
125            let max = '';
126            if (this.props.parts1 <= this.props.parts2) {
127                min = 'pierwszego';
128                max = 'drugiego';
129            } else {
130                min = 'drugiego';
131                max = 'pierwszego';
132            }
133            alert('Należy dopasować wszystkie wierzchołki z '+min+' modelu z wierzchołkami '+max+' modelu.');
134        }
135       
136    }
137
138    render() {
139        return (
140            <div onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
141                <h2 className='title' style={styles.header}>
142                    PODOBIEŃSTWO
143                </h2>
144                <div style={styles.interval}/>
145                <div className='slider' style={styles.slider_position}>
146                    <Slider
147                        min={0}
148                        max={100}
149                        x = {this.state.percent}
150                        percent = {this.state.percent}
151                        style={styles.slider}
152                        onChange={this.handleChangePercent}
153                    />
154                </div>
155                <div style={styles.small_interval}/>
156                <div className='percent' style={styles.percent}>
157                    {this.state.percent} %
158                </div>
159                <div style={styles.interval}/>
160                <div style={styles.nextButton_position}>
161                    <button type='button' onClick={this.onClickNext} disabled={this.props.isDisable} style={styles.nextButton}>
162                        Następny
163                    </button>
164                </div>
165                <div style={styles.interval}/>
166               
167                <div className="text">
168                <textarea value={this.state.textValue} onChange={this.handleChangeText} cols={75} rows={1} style={styles.textArea} placeholder={'Napisz krótko dlaczego dokonałaś/eś akurat takiego dopasowania'}/>
169                </div>
170                {/*
171                <div style={styles.finishButton_position}>
172                    <button type='button' onClick={this.props.onClickFinish} style={styles.finishButton}>
173                        Zamknij
174                    </button>
175                </div>
176                */}
177               
178            </div>
179        );
180    }
181}
182
183export default SliderViewer;
Note: See TracBrowser for help on using the repository browser.