Skip to content

Commit 2bb5312

Browse files
AMTuttle02AMTuttle02
authored
Merge pull request #324 from AMTuttle02/feat191_AddPocketDesign
Add pocket design
2 parents 627ab60 + fccfe07 commit 2bb5312

File tree

7 files changed

+110
-25
lines changed

7 files changed

+110
-25
lines changed

‎API/src/product/updateProductDetails.php‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,21 @@
2121
$categories = isset($_POST['categories']) ? $_POST['categories'] : (isset($_POST['subcategories']) ? $_POST['subcategories'] : '');
2222
$subcategories = isset($_POST['subcategories']) && isset($_POST['categories']) ? $_POST['subcategories'] : '';
2323
$defaultStyle = $_POST["default_style"];
24+
$styleSize = isset($_POST['style_size']) ? $_POST['style_size'] : '';
25+
if (empty($styleSize)) {
26+
echo json_encode("ERR: style_size required");
27+
exit();
28+
}
2429
$styleLocation = $_POST["default_style_location"];
2530
$customDetailsRequired = $_POST["customFieldRequired"];
2631
$product_id = $_SESSION["product_id"];
2732
$sizeAvailable = $_POST["sizeAvailable"];
2833

2934
// Attempt to insert new design into table
3035
$query = $conn->prepare("UPDATE products
31-
SET product_name = ?, price = ?, tag_list = ?, tColors = ?, lColors = ?, cColors = ?, hColors = ?, categories = ?, subcategories = ?, default_style = ?, default_style_location = ?, CustomDetailsRequired = ?, sizesAvailable = ?
36+
SET product_name = ?, price = ?, tag_list = ?, tColors = ?, lColors = ?, cColors = ?, hColors = ?, categories = ?, subcategories = ?, default_style = ?, style_size = ?, default_style_location = ?, CustomDetailsRequired = ?, sizesAvailable = ?
3237
WHERE product_id = ?;");
33-
$query->bind_param("ssssssssssssss", $productName, $price, $tags, $tColors, $lColors, $cColors, $hColors, $categories, $subcategories, $defaultStyle, $styleLocation, $customDetailsRequired, $sizeAvailable, $product_id);
38+
$query->bind_param("sssssssssssssss", $productName, $price, $tags, $tColors, $lColors, $cColors, $hColors, $categories, $subcategories, $defaultStyle, $styleSize, $styleLocation, $customDetailsRequired, $sizeAvailable, $product_id);
3439
if (!$query->execute()) {
3540
// If insertion fails, return error message
3641
echo json_encode("ERR: Insertion failed to execute" . $query->error);

‎API/src/product/upload.php‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
$categories = isset($_POST['categories']) ? $_POST['categories'] : (isset($_POST['subcategories']) ? $_POST['subcategories'] : '');
2323
$subcategories = isset($_POST['subcategories']) && isset($_POST['categories']) ? $_POST['subcategories'] : '';
2424
$defaultStyle = $_POST["default_style"];
25+
$styleSize = isset($_POST['style_size']) ? $_POST['style_size'] : '';
26+
if (empty($styleSize)) {
27+
die(json_encode("ERR: style_size required"));
28+
}
2529
$styleLocation = $_POST["style_location"];
2630
$customFieldRequired = $_POST['customFieldRequired'];
2731
$sizeAvailable = $_POST['sizeAvailable'];
@@ -52,9 +56,9 @@
5256
}
5357

5458
// Attempt to insert new design into table
55-
$query = $conn->prepare("INSERT INTO products (product_name, price, filename_front, filename_back, tag_list, tColors, lColors, cColors, hColors, categories, subcategories, default_style, default_style_location, CustomDetailsRequired, sizesAvailable)
56-
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);");
57-
$query->bind_param("sssssssssssssss", $productName, $price, $frontFileName, $backFileName, $tags, $tColors, $lColors, $cColors, $hColors, $categories, $subcategories, $defaultStyle, $styleLocation, $customFieldRequired, $sizeAvailable);
59+
$query = $conn->prepare("INSERT INTO products (product_name, price, filename_front, filename_back, tag_list, tColors, lColors, cColors, hColors, categories, subcategories, default_style, style_size, default_style_location, CustomDetailsRequired, sizesAvailable)
60+
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);");
61+
$query->bind_param("ssssssssssssssss", $productName, $price, $frontFileName, $backFileName, $tags, $tColors, $lColors, $cColors, $hColors, $categories, $subcategories, $defaultStyle, $styleSize, $styleLocation, $customFieldRequired, $sizeAvailable);
5862
if (!$query->execute()) {
5963
// If insertion fails, return error message
6064
die(json_encode("ERR: Insertion failed to execute" . $query->error));

‎react/src/products/DisplayProduct.jsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const DisplaycurrentProduct = ({ product }) => {
5858
const [currentDesign, setCurrentDesign] = useState(window.location.origin + "/api/images/" + currentProduct.filename_front);
5959
const [currentColor, setCurrentColor] = useState(null);
6060
const [intervalId, setIntervalId] = useState(undefined);
61+
const [showingLocation, setShowingLocation] = useState('front');
6162

6263
// T-Shirt Color Maps
6364
const tShirtMap = {
@@ -150,10 +151,12 @@ const DisplaycurrentProduct = ({ product }) => {
150151
if (currentProduct.default_style_location === 'front') {
151152
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_front);
152153
setCurrentColor(getColor('front'));
154+
setShowingLocation('front');
153155
}
154156
else if (currentProduct.default_style_location === 'back') {
155157
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_back);
156158
setCurrentColor(getColor('back'));
159+
setShowingLocation('back');
157160
}
158161
}
159162
}
@@ -249,10 +252,12 @@ const DisplaycurrentProduct = ({ product }) => {
249252
setCurrentDesign(prevDesign => {
250253
if (prevDesign === window.location.origin + "/api/images/" + currentProduct.filename_front) {
251254
setCurrentColor(getColor('back'));
255+
setShowingLocation('back');
252256
return (window.location.origin + "/api/images/" + currentProduct.filename_back);
253257
}
254258
else {
255259
setCurrentColor(getColor('front'));
260+
setShowingLocation('front');
256261
return (window.location.origin + "/api/images/" + currentProduct.filename_front);
257262
}
258263
});
@@ -269,10 +274,12 @@ const DisplaycurrentProduct = ({ product }) => {
269274
setCurrentDesign(prevDesign => {
270275
if (prevDesign === window.location.origin + "/api/images/" + currentProduct.filename_front) {
271276
setCurrentColor(getColor('back'));
277+
setShowingLocation('back');
272278
return (window.location.origin + "/api/images/" + currentProduct.filename_back);
273279
}
274280
else {
275281
setCurrentColor(getColor('front'));
282+
setShowingLocation('front');
276283
return (window.location.origin + "/api/images/" + currentProduct.filename_front);
277284
}
278285
});
@@ -286,6 +293,8 @@ const DisplaycurrentProduct = ({ product }) => {
286293
};
287294

288295
if (product.default_style !== 'other') {
296+
const designClass = (showingLocation === 'front' && currentProduct.style_size === 'pocket') ? 'design-pocket' : 'design';
297+
289298
return (
290299
<div
291300
className="fullDesign"
@@ -299,7 +308,7 @@ const DisplaycurrentProduct = ({ product }) => {
299308
<img
300309
src={currentDesign}
301310
alt="Product Design"
302-
className="design"
311+
className={designClass}
303312
/>
304313
</div>
305314
);

‎react/src/products/DisplayUserProduct.jsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const DisplayUserProduct = (props) => {
5858
const [currentDesign, setCurrentDesign] = useState('');
5959
const [currentColor, setCurrentColor] = useState(null);
6060
const [intervalId, setIntervalId] = useState(undefined);
61+
const [showingLocation, setShowingLocation] = useState('front');
6162

6263
// T-Shirt Color Maps
6364
const tShirtMap = {
@@ -140,20 +141,24 @@ const DisplayUserProduct = (props) => {
140141
if (default_location === 'front') {
141142
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_front);
142143
setCurrentColor(getColor('front'));
144+
setShowingLocation('front');
143145
}
144146
else if (default_location === 'back') {
145147
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_back);
146148
setCurrentColor(getColor('back'));
149+
setShowingLocation('back');
147150
}
148151
}
149152
else if (state === 1) {
150153
if (default_location === 'front') {
151154
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_back);
152155
setCurrentColor(getColor('back'));
156+
setShowingLocation('back');
153157
}
154158
else if (default_location === 'back') {
155159
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_front);
156160
setCurrentColor(getColor('front'));
161+
setShowingLocation('front');
157162
}
158163
}
159164
}, [currentProduct, color, style, state]);
@@ -198,10 +203,12 @@ const DisplayUserProduct = (props) => {
198203
setCurrentDesign(prevDesign => {
199204
if (prevDesign === window.location.origin + "/api/images/" + currentProduct.filename_front) {
200205
setCurrentColor(getColor('back'));
206+
setShowingLocation('back');
201207
return (window.location.origin + "/api/images/" + currentProduct.filename_back);
202208
}
203209
else {
204210
setCurrentColor(getColor('front'));
211+
setShowingLocation('front');
205212
return (window.location.origin + "/api/images/" + currentProduct.filename_front);
206213
}
207214
});
@@ -228,20 +235,24 @@ const DisplayUserProduct = (props) => {
228235
if (default_location === 'front') {
229236
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_front);
230237
setCurrentColor(getColor('front'));
238+
setShowingLocation('front');
231239
}
232240
else if (default_location === 'back') {
233241
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_back);
234242
setCurrentColor(getColor('back'));
243+
setShowingLocation('back');
235244
}
236245
}
237246
else if (state === 1) {
238247
if (default_location === 'front') {
239248
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_back);
240249
setCurrentColor(getColor('back'));
250+
setShowingLocation('back');
241251
}
242252
else if (default_location === 'back') {
243253
setCurrentDesign(window.location.origin + "/api/images/" + currentProduct.filename_front);
244254
setCurrentColor(getColor('front'));
255+
setShowingLocation('front');
245256
}
246257
}
247258
}
@@ -257,10 +268,12 @@ const DisplayUserProduct = (props) => {
257268
setCurrentDesign(prevDesign => {
258269
if (prevDesign === window.location.origin + "/api/images/" + currentProduct.filename_front) {
259270
setCurrentColor(getColor('back'));
271+
setShowingLocation('back');
260272
return (window.location.origin + "/api/images/" + currentProduct.filename_back);
261273
}
262274
else {
263275
setCurrentColor(getColor('front'));
276+
setShowingLocation('front');
264277
return (window.location.origin + "/api/images/" + currentProduct.filename_front);
265278
}
266279
});
@@ -274,24 +287,26 @@ const DisplayUserProduct = (props) => {
274287
};
275288

276289
if (style !== "Other") {
290+
const designClass = (showingLocation === 'front' && currentProduct.style_size === 'pocket') ? 'design-pocket' : 'design';
291+
277292
if (enlarge) {
278-
return (
279-
<div
280-
className="fullDesign"
281-
onMouseEnter={handleMouseEnter}
282-
onMouseLeave={handleMouseLeave}>
283-
<img
284-
src={currentColor}
285-
alt="Product Style"
286-
className="tshirt"
287-
/>
288-
<img
289-
src={currentDesign}
290-
alt="Product Design"
291-
className="design"
292-
/>
293-
</div>
294-
);
293+
return (
294+
<div
295+
className="fullDesign"
296+
onMouseEnter={handleMouseEnter}
297+
onMouseLeave={handleMouseLeave}>
298+
<img
299+
src={currentColor}
300+
alt="Product Style"
301+
className="tshirt"
302+
/>
303+
<img
304+
src={currentDesign}
305+
alt="Product Design"
306+
className={designClass}
307+
/>
308+
</div>
309+
);
295310
}
296311
else {
297312
return (
@@ -305,7 +320,7 @@ const DisplayUserProduct = (props) => {
305320
<img
306321
src={currentDesign}
307322
alt="Product Design"
308-
className="design"
323+
className={designClass}
309324
/>
310325
</div>
311326
);

‎react/src/products/EditProducts.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ function EditProducts() {
2222
const [selectedCategoryIds, setSelectedCategoryIds] = useState([]);
2323
const [selectedSubcategoryIds, setSelectedSubcategoryIds] = useState([]);
2424
const [style, setStyle] = useState("tshirt");
25+
const [styleSize, setStyleSize] = useState("");
2526
const [location, setLocation] = useState("front");
2627
const [productIsSet, setProductIsSet] = useState(false);
2728
const [customFieldRequired, setCustomFieldRequired] = useState(0);
@@ -76,6 +77,7 @@ function EditProducts() {
7677
setHColors(data.hColors);
7778
setStyle(data.default_style);
7879
setLocation(data.default_style_location);
80+
setStyleSize(data.style_size || "");
7981
setProductIsSet(true);
8082
setCustomFieldRequired(data.CustomDetailsRequired.toString());
8183
setSizesAvailable(data.sizesAvailable.toString());
@@ -150,6 +152,10 @@ function EditProducts() {
150152

151153
const handleSubmit = async (event) => {
152154
event.preventDefault();
155+
if (!styleSize || styleSize.trim() === '') {
156+
setFailToUpdate(true);
157+
return;
158+
}
153159
if (style === 'tshirt' && tColors.trim() === '') {
154160
setFailToUpdate(true);
155161
} else if (style === 'longsleeve' && lColors.trim() === '') {
@@ -171,6 +177,7 @@ function EditProducts() {
171177
formData.append('categories', selectedCategoryIds.join(';'));
172178
formData.append('subcategories', selectedSubcategoryIds.join(';'));
173179
formData.append('default_style', style);
180+
formData.append('style_size', styleSize);
174181
formData.append('default_style_location', location);
175182
formData.append('customFieldRequired', customFieldRequired);
176183
formData.append('sizeAvailable', sizesAvailable);
@@ -267,6 +274,21 @@ function EditProducts() {
267274
<div className="default-checkbox"/>
268275
<div className="default-checkbox"/>
269276
</div>
277+
<h3>Style Size</h3>
278+
<div className="containerRow">
279+
<div className="default-checkbox">
280+
<input type="radio" id="styleSizeFull" name="styleSize" value="full" checked={styleSize === 'full'} onChange={(event) => setStyleSize(event.target.value)}/>
281+
<label>&nbsp;Full</label>
282+
<br />
283+
</div>
284+
<div className="default-checkbox">
285+
<input type="radio" id="styleSizePocket" name="styleSize" value="pocket" checked={styleSize === 'pocket'} onChange={(event) => setStyleSize(event.target.value)}/>
286+
<label>&nbsp;Pocket</label>
287+
<br />
288+
</div>
289+
<div className="default-checkbox"/>
290+
<div className="default-checkbox"/>
291+
</div>
270292
<h3>Default Style</h3>
271293
<div className="containerRow">
272294
<div className="default-checkbox">

‎react/src/products/displayProducts.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222
height: auto;
2323
}
2424

25+
.design-pocket {
26+
position: absolute;
27+
top: 22%;
28+
right: 31.5%;
29+
width: 15%;
30+
height: auto;
31+
}
32+
2533
.productDetails {
2634
background-color: transparent;
2735
width: 100%;

‎react/src/upload/Upload.jsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ function Upload() {
2121
const [selectedSubcategoryIds, setSelectedSubcategoryIds] = useState([]);
2222
const [allSubcategories, setAllSubcategories] = useState([]);
2323
const [style, setStyle] = useState("");
24+
const [styleSize, setStyleSize] = useState("");
2425
const [location, setLocation] = useState("");
2526
const [showConfirmation, setShowConfirmation] = useState(false);
2627
const [customFieldRequired, setCustomFieldRequired] = useState(null);
@@ -130,7 +131,7 @@ function Upload() {
130131
formData.append('backFile', backFile);
131132
}
132133

133-
if (!productName || !price || !style || !location || customFieldRequired === null) {
134+
if (!productName || !price || !style || !styleSize || !location || customFieldRequired === null) {
134135
setShowConfirmation(true);
135136
return;
136137
}
@@ -146,6 +147,7 @@ function Upload() {
146147
formData.append('categories', selectedCategoryIds.join(';'));
147148
formData.append('subcategories', selectedSubcategoryIds.join(';'));
148149
formData.append('default_style', style);
150+
formData.append('style_size', styleSize);
149151
formData.append('style_location', location);
150152
formData.append('customFieldRequired', customFieldRequired);
151153
formData.append('sizeAvailable', sizesAvailable);
@@ -319,6 +321,26 @@ function Upload() {
319321
</div>
320322
<div className="mobileSplit20" />
321323
</div>
324+
<h3 className="center">Style Size<span className="red">*</span></h3>
325+
<div className="row">
326+
<div className="mobileSplit20" />
327+
<div className="mobileSplit20">
328+
<span>
329+
<input type="radio" id="styleSizeFull" name="styleSize" value="full" className="pointer" onChange={(event) => setStyleSize(event.target.value)}/>
330+
<label>&nbsp;Full</label>
331+
<br />
332+
</span>
333+
</div>
334+
<div className="mobileSplit20" />
335+
<div className="mobileSplit20">
336+
<span>
337+
<input type="radio" id="styleSizePocket" name="styleSize" value="pocket" className="pointer" onChange={(event) => setStyleSize(event.target.value)}/>
338+
<label>&nbsp;Pocket</label>
339+
<br />
340+
</span>
341+
</div>
342+
<div className="mobileSplit20" />
343+
</div>
322344
<h3 className="center">Color Options</h3>
323345
<div className="topAlignRow">
324346
<div className="mobileSplit25">

0 commit comments

Comments
 (0)