Context Navigation

fitviewer.jsx @ 1162

Last change on this file since 1162 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

Rev	Line
[911]	1	/global Module/
	2	"use strict";
	3
	4	import React from 'react';
	5
	6
	7	const styles = {
	8	header: {
	9	textAlign: 'center',
[964]	10	lineHeight: '0.1',
[911]	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	},
[964]	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	},
[911]	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);
[964]	129	this.select = this.select.bind(this);
[911]	130	}
	131
[964]	132	select(e) {
[911]	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);
[964]	140	if (e.target === itemD \|\| e.target === itemP) {
[911]	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);
[964]	153	}
[911]	154	let itemD = document.querySelector('#creature' + index2);
	155	let itemP = document.querySelector('#p' + index2);
[964]	156	if (e.target === itemD \|\| e.target === itemP) {
	157	item = null;
[911]	158	index = index2;
[964]	159	item = document.querySelector('#creature' + index);
[911]	160	}
	161	}
	162
	163	if (this.state.choosed != ' ') {
[964]	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);
[911]	169
[964]	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);
[911]	178	}
[964]	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);
[911]	184
[964]	185
	186	if (e.target === itemD) {
[911]	187
[964]	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);
[911]	199	}
	200	}
	201	}
	202	this.setState({ choosed: ' ' }, function() {
	203	console.log(this.state.choosed);
	204	});
[964]	205
[912]	206	} else {
[964]	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;
[911]	213	let temp = this.state.choosed;
[964]	214	if (this.state.choosed.charCodeAt(0) > 90) {
[911]	215	temp = String.fromCharCode(temp.charCodeAt(0) - 6);
	216	}
[964]	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	}
[911]	231
[964]	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);
[911]	266	this.setState({ choosed: ' ' }, function() {
	267	console.log(this.state.choosed);
	268	});
	269	} else {
[964]	270	this.setState({ choosed: index }, function() {
	271	console.log(this.state.choosed);
	272	});
[911]	273	}
	274	}
	275	}
	276	} else {
[964]	277	if (item != null) {
	278	this.setState({ choosed: index }, function() {
	279	console.log(this.state.choosed);
	280	});
	281	}
[911]	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'
[964]	298	onMouseDown={this.select}
[911]	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'
[964]	315	onMouseDown={this.select}
[911]	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()}
[964]	329	onMouseDown = {this.select}
[911]	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'
[964]	365	onMouseDown={this.select}
[911]	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'
[964]	382	onMouseDown={this.select}
[911]	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()}
[964]	396	onMouseDown = {this.select}
[911]	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'
[964]	429	onMouseDown={this.select}
[911]	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'
[964]	442	onMouseDown={this.select}
[911]	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 (
[964]	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'}}>*/}
[911]	469	<h2 className='title' style={styles.header}>
	470	DOPASOWANIE
	471	</h2>
[964]	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}>
[911]	475	{this.createSecondRow()}
	476	</div>
	477	</div>
[964]	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}>
[911]	483	{this.createThirdRow()}
	484	</div>
[964]	485	<div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
[911]	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