Context Navigation

fitviewer.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: 19.9 KB

Line
1	/global Module/
2	"use strict";
3
4	import React from 'react';
5
6
7	const styles = {
8	header: {
9	textAlign: 'center',
10	lineHeight: '0.1',
11	letterSpacing: '5px',
12	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
13	webkitUserSelect : 'none',
14	mozUserSelect: 'none',
15	msUserSelect: 'none',
16	userSelect: 'none'
17	},
18	info: {
19	textAlign: 'center',
20	lineHeight: '0.1',
21	fontSize: '10px',
22	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
23	webkitUserSelect : 'none',
24	mozUserSelect: 'none',
25	msUserSelect: 'none',
26	userSelect: 'none'
27	},
28	creatureText: {
29	margin: '0',
30	position: 'absolute',
31	top: '50%',
32	left: '50%',
33	marginRight: '-50%',
34	transform: 'translate(-50%, -50%)',
35	webkitUserSelect : 'none',
36	mozUserSelect: 'none',
37	msUserSelect: 'none',
38	userSelect: 'none',
39	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
40	},
41	creatureBench: {
42	position: 'relative',
43	border: '2px solid black',
44	color: 'white',
45	backgroundColor: 'gray',
46	width: '50px',
47	height: '50px',
48	fontSize: '30px',
49	pointerEvent: 'none',
50	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
51	},
52	creatureBench1: {
53	position: 'relative',
54	border: '2px solid black',
55	color: 'white',
56	backgroundColor: 'red',
57	width: '50px',
58	height: '50px',
59	fontSize: '30px',
60	pointerEvents: 'none',
61	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
62	},
63	creatureBench2: {
64	position: 'relative',
65	border: '2px solid black',
66	color: 'white',
67	backgroundColor: 'blue',
68	width: '50px',
69	height: '50px',
70	fontSize: '30px',
71	pointerEvents: 'none',
72	fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
73	},
74	middleField:{
75	position: 'relative',
76	color: 'gray',
77	backgroundColor: 'gray',
78	width: '54px',
79	height: '54px',
80	webkitUserSelect: 'none',
81	mozUserSelect: 'none',
82	msUserSelect: 'none',
83	userSelect: 'none'
84	},
85	emptyField: {
86	display: 'table',
87	width: '100%',
88	height: '20px'
89	},
90	field: {
91	display: 'flex'
92	},
93	empty: {
94	webkitUserSelect : 'none',
95	mozUserSelect: 'none',
96	msUserSelect: 'none',
97	userSelect: 'none'
98	},
99	cell: {
100	display: 'table-cell'
101	},
102	row: {
103	display: 'table-row',
104	}
105	};
106
107	/**
108	* Component for assesing genotypes matching.
109	*/
110	class FitViewer extends React.Component {
111	/**
112	* Basic constructor.
113	* @param {any} props properties of Component
114	*/
115	constructor(props) {
116	super(props);
117	this.props = props;
118
119	this.state = {
120	height: 2,
121	choosed: ' ',
122	initialX: 0,
123	initialY: 0
124	}
125
126	this.createSecondRow = this.createSecondRow.bind(this);
127	this.createThirdRow = this.createThirdRow.bind(this);
128	this.createFourthRow = this.createFourthRow.bind(this);
129	this.select = this.select.bind(this);
130	}
131
132	select(e) {
133	let item = null;
134	let index;
135
136	for (let i = 0; i < this.props.parts1; i++) {
137	let index2 = (i+1).toString();
138	let itemD = document.querySelector('#creature' + index2);
139	let itemP = document.querySelector('#p' + index2);
140	if (e.target === itemD \|\| e.target === itemP) {
141	item = null;
142	index = index2;
143	item = document.querySelector('#creature' + index);
144	}
145	}
146
147	for (let i = 0; i < this.props.parts2; i++) {
148	let index2 = '';
149	if (i + 1 + 64 > 90) {
150	index2 = String.fromCharCode(i + 1 + 70);
151	} else {
152	index2 = String.fromCharCode(i + 1 + 64);
153	}
154	let itemD = document.querySelector('#creature' + index2);
155	let itemP = document.querySelector('#p' + index2);
156	if (e.target === itemD \|\| e.target === itemP) {
157	item = null;
158	index = index2;
159	item = document.querySelector('#creature' + index);
160	}
161	}
162
163	if (this.state.choosed != ' ') {
164	if (!item) {
165	if (!isNaN(this.state.choosed)) {
166	for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
167	let index2 = (i+1).toString();
168	let itemD = document.querySelector('#field1-' + index2);
169
170
171	if (e.target === itemD) {
172	let index3 = this.props.selected1.indexOf(this.state.choosed);
173
174	if (index3 > -1) {
175	this.props.handleChangeSelected(1, index3, ' ');
176	}
177	this.props.handleChangeSelected(1, i, this.state.choosed);
178	}
179	}
180	} else {
181	for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
182	let index2 = (i+1).toString();
183	let itemD = document.querySelector('#field2-' + index2);
184
185
186	if (e.target === itemD) {
187
188	let temp = this.state.choosed;
189	if (this.state.choosed.charCodeAt(0) > 90) {
190	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
191	}
192
193	let index3 = this.props.selected2.indexOf(temp);
194
195	if (index3 > -1) {
196	this.props.handleChangeSelected(2, index3, ' ');
197	}
198	this.props.handleChangeSelected(2, i, this.state.choosed);
199	}
200	}
201	}
202	this.setState({ choosed: ' ' }, function() {
203	console.log(this.state.choosed);
204	});
205
206	} else {
207	let item2 = document.querySelector('#creature' + this.state.choosed);
208	if ((item.parentNode.parentNode.parentNode.className == 'rowField' \|\| item.parentNode.parentNode.parentNode.className == 'rowBench') &&
209	(item2.parentNode.parentNode.parentNode.className == 'rowField' \|\| item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
210	let nr = 0;
211	let index1 = 0;
212	let index2 = 0;
213	let temp = this.state.choosed;
214	if (this.state.choosed.charCodeAt(0) > 90) {
215	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
216	}
217	if (!isNaN(this.state.choosed)) {
218	nr = 1;
219	index1 = this.props.selected1.indexOf(this.state.choosed);
220	index2 = this.props.selected1.indexOf(index);
221	} else {
222	nr = 2;
223	let temp1 = this.state.choosed;
224	let temp2 = index;
225	if (this.state.choosed.charCodeAt(0) > 90) {
226	temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
227	}
228	if (index.charCodeAt(0) > 90) {
229	temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
230	}
231
232	index1 = this.props.selected2.indexOf(temp);
233	index2 = this.props.selected2.indexOf(temp2);
234	}
235	this.props.handleChangeSelected(nr, index1, index);
236	this.props.handleChangeSelected(nr, index2, this.state.choosed);
237
238	this.setState({ choosed: ' ' }, function() {
239	console.log(this.state.choosed);
240	});
241	} else {
242	if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode \|\|
243	item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
244	let nr = 0;
245	let index1 = 0;
246	let index2 = 0;
247	if (!isNaN(this.state.choosed)) {
248	nr = 1;
249	index1 = this.props.selected1.indexOf(this.state.choosed);
250	index2 = this.props.selected1.indexOf(index);
251	} else {
252	nr = 2;
253	let temp = this.state.choosed;
254	let temp2 = index;
255	if (this.state.choosed.charCodeAt(0) > 90) {
256	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
257	}
258	if (index.charCodeAt(0) > 90) {
259	temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
260	}
261	index1 = this.props.selected2.indexOf(temp);
262	index2 = this.props.selected2.indexOf(temp2);
263	}
264	this.props.handleChangeSelected(nr, index1, index);
265	this.props.handleChangeSelected(nr, index2, this.state.choosed);
266	this.setState({ choosed: ' ' }, function() {
267	console.log(this.state.choosed);
268	});
269	} else {
270	this.setState({ choosed: index }, function() {
271	console.log(this.state.choosed);
272	});
273	}
274	}
275	}
276	} else {
277	if (item != null) {
278	this.setState({ choosed: index }, function() {
279	console.log(this.state.choosed);
280	});
281	}
282	}
283	}
284
285	createSecondRow() {
286	let row = []
287	let len = Math.min(this.props.parts1, this.props.parts2);
288	for (let i = 0; i < len; i++) {
289	if (this.props.selected1[i] != ' ') {
290	if (this.props.selected1[i] && this.state.choosed == this.props.selected1[i]) {
291	row.push(
292	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
293	<div id={'field1-'+(i+1).toString()}
294	className='field'
295	style={styles.middleField}>
296	<div id={'creature' + this.props.selected1[i]}
297	className='creature1'
298	onMouseDown={this.select}
299	style={styles.creatureBench1}>
300	<p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
301	{this.props.selected1[i]}
302	</p>
303	</div>
304	</div>
305	</div>
306	);
307	} else {
308	row.push(
309	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
310	<div id={'field1-'+(i+1).toString()}
311	className='field'
312	style={styles.middleField}>
313	<div id={'creature' + this.props.selected1[i]}
314	className='creature1'
315	onMouseDown={this.select}
316	style={styles.creatureBench}>
317	<p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
318	{this.props.selected1[i]}
319	</p>
320	</div>
321	</div>
322	</div>
323	);
324	}
325	} else {
326	row.push(
327	<div id='cellnull' className='cell' style={styles.cell}>
328	<div id={'field1-'+(i+1).toString()}
329	onMouseDown = {this.select}
330	className='field'
331	style={styles.middleField}>
332
333	</div>
334	</div>
335	);
336	}
337	}
338	if (row.length == 0) {
339	row.push(
340	<div style={styles.empty}> </div>
341	);
342	}
343	return row;
344	}
345
346	createThirdRow() {
347	let row = [];
348	let len = Math.min(this.props.parts1, this.props.parts2);
349	for (let i = 0; i < len; i++) {
350	if (this.props.selected2[i] && this.props.selected2[i] != ' ') {
351	let value = this.props.selected2[i];
352	let char = value.charCodeAt(0);
353	if (char > 90) {
354	char += 6;
355	value = String.fromCharCode(char);
356	}
357	if (this.state.choosed == value) {
358	row.push(
359	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
360	<div id={'field2-'+(i+1).toString()}
361	className='field'
362	style={styles.middleField}>
363	<div id={'creature' + value}
364	className='creature2'
365	onMouseDown={this.select}
366	style={styles.creatureBench2}>
367	<p id={'p' + value} style={styles.creatureText}>
368	{value}
369	</p>
370	</div>
371	</div>
372	</div>
373	);
374	} else {
375	row.push(
376	<div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
377	<div id={'field2-'+(i+1).toString()}
378	className='field'
379	style={styles.middleField}>
380	<div id={'creature' + value}
381	className='creature2'
382	onMouseDown={this.select}
383	style={styles.creatureBench}>
384	<p id={'p' + value} style={styles.creatureText}>
385	{value}
386	</p>
387	</div>
388	</div>
389	</div>
390	);
391	}
392	} else {
393	row.push(
394	<div id='cellnull' className='cell' style={styles.cell}>
395	<div id={'field2-'+(i+1).toString()}
396	onMouseDown = {this.select}
397	className='field'
398	style={styles.middleField}>
399	</div>
400	</div>
401	);
402	}
403	}
404	if (row.length == 0) {
405	row.push(
406	<div style={styles.empty}> </div>
407	);
408	}
409	return row;
410	}
411
412	createFourthRow() {
413	let row = [];
414	for (let i = 0; i < this.props.parts2; i++) {
415	let idtext = '';
416	let idtext1 = String.fromCharCode(i + 1 + 64);
417	if (i + 1 + 64 >= 91) {
418	idtext = String.fromCharCode(i + 1 + 70);
419	} else {
420	idtext = idtext1;
421	}
422
423	if (this.props.selected2.indexOf(idtext1) < 0) {
424	if (this.state.choosed == idtext) {
425	row.push(
426	<div id={'cell'+idtext} className='cell' style={styles.cell}>
427	<div id={'creature' + idtext}
428	className='creature2'
429	onMouseDown={this.select}
430	style={styles.creatureBench2}>
431	<p id={'p' + idtext} style={styles.creatureText}>
432	{idtext}
433	</p>
434	</div>
435	</div>
436	);
437	} else {
438	row.push(
439	<div id={'cell'+idtext} className='cell' style={styles.cell}>
440	<div id={'creature' + idtext}
441	className='creature2'
442	onMouseDown={this.select}
443	style={styles.creatureBench}>
444	<p id={'p' + idtext} style={styles.creatureText}>
445	{idtext}
446	</p>
447	</div>
448	</div>
449	);
450	}
451	}
452	}
453	if (row.length == 0) {
454	row.push(
455	<div id='cellnull' className='cell' style={styles.cell}>
456	<div style={styles.empty}> </div>
457	</div>
458	);
459	}
460	return row;
461	}
462
463	render() {
464	let h = ((this.props.fitHeight * 150 - 16) + 8 * (this.props.fitHeight - 1)).toString() + 'px';
465	let w = ((this.props.fitWidth * 150 - 16) + 8 * (this.props.fitWidth - 1)).toString() + 'px';
466
467	return (
468	<div id='fit' className='fit' onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>{/* style={{position: 'relative', width: w, height: h, whiteSpace: 'no-wrap', overflow: 'auto'}}>*/}
469	<h2 className='title' style={styles.header}>
470	DOPASOWANIE
471	</h2>
472	<div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
473	<div id='rowCreature1' onMouseDown = {this.select}>
474	<div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
475	{this.createSecondRow()}
476	</div>
477	</div>
478	<div className='text' style={styles.info}>
479	w najwyższy rząd cyferek nie klikamy
480	</div>
481	<div id='rowCreature2'>
482	<div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
483	{this.createThirdRow()}
484	</div>
485	<div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
486	{this.createFourthRow()}
487	</div>
488	</div>
489	</div>
490	</div>
491	);
492	}
493	}
494
495	export default FitViewer;

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format