merge conflicts

Helen300 · Jul 23, 2020 · ad75566 · ad75566
2 parents 44acc54 + 50a15a5
commit ad75566
Show file tree

Hide file tree

Showing 29 changed files with 600 additions and 195 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,6 @@ env/
 venv/
 ENV/
 env.bak/
-venv.bak/
+venv.bak/
+.DS_Store
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "antd": "^4.2.4",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
+    "bootstrap-icons": "^1.0.0-alpha5",
     "dayjs": "^1.8.27",
     "jquery": "^3.5.1",
     "npm-watch": "^0.6.0",

diff --git a/src/components/CardList.js b/src/components/CardList.js
@@ -133,7 +133,7 @@ class CardList extends React.Component {
 				          selectedMoveIdx={this.props.selectedIdx}
 				          showReverseIcon={false}
 				          enableDrag={this.props.enableDrag}
-				          showButtons={true}
+				          showCardButtons={true}
 				        />
 					)
 				)
@@ -148,6 +148,7 @@ class CardList extends React.Component {
 				          selectedSetIdx={this.props.selectedIdx}
 				          shouldRender={this.cardFilter(moveSet)}
 				          enableDrag={this.props.enableDrag}
+				          showCardButtons={this.props.showCardButtons}
 				        />
 					)
 				)
@@ -176,7 +177,7 @@ class CardList extends React.Component {
 						          toggleReverse={this.props.toggleReverseIcon}
 						          showReverseIcon={move.reversible}
 						          enableDrag={this.props.enableDrag}
-						          showButtons={false}
+						          showCardButtons={this.props.showCardButtons}
 						        />
 						)
 					})
@@ -187,6 +188,8 @@ class CardList extends React.Component {
 						return (
 								<TrainingMove
 						          move={move}
+						          listType={this.props.divClass}
+						          horizontalMobileView={this.props.horizontalMobileView}
 						        />
 
 						)
@@ -221,7 +224,7 @@ class CardList extends React.Component {
 				</DragDropContext>
 			);
 		} else {
-			var containerClass = this.props.cardType === cardTypes.TRAINING_MOVE ? "SlidingContainer" : "MoveListDiv"
+			var containerClass = this.props.cardType === cardTypes.TRAINING_MOVE ? this.props.divClass : "MoveListDiv"
 			if(this.props.loading) {
 				containerClass = "CenteredLoading"
 			}

diff --git a/src/components/EditSetName.js → src/components/EditCardName.js b/src/components/EditSetName.js → src/components/EditCardName.js
@@ -7,7 +7,7 @@ import "../css/components/EditSetName.css"
 const { TextArea } = Input;
 
 // for all moves, there exists one moveDetail div that gets updated 
-class EditSetName extends React.Component {
+class EditCardName extends React.Component {
 
 	state = {
 		editingName: false,
@@ -16,26 +16,26 @@ class EditSetName extends React.Component {
 
 	saveNewName() {
 		var newName = this.state.currentName;
-		var newSetList = this.props.setList;
-		newSetList[this.props.selectedSetIdx].name = newName;
+		var newSetList = this.props.cardList;
+		newSetList[this.props.selectedIdx].name = newName;
 		this.setState({
 			editingName: false,
 		})
-		this.props.updateSetList(newSetList);
+		this.props.updateCardList(newSetList);
 	}
 
 	componentDidMount() {
-		if (this.props.selectedSetIdx != -1) {
+		if (this.props.selectedIdx != -1) {
 			this.setState({
-				currentName: this.props.setList[this.props.selectedSetIdx].name,
+				currentName: this.props.cardList[this.props.selectedIdx].name,
 			})
 		}
 	}
 
 	componentWillReceiveProps(newProps) {
-		if (newProps.selectedSetIdx != -1) {
+		if (newProps.selectedIdx != -1) {
 			this.setState({
-				currentName: newProps.setList[newProps.selectedSetIdx].name,
+				currentName: newProps.cardList[newProps.selectedIdx].name,
 			})
 		}
 	}
@@ -73,7 +73,7 @@ class EditSetName extends React.Component {
 					</Button>
 					</div>
 				:
-				<h4>{this.props.setList[this.props.selectedSetIdx].name}
+				<h4>{this.props.cardList[this.props.selectedIdx].name}
 					<EditOutlined onClick={() => this.setState({editingName:true})}/>
 				</h4>
 
@@ -85,4 +85,4 @@ class EditSetName extends React.Component {
 }
 
 
-export default EditSetName;
+export default EditCardName;
diff --git a/src/components/EditValues.js b/src/components/EditValues.js
@@ -165,30 +165,30 @@ class EditValues extends React.Component {
 	      {
 	        title: 'Transition From',
 	        dataIndex: 'Transition From',
-	        width: '30%',
+	        width: '15%',
 	      },
 	      {
 	        title: tabNames[1],
 	        dataIndex: tabNames[1],
-	        width: '30%',
+	        width: '15%',
 	        editable: true,
 	      },
 	      {
 	        title: tabNames[2],
 	        dataIndex: tabNames[2],
-	        width: '30%',
+	        width: '15%',
 	        editable: true,
 	      },
 	      {
 	        title: tabNames[3],
 	        dataIndex: tabNames[3],
-	        width: '30%',
+	        width: '15%',
 	        editable: true,
 	      },
 	      {
 	        title: tabNames[4],
 	        dataIndex: tabNames[4],
-	        width: '30%',
+	        width: '15%',
 	        editable: true,
 	      },
 	    ];
@@ -336,7 +336,29 @@ class EditValues extends React.Component {
 		    });
 	    }
   	};
+  	getIcon() {
+  		if(this.props.valueType === editValueTypes.PROBS) {
+  			return (
+  				<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-dice-3" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+					<path fill-rule="evenodd" d="M13 1H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
+					<circle cx="4" cy="4" r="1.5"/>
+					<circle cx="12" cy="12" r="1.5"/>
+					<circle cx="8" cy="8" r="1.5"/>
+				</svg>
+			)
 
+  		} else if(this.props.valueType === editValueTypes.DURATIONS) {
+  			return(
+  				<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-stopwatch" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+					<path fill-rule="evenodd" d="M8 15A6 6 0 1 0 8 3a6 6 0 0 0 0 12zm0 1A7 7 0 1 0 8 2a7 7 0 0 0 0 14z"/>
+					<path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5a.5.5 0 0 1 .5-.5zM5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z"/>
+					<path d="M7 1h2v2H7V1z"/>
+				</svg>
+			)
+
+  		}
+
+  	}
   	getTitle() {
   		if(this.props.valueType === editValueTypes.PROBS) {
   			return("Edit Probabilities")
@@ -520,9 +542,9 @@ class EditValues extends React.Component {
 	      };
 	    });
 	    return (
-	    	<div className={"EditValuesContainer"}>
+	    	<div className={this.props.buttonClass}>
 			  <Button className={"EditValuesButton"} type="primary" onClick={() => this.showModal()}>
-			    {this.getTitle()}
+			    {this.props.mobileView ? this.getIcon() : this.getTitle()}
 			  </Button>
 
 			  <Modal show={this.state.show} onHide={() => this.closeModal()}>

diff --git a/src/components/Move.js b/src/components/Move.js
@@ -43,6 +43,7 @@ class Move extends React.Component {
 	render() {
 		var cardButtons = 
 				<div>
+					{this.props.move.name} 
 					<DeleteOutlined className={this.isSelected() ? "SelectedDelete" : "NormalDelete"} onClick={(e) => this.deleteMove(e)}/> 
 						{this.props.showReverseIcon ? 
 						<ReloadOutlined className={this.getReverseIconClass(this.props.move.reverseEnabled)} onClick={(e) => this.toggleReverse(e)}/>
@@ -58,8 +59,7 @@ class Move extends React.Component {
 				>
 					<Meta 
 						title={<div className={(this.isSelected() ? "SelectedTitle" : "NormalTitle")}>
-									{this.props.move.name} 
-									{this.props.showButtons ? cardButtons : null}
+									{this.props.showCardButtons ? cardButtons : this.props.move.name}
 							   </div>} 
 					/>
 		  		</Card> 

diff --git a/src/components/MoveDetail.js b/src/components/MoveDetail.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import $ from 'jquery';
+import { tabNames } from "../constants";
+
+import "../css/containers/Column.css"
 
 
 import { Input, Select, Button } from 'antd';
@@ -23,15 +26,6 @@ class MoveDetail extends React.Component {
 		this.props.updateMoveList(newList);
 	}
 
-
-	updateName() {
-		var newName = $("#moveName").val()
-		// make copy of array
-		var newList = this.props.moveList.slice()
-		newList[this.props.selectedMoveIdx].name = newName;
-		this.props.updateMoveList(newList);
-	}
-
 	updateType = (value) => {
 		var newType = value;
 		// make copy of array
@@ -66,52 +60,41 @@ class MoveDetail extends React.Component {
 	render() {
 			return (
 				// since we need to return one div
-				<div>
-				<h4 className="MoveDescription">Move Description</h4>
-				<div className="MoveName">Name of Move: 
-					<TextArea id="moveName"
-							  rows={1}
-							  value={this.props.move.name}
-							  onChange={() => this.updateName()}
-					/>
-				</div>
-				<div>
-					<Select
-				  	id="selectType"
-				    showSearch
-				    optionFilterProp="children"
-				    onChange={this.updateType}
-				    onFocus={this.onTypeFocus}
-				    onBlur={this.onTypeBlur}
-				    onSearch={this.onTypeSearch}
-				    // defaultValue={this.state.selectedMoveType}
-				    value={this.props.move.type}
-				    filterOption={(input, option) =>
-				      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-				    }
-				    className="SelectType"
-				  >
-				    <Option value="Toprock">Toprock</Option>
-				    <Option value="Footwork">Footwork</Option>
-				    <Option value="Freezes">Freezes</Option>
-				    <Option value="Power">Power</Option>
-				  </Select>
-				 </div>
-				 <div>
-				  	<br/>
-						<Button
-							id="ReversibleButton"
-							className={this.props.move.reversible ? "Reversible" : null }
-							onClick={(e) => this.toggleReverse(e)}>
-							{this.props.move.reversible ? "Reversible" :"Not Reversible"}
-						</Button>
-				</div>
-				<br/>
-				<TextArea id="moveDescription" 
-						  rows={4} 
-						  value={this.props.move.description} 
-						  onChange={() => this.updateDescription()}
-			    />
+				<div class="MoveDetailContainer">
+					<div>
+						<Select
+					  	id="selectType"
+					    showSearch
+					    optionFilterProp="children"
+					    onChange={this.updateType}
+					    onFocus={this.onTypeFocus}
+					    onBlur={this.onTypeBlur}
+					    onSearch={this.onTypeSearch}
+					    // defaultValue={this.state.selectedMoveType}
+					    value={this.props.move.type}
+					    filterOption={(input, option) =>
+					      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+					    }
+					    className="MoveDetailType"
+					  >
+					    <Option value={tabNames[1]}>{tabNames[1]}</Option>
+					    <Option value={tabNames[2]}>{tabNames[2]}</Option>
+					    <Option value={tabNames[3]}>{tabNames[3]}</Option>
+					    <Option value={tabNames[4]}>{tabNames[4]}</Option>
+					  </Select>
+					 </div>
+					 <div>
+							<Button
+								id="ReversibleButton"
+								className={this.props.move.reversible ? "Reversible" : "NotReversible" }
+								onClick={(e) => this.toggleReverse(e)}>
+								{this.props.move.reversible ? "Reversible" :"Not Reversible"}
+							</Button>
+					</div>
+					<TextArea id="moveDescription"  
+							  value={this.props.move.description} 
+							  onChange={() => this.updateDescription()}
+				    />
 				</div>
 			);
 	}

diff --git a/src/components/MoveInput.js b/src/components/MoveInput.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import $ from 'jquery';
 
-
 import { Select, Input } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
+import { tabNames } from "../constants";
+
 
 import 'antd/dist/antd.css';
 import "../css/components/MoveInput.css"
@@ -88,10 +89,10 @@ class MoveInput extends React.Component {
 				    }
 				    className="SelectType"
 				  >
-				    <Option value="Toprock">Toprock</Option>
-				    <Option value="Footwork">Footwork</Option>
-				    <Option value="Freezes">Freezes</Option>
-				    <Option value="Power">Power</Option>
+				    <Option value={tabNames[1]}>{tabNames[1]}</Option>
+				    <Option value={tabNames[2]}>{tabNames[2]}</Option>
+				    <Option value={tabNames[3]}>{tabNames[3]}</Option>
+				    <Option value={tabNames[4]}>{tabNames[4]}</Option>
 				  </Select>
 
 					<Search 

diff --git a/src/components/SetCard.js b/src/components/SetCard.js
@@ -27,9 +27,14 @@ class SetCard extends React.Component {
 					>
 						<Meta 
 							title={<div className={(this.isSelected() ? "SelectedTitle" : "NormalTitle")}>{this.props.moveSet.name} 
-									<DeleteOutlined 
-										className={this.isSelected() ? "SelectedDelete" : "NormalDelete"} 
-										onClick={(e) => this.deleteSet(e)}/>
+									{this.props.showCardButtons ?
+										<DeleteOutlined 
+											className={this.isSelected() ? "SelectedDelete" : "NormalDelete"} 
+											onClick={(e) => this.deleteSet(e)}
+										/>
+										:
+										null
+									}
 								   </div>} 
 						/>
 			  		</Card>