Spaces:
Sleeping
Sleeping
| import React, { useState, useEffect } from "react"; | |
| import { useAtom } from "jotai"; | |
| import { CurrentRollAtom, VoiceAssistAtom, searchAtom, grnsAtom, CurrentGRNAtom, TranscribeAtom } from "../Variables"; | |
| import { useNavigate } from "react-router"; | |
| function RollDetailPage() { | |
| const [name, setName] = useState(""); | |
| const [GRN, setGRN] = useState(""); | |
| const [rLength, setRLength] = useState(""); | |
| const [aLength, setALength] = useState(""); | |
| const [minWidth, setMinWidth] = useState(""); | |
| const [maxWidth, setMaxWidth] = useState(""); | |
| const [CS, setCS] = useState(""); | |
| const [LWV, setLWV] = useState(""); | |
| const [EPI, setEPI] = useState(""); | |
| const [PPI, setPPI] = useState(""); | |
| const [CutPcs, setCutPcs] = useState(""); | |
| const [sWarp, setSWarp] = useState(""); | |
| const [sWeft, setSWeft] = useState(""); | |
| const [GSM, setGSM] = useState(""); | |
| const [SL, setSL] = useState(""); | |
| const [SG, setSG] = useState(""); | |
| const [Bowing, setBowing] = useState(""); | |
| const [success, setSuccess] = useState(null); | |
| const [error, setError] = useState(null); | |
| const [search, setSearch] = useAtom(searchAtom); | |
| const [currentRoll, setCurrentRoll] = useAtom(CurrentRollAtom); | |
| const [grns, setGrns] = useAtom(grnsAtom); | |
| const [transcribe, setTranscribe] = useAtom(TranscribeAtom); | |
| const [currentGRN, setCurrentGRN] = useAtom(CurrentGRNAtom); | |
| const [voiceAssist, setVoiceAssist] = useAtom(VoiceAssistAtom); | |
| const navigate = useNavigate(); | |
| useEffect(() => { | |
| if (currentRoll.name === "") { | |
| voiceAssist.say("No roll selected, redirecting to home page", { | |
| onEnd: () => { | |
| navigate("/"); | |
| }, | |
| }); | |
| } else { | |
| setName(currentRoll?.name || ""); | |
| setGRN(currentRoll?.GRN || ""); | |
| setRLength(currentRoll?.rLength || ""); | |
| setALength(currentRoll?.aLength || ""); | |
| setMinWidth(currentRoll?.minWidth || ""); | |
| setMaxWidth(currentRoll?.maxWidth || ""); | |
| setCS(currentRoll?.CS || ""); | |
| setLWV(currentRoll?.LWV || ""); | |
| setEPI(currentRoll?.EPI || ""); | |
| setPPI(currentRoll?.PPI || ""); | |
| setCutPcs(currentRoll?.CutPcs || ""); | |
| setSWarp(currentRoll?.sWarp || ""); | |
| setSWeft(currentRoll?.sWeft || ""); | |
| setGSM(currentRoll?.GSM || ""); | |
| setSL(currentRoll?.SL || ""); | |
| setSG(currentRoll?.SG || ""); | |
| setBowing(currentRoll?.Bowing || ""); | |
| } | |
| }, [currentRoll, navigate, voiceAssist]); | |
| const handleSubmit = () => { | |
| // if (!name || !GRN || !rLength || !aLength || !minWidth || !maxWidth || !CS || !LWV || !EPI || !PPI || !CutPcs || !sWarp || !sWeft || !GSM || !SL || !SG || !Bowing) { | |
| // setError("Please fill all the fields"); | |
| // setTimeout(() => setError(null), 3000); | |
| // return; | |
| // } | |
| const data = new FormData(); | |
| if (rLength !== "") data.append("rLength", rLength); | |
| if (aLength !== "") data.append("aLength", aLength); | |
| if (minWidth !== "") data.append("minWidth", minWidth); | |
| if (maxWidth !== "") data.append("maxWidth", maxWidth); | |
| if (CS !== "") data.append("CS", CS); | |
| if (LWV !== "") data.append("LWV", LWV); | |
| if (EPI !== "") data.append("EPI", EPI); | |
| if (PPI !== "") data.append("PPI", PPI); | |
| if (CutPcs !== "") data.append("CutPcs", CutPcs); | |
| if (sWarp !== "") data.append("sWarp", sWarp); | |
| if (sWeft !== "") data.append("sWeft", sWeft); | |
| if (GSM !== "") data.append("GSM", GSM); | |
| if (SL !== "") data.append("SL", SL); | |
| if (SG !== "") data.append("SG", SG); | |
| if (Bowing !== "") data.append("Bowing", Bowing); | |
| fetch(`/api/rollUpdate/${currentRoll?.name}`, { | |
| method: "POST", | |
| body: data, | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.status === "success") { | |
| setSuccess(data.msg); | |
| setTimeout(() => setSuccess(null), 3000); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: data.msg, isCommand: true }]); | |
| voiceAssist.say(data.msg); | |
| navigate("/grn"); | |
| } else { | |
| setError(data.msg); | |
| setTimeout(() => setError(null), 3000); | |
| voiceAssist.say(data.msg); | |
| } | |
| }) | |
| .catch((error) => {console.error("Error:", error);window.location.href = "/";}); | |
| }; | |
| useEffect(() => { | |
| voiceAssist.emptyCommands(); | |
| voiceAssist.on(["open *", "grn *", "open grn *"], true).then((i, wildcard) => { | |
| wildcard = wildcard.replace(/\s/g, ""); | |
| let found = false; | |
| for (let index = 0; index < grns.length; index++) { | |
| if (grns[index].GRN.toLowerCase() == wildcard.toLowerCase()) { | |
| setCurrentGRN(grns[index]); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "open GRN " + wildcard, isCommand: true }]); | |
| navigate("/grn"); | |
| localStorage.setItem("currentGRN", JSON.stringify(grns[index])); | |
| found = true; | |
| } | |
| } | |
| if (!found) { | |
| voiceAssist.say("No GRN found with that Number"); | |
| } | |
| }); | |
| voiceAssist.on(["search *"], true).then((i, wildcard) => { | |
| wildcard = wildcard.replace(/ /g, ""); | |
| setSearch(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "search " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["transcribe"]).then((i) => { | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "transcribe", isCommand: true }]); | |
| navigate("/transcribe"); | |
| }); | |
| voiceAssist.on(["home", "go to home"]).then((i) => { | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "home", isCommand: true }]); | |
| navigate("/"); | |
| }); | |
| voiceAssist.on(["refresh"]).then((i) => { | |
| window.location.reload(); | |
| }); | |
| voiceAssist.on(["A1 *", "A 1 *", "a1 *", "a 1 *", "A1*", "A 1*", "a1*", "a 1*"], true).then((i, wildcard) => { | |
| setRLength(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Roll Length Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["A2 *", "A 2 *", "a 2 *", "a2 *", "A2*", "A 2*", "a 2*", "a2*"], true).then((i, wildcard) => { | |
| setALength(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Actual Length Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["B1 *", "B 1 *", "b 1 *", "b1 *", "B1*", "B 1*", "b 1*", "b1*"], true).then((i, wildcard) => { | |
| setMinWidth(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Min Width Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["B2 *", "B 2 *", "b 2 *", "b2 *", "B2*", "B 2*", "b 2*", "b2*"], true).then((i, wildcard) => { | |
| setMaxWidth(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Max Width Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["B3 *", "B 3 *", "b 3 *", "b3 *", "B3*", "B 3*", "b 3*", "b3*"], true).then((i, wildcard) => { | |
| setCS(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "CS Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["B5 *", "B 5 *", "b 5 *", "b5 *", "B5*", "B 5*", "b 5*", "b5*"], true).then((i, wildcard) => { | |
| setLWV(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "LWV Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["D1 *", "D 1 *", "d 1 *", "d1 *", "D1*", "D 1*", "d 1*", "d1*"], true).then((i, wildcard) => { | |
| setEPI(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "EPI Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["D2 *", "D 2 *", "d 2 *", "d2 *", "D2*", "D 2*", "d 2*", "d2*"], true).then((i, wildcard) => { | |
| setPPI(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "PPI Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["D3 *", "D 3 *", "d 3 *", "d3 *", "D3*", "D 3*", "d 3*", "d3*"], true).then((i, wildcard) => { | |
| setCutPcs(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Cut Pcs Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["D4 *", "D 4 *", "d 4 *", "d4 *", "D4*", "D 4*", "d 4*", "d4*"], true).then((i, wildcard) => { | |
| setSWarp(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Shrinkage Warp Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["F1 *", "F 1 *", "f 1 *", "f1 *", "F1*", "F 1*", "f 1*", "f1*"], true).then((i, wildcard) => { | |
| setSWeft(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Shrinkage Weft Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["F2 *", "F 2 *", "f 2 *", "f2 *", "F2*", "F 2*", "f 2*", "f2*"], true).then((i, wildcard) => { | |
| setGSM(parseFloat(wildcard)); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "GSM Updated to " + parseFloat(wildcard), isCommand: true }]); | |
| }); | |
| voiceAssist.on(["F3 *", "F 3 *", "f 3 *", "f3 *", "F3*", "F 3*", "f 3*", "f3*"], true).then((i, wildcard) => { | |
| setSL(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "SL Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["F4 *", "F 4 *", "f 4 *", "f4 *", "F4*", "F 4*", "f 4*", "f4*"], true).then((i, wildcard) => { | |
| setSG(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "SG Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["F5 *", "F 5 *", "f 5 *", "f5 *", "F5*", "F 5*", "f 5*", "f5*"], true).then((i, wildcard) => { | |
| setBowing(wildcard); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "Bowing Updated to " + wildcard, isCommand: true }]); | |
| }); | |
| voiceAssist.on(["update", "submit"]).then((i) => { | |
| console.log("submitting"); | |
| submitBtn.click(); | |
| }); | |
| voiceAssist.on(["clear all", "clear"]).then((i) => { | |
| setRLength(""); | |
| setALength(""); | |
| setMinWidth(""); | |
| setMaxWidth(""); | |
| setCS(""); | |
| setLWV(""); | |
| setEPI(""); | |
| setPPI(""); | |
| setCutPcs(""); | |
| setSWarp(""); | |
| setSWeft(""); | |
| setGSM(""); | |
| setSL(""); | |
| setSG(""); | |
| setBowing(""); | |
| setTranscribe((prev) => [...prev.slice(0, -1), { msg: "clear all", isCommand: true }]); | |
| }); | |
| console.log("Commands", voiceAssist?.getAvailableCommands().length); | |
| }, [voiceAssist]); | |
| return ( | |
| <div className="w-full h-fit min-h-[calc(100vh-4.1rem)] overflow-y-auto custom-scrollbar flex items-center justify-center"> | |
| {currentRoll.name !== "" && ( | |
| <div className="relative flex gap-10 bg-clip-border rounded-xl bg-white text-gray-700 w-full max-w-[48rem] flex-row"> | |
| <div className="relative flex flex-col bg-clip-border rounded-xl bg-transparent text-primary-700 shadow-none"> | |
| {success && ( | |
| <div role="alert" className="relative w-full text-base font-regular px-4 py-4 mt-3 rounded-none border-l-4 border-green-600 bg-green-600/10 font-medium text-green-600 flex" style={{ opacity: 1 }}> | |
| <div className="shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6"> | |
| <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div className="ml-3 mr-12 truncate" id="successMsg"> | |
| {success} | |
| </div> | |
| </div> | |
| )} | |
| {error && ( | |
| <div role="alert" className="relative w-full text-base font-regular px-4 py-4 mt-3 rounded-none border-l-4 border-red-500 bg-red-500/10 font-medium text-red-500 flex" style={{ opacity: 1 }}> | |
| <div className="shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6"> | |
| <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div className="ml-3 mr-12 truncate" id="errorMsg"> | |
| {error} | |
| </div> | |
| </div> | |
| )} | |
| <div className="mt-8 mb-2 lg:w-full w-[80%] lg:mx-0 mx-auto"> | |
| <div className="mb-1 grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-3">Name</h6> | |
| <input onChange={(event) => setName(event.target.value)} value={name} disabled placeholder="Name" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-3">GRN</h6> | |
| <input onChange={(event) => setGRN(event.target.value)} value={GRN} disabled placeholder="GRN" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Roll Length <span className="bg-primary-200 font-normal p-1 rounded">(A1)</span> | |
| </h6> | |
| <input onChange={(event) => setRLength(event.target.value)} value={rLength} placeholder="Roll Length" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Actual Length <span className="bg-primary-200 font-normal p-1 rounded">(A2)</span> | |
| </h6> | |
| <input onChange={(event) => setALength(event.target.value)} value={aLength} placeholder="Actual Length" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Min Width <span className="bg-primary-200 font-normal p-1 rounded">(B1)</span> | |
| </h6> | |
| <input onChange={(event) => setMinWidth(event.target.value)} value={minWidth} placeholder="Min Width" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Max Width <span className="bg-primary-200 font-normal p-1 rounded">(B2)</span> | |
| </h6> | |
| <input onChange={(event) => setMaxWidth(event.target.value)} value={maxWidth} placeholder="Max Width" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| CS <span className="bg-primary-200 font-normal p-1 rounded">(B3)</span> | |
| </h6> | |
| <input onChange={(event) => setCS(event.target.value)} value={CS} placeholder="CS" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| LWV <span className="bg-primary-200 font-normal p-1 rounded">(B5)</span> | |
| </h6> | |
| <input onChange={(event) => setLWV(event.target.value)} value={LWV} placeholder="LWV" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| EPI <span className="bg-primary-200 font-normal p-1 rounded">(D1)</span> | |
| </h6> | |
| <input onChange={(event) => setEPI(event.target.value)} value={EPI} placeholder="EPI" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| PPI <span className="bg-primary-200 font-normal p-1 rounded">(D2)</span> | |
| </h6> | |
| <input onChange={(event) => setPPI(event.target.value)} value={PPI} placeholder="PPI" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Cut Pcs <span className="bg-primary-200 font-normal p-1 rounded">(D3)</span> | |
| </h6> | |
| <input onChange={(event) => setCutPcs(event.target.value)} value={CutPcs} placeholder="Cut Pcs" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Shinkage Warp <span className="bg-primary-200 font-normal p-1 rounded">(D4)</span> | |
| </h6> | |
| <input onChange={(event) => setSWarp(event.target.value)} value={sWarp} placeholder="sWarp" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Shinkage Weft <span className="bg-primary-200 font-normal p-1 rounded">(F1)</span> | |
| </h6> | |
| <input onChange={(event) => setSWeft(event.target.value)} value={sWeft} placeholder="sWeft" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| GSM <span className="bg-primary-200 font-normal p-1 rounded">(F2)</span> | |
| </h6> | |
| <input onChange={(event) => setGSM(event.target.value)} value={GSM} placeholder="GSM" type="number" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| SL <span className="bg-primary-200 font-normal p-1 rounded">(F3)</span> | |
| </h6> | |
| <input onChange={(event) => setSL(event.target.value)} value={SL} placeholder="SL" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| SG <span className="bg-primary-200 font-normal p-1 rounded">(F4)</span> | |
| </h6> | |
| <input onChange={(event) => setSG(event.target.value)} value={SG} placeholder="SG" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| <div className="col-span-2"> | |
| <h6 className="font-semibold text-primary-900 mb-1 flex items-center justify-between"> | |
| Bowing <span className="bg-primary-200 font-normal p-1 rounded">(F5)</span> | |
| </h6> | |
| <input onChange={(event) => setBowing(event.target.value)} value={Bowing} placeholder="Bowing" type="text" className="w-full h-11 bg-transparent text-primary-700 font-normal outline outline-0 focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 disabled:cursor-not-allowed transition-all placeholder-shown:border border focus:border-2 border-t-transparent focus:border-t-transparent text-sm px-3 py-3 rounded-md border-blue-gray-200 focus:border-gray-900 !border-t-blue-gray-200 focus:!border-t-gray-900" /> | |
| </div> | |
| </div> | |
| <button id="submitBtn" onClick={handleSubmit} className="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gradient-to-tr from-primary-950 to-primary-800 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none block w-full mt-6" type="button"> | |
| Update | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {currentRoll.name === "" && ( | |
| <div className="flex flex-col items-center justify-center gap-5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 647.636 632.174" className="w-[50%] h-[50%] opacity-80"> | |
| <path d="M411.146 142.174h-174.51a15.02 15.02 0 0 0-15 15v387.85l-2 .61-42.81 13.11a8.007 8.007 0 0 1-9.99-5.31l-127.34-415.95a8.003 8.003 0 0 1 5.31-9.99l65.97-20.2 191.25-58.54 65.97-20.2a7.99 7.99 0 0 1 9.99 5.3l32.55 106.32Z" fill="#f2f2f2" /> | |
| <path d="m449.226 140.174-39.23-128.14a16.994 16.994 0 0 0-21.23-11.28l-92.75 28.39-191.24 58.55-92.75 28.4a17.015 17.015 0 0 0-11.28 21.23l134.08 437.93a17.03 17.03 0 0 0 16.26 12.03 16.8 16.8 0 0 0 4.97-.75l63.58-19.46 2-.62v-2.09l-2 .61-64.17 19.65a15.015 15.015 0 0 1-18.73-9.95L2.666 136.734a14.98 14.98 0 0 1 9.95-18.73l92.75-28.4 191.24-58.54 92.75-28.4a15.2 15.2 0 0 1 4.41-.66 15.015 15.015 0 0 1 14.32 10.61l39.05 127.56.62 2h2.08Z" fill="#3f3d56" /> | |
| <path d="M122.68 127.82a9.02 9.02 0 0 1-8.61-6.366l-12.88-42.072a9 9 0 0 1 5.97-11.24L283.1 14.278a9.01 9.01 0 0 1 11.24 5.971l12.88 42.072a9.01 9.01 0 0 1-5.97 11.241l-175.94 53.864a9 9 0 0 1-2.63.395" fill="#285c7c" /> | |
| <circle cx={190.154} cy={24.955} r={20} fill="#285c7c" /> | |
| <circle cx={190.154} cy={24.955} r={12.665} fill="#fff" /> | |
| <path d="M602.636 582.174h-338a8.51 8.51 0 0 1-8.5-8.5v-405a8.51 8.51 0 0 1 8.5-8.5h338a8.51 8.51 0 0 1 8.5 8.5v405a8.51 8.51 0 0 1-8.5 8.5" fill="#e6e6e6" /> | |
| <path d="M447.136 140.174h-210.5a17.024 17.024 0 0 0-17 17v407.8l2-.61v-407.19a15.02 15.02 0 0 1 15-15h211.12Zm183.5 0h-394a17.024 17.024 0 0 0-17 17v458a17.024 17.024 0 0 0 17 17h394a17.024 17.024 0 0 0 17-17v-458a17.024 17.024 0 0 0-17-17m15 475a15.02 15.02 0 0 1-15 15h-394a15.02 15.02 0 0 1-15-15v-458a15.02 15.02 0 0 1 15-15h394a15.02 15.02 0 0 1 15 15Z" fill="#3f3d56" /> | |
| <path d="M525.636 184.174h-184a9.01 9.01 0 0 1-9-9v-44a9.01 9.01 0 0 1 9-9h184a9.01 9.01 0 0 1 9 9v44a9.01 9.01 0 0 1-9 9" fill="#285c7c" /> | |
| <circle cx={433.636} cy={105.174} r={20} fill="#285c7c" /> | |
| <circle cx={433.636} cy={105.174} r={12.182} fill="#fff" /> | |
| </svg> | |
| <p className="text-3xl text-primary-700">No roll selected, Please select a roll</p> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export default RollDetailPage; | |