Software: Apache/2.4.41 (Ubuntu). PHP/8.0.30 

uname -a: Linux apirnd 5.4.0-204-generic #224-Ubuntu SMP Thu Dec 5 13:38:28 UTC 2024 x86_64 

uid=33(www-data) gid=33(www-data) groups=33(www-data) 

Safe-mode: OFF (not secure)

/var/www/html/beximco/mrp_process/src/pages/   drwxr-xr-x
Free 13.26 GB of 57.97 GB (22.87%)
                            Encoder    Tools    Proc.    FTP brute    Sec.    SQL    PHP-code    Update    Self remove    Logout    

Viewing file:     FabricInspection.js (18.52 KB)      -rw-r--r--

import "../index.css";
import { useState, useEffect } from "react";
import axios from "axios";
import swal from "sweetalert";
import { v4 as uuidv4 } from "uuid";
import QRCode from "qrcode";

const token =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwiaWF0IjoxNjYyNTQ1NjY3LCJleHAiOjE5NzgxMjE2Njd9.5lVlCpiqLqBmdASH-06JubosdJ4jmHwqkepXIkaGr3E";

const initialState = {
  initialized: true,
  start: false,
  stop: false,
  initializedDate: "",
  startDate: "",
  stopDate: "",
  reset: true,
};

function FabricInspection() {
  const [initialize, setInitialize] = useState(true);
  const [start, setStart] = useState(true);
  const [stop, setStop] = useState(true);
  const [machine, setMachine] = useState(null);
  const [machineStatus, setMachineStatus] = useState(0);
  const [queue, setQueue] = useState(null);
  const [process, setProcess] = useState([]);
  const [grayFabric, setGrayFabric] = useState(null);
  const [data, setData] = useState(initialState);
  const [order, setOrder] = useState(null);
  const [selectedOrder, setSelectedOrder] = useState("");

  useEffect(() => {
    try {
      axios
        .get(
          "http://127.0.0.1:1337/machines?machine_id=200007&_sort=id:DESC&_limit=1",
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        )
        .then((response) => {
          // console.log(response.data[0].id);
          setMachine(response.data[0]);
          setMachineStatus(response.data[0].status);
        });

      axios
        .get("http://127.0.0.1:1337/orders", {
          headers: {
            Authorization: "Bearer " + token,
          },
        })
        .then((response) => {
          console.log(response.data);
          setOrder(response.data);
        });
    } catch (error) {
      console.log(error.message);
    }
  }, []);

  const handleInitialize = async (event) => {
    const time = new Date().toLocaleDateString("en-us", {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
    const newState = {
      ...data,
      initialized: false,
      start: true,
      reset: false,
      initializedDate: time,
    };

    // setStart(false);

    if (machine.status == 0) {
      setInitialize(false);
      const updateMachine = await axios.put(
        "http://127.0.0.1:1337/machines/" + machine.id,
        {
          status: 1,
          order_id: selectedOrder,
          factory_id: "Factory101",
        },
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      if (updateMachine.data) {
        setMachineStatus(1);
        console.log("queueProcess.data");
        setTimeout(async () => {
          var queueProcess = await axios.get(
            `http://127.0.0.1:1337/queue?machine_id=${machine.machine_id}&equipment_type=gray_fabric&status=1&stage=stage 4`,
            {
              headers: {
                Authorization: "Bearer " + token,
              },
            }
          );
          if (queueProcess.data.length > 0) {
            setData(newState);
            setInitialize(true);
            console.log(queueProcess.data[0]);
            setQueue(queueProcess.data[0]);
            setStart(false);
          } else {
            const updateMachine = await axios.put(
              "http://127.0.0.1:1337/machines/" + machine.id,
              {
                status: 0,
              },
              {
                headers: {
                  Authorization: "Bearer " + token,
                },
              }
            );
            if (updateMachine.data) {
              setMachineStatus(0);
              setInitialize(false);
            }
            swal({
              icon: "info",
              text: "Make Sure Equipments are Scanned and Updated in Queue!",
            });
          }
        }, 20000);
      }
    }
  };

  const handleStart = async (event) => {
    const time = new Date().toLocaleDateString("en-us", {
      weekday: "long",
      year: "numeric",
      month: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
    });
    event.currentTarget.disabled = true;
    setStop(false);
    const newState = {
      ...data,
      stop: true,
      start: false,
      startDate: time,
    };
    setData(newState);

    if (machineStatus == 1) {
      const updateMachine = await axios.put(
        "http://127.0.0.1:1337/machines/" + machine.id,
        {
          status: 2,
        },
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      if (updateMachine.data) {
        setMachineStatus(2);

        if (queue) {
          const updateQueue = await axios.put(
            `http://127.0.0.1:1337/queue/${queue.id}`,
            {
              status: 2,
            },
            {
              headers: {
                Authorization: "Bearer " + token,
              },
            }
          );
        }
      }
    }
  };

  const handleStop = async (event) => {
    try {
      const time = new Date().toLocaleDateString("en-us", {
        weekday: "long",
        year: "numeric",
        month: "numeric",
        hour: "numeric",
        minute: "numeric",
        second: "numeric",
      });
      event.currentTarget.disabled = true;
      const newState = {
        ...data,
        stop: false,
        initialized: true,
        stopDate: time,
      };
      setData(newState);

      if (machineStatus == 2) {
        const updateMachine = await axios.put(
          "http://127.0.0.1:1337/machines/" + machine.id,
          {
            status: 0,
          },
          {
            headers: {
              Authorization: "Bearer " + token,
            },
          }
        );
        if (updateMachine.data) {
          setMachineStatus(0);
          // setInitialized(false);
          var digits = parseInt(Date.now() / 1000);
          const process_id = uuidv4();
          if (queue) {
            const sbeamProcessBody = {
              process_id: process_id,
              machine_id: machine.machine_id,
              machine_type: "inspection",
              items_id: queue.equipment_id,
              equipment_type: "gray_fabric",
              order_id: queue.order_id,
              process_stage: queue.stage,
              factory_id: queue.factory_id,
              start_time: queue.created_at,
              end_time: new Date(),
              process_name: "inspection",
              input: "gray_fabric",
              output: "inspected_fabric",
              output_id: digits,
            };

            setGrayFabric(digits);

            await axios.post(
              "http://127.0.0.1:1337/finished_process",
              sbeamProcessBody,
              {
                headers: {
                  Authorization: "Bearer " + token,
                },
              }
            );

            const gBody = {
              // machine_type: "creel",
              // machine_id: "200001",
              equipment_id: String(digits),
              equipment_type: "inspected_gray_fabric",
              order_id: queue.order_id,
              factory_id: queue.factory_id,
              stage: "stage 5",
              process_name: "seinging",
              status: 0,
              input: "inspected_gray_fabric",
            };
            axios.post("http://127.0.0.1:1337/queue", gBody, {
              headers: {
                Authorization: "Bearer " + token,
              },
            });
            var image = await QRCode.toDataURL(String(digits));
            window.open(`rawbt:${image}`);

            axios
              .delete(`http://127.0.0.1:1337/queue/${queue.id}`, {
                headers: {
                  Authorization: "Bearer " + token,
                },
              })
              .then(() => {
                setQueue(null);
              });

            swal("Process Stopped Successfully!");
          }
        }
      }
    } catch (error) {
      console.log(error.message);
    }
  };

  const handleChange = async (event) => {
    setInitialize(false);
    setSelectedOrder(event.target.value);
    setOrder(null);
  };

  const style = {
    withTitle2: {
      fontSize: "15px",
      fontWeight: 700,
      lineHeight: "1em",
      color: "#FFFFFF",
      paddingLeft: "20px",
    },
  };
  return (
    <>
      <header
        id="topnav"
        className="defaultscroll sticky"
        style={{ backgroundColor: "#3b4da7d1" }}
      >
        <div className="container">
          <div>
            <a className="logo" href="#">
              <img src="images/favicon.ico" height="24" alt="" />
              <span style={style.withTitle2}>CLOUDMRP-BEXIMCO DENIMS </span>
            </a>
          </div>
        </div>
      </header>

      <section className="section mt-40">
        <div className="container">
          <div className="row align-items-center">
            {order && (
              <div className="col mt-4 pt-2" id="select-box">
                <div className="component-wrapper rounded shadow">
                  <div className="p-4 border-bottom">
                    <h4 className="title mb-0"> Select Order ID </h4>
                  </div>

                  <div className="p-4">
                    <div className="form-group mb-0">
                      <select
                        className="form-control custom-select"
                        onChange={handleChange}
                      >
                        {order.map((order) => (
                          <option value={order.order_id} key={order.id}>
                            {order.order_id}
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            )}
            <div className="col-lg-12 mt-4 pt-2">
              <div
                className="card work-details rounded bg-light border-0"
                // style={{ backgroundColor: "#435796 !important" }}
              >
                <div className="card-body">
                  <h5 className="card-title text-white border-bottom pb-3 mb-3">
                    Machine Type : Fabric Inspection
                  </h5>
                  <dl className="row mb-0">
                    <dt className="col-md-4 col-5 text-white">Machine ID :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {machine ? machine.machine_id : ""}
                      {/* {machine.machine_id} */}
                    </dd>

                    <dt className="col-md-4 col-5 text-white">Factory ID :</dt>
                    <dd className="col-md-8 col-7 text-white">Factory101</dd>

                    <dt className="col-md-4 col-5 text-white">Order ID :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {selectedOrder}
                    </dd>

                    <dt className="col-md-4 col-5 text-white">Location :</dt>
                    <dd className="col-md-8 col-7 text-white">Beximco, BD</dd>

                    <dt className="col-md-4 col-5 text-white">Status :</dt>
                    <dd className="col-md-8 col-7 text-white">
                      {machineStatus == 1
                        ? "INITIALIZED"
                        : machineStatus == 2
                        ? "PROCESSING"
                        : "IDLE"}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-lg-6 col-md-6 col-12 mt-4">
              <div className="content">
                <div className="mt-2 d-flex justify-content-center">
                  <button
                    className="btn btn-md btn-primary"
                    onClick={handleInitialize}
                    // disabled={}
                    disabled={initialize}
                    style={{ display: data.initialized ? "block" : "none" }}
                  >
                    Initialize
                  </button>

                  <button
                    className="btn btn-md btn-primary"
                    // disabled={isAnonymous ? true : false}
                    disabled={start}
                    onClick={handleStart}
                    style={{ display: data.start ? "block" : "none" }}
                  >
                    Start
                  </button>

                  <button
                    className="btn btn-md btn-primary"
                    disabled={stop}
                    onClick={handleStop}
                    style={{ display: data.stop ? "block" : "none" }}
                  >
                    Stop
                  </button>

                  <button
                    className="btn btn-md btn-primary ml-4"
                    // onClick={handleInitialize}
                    // disabled={}
                  >
                    History
                  </button>

                  <button
                    className="btn btn-md btn-primary ml-4"
                    // onClick={handleInitialize}
                    // disabled={}
                    style={{ display: data.reset ? "block" : "none" }}
                  >
                    Reset
                  </button>
                </div>
              </div>
            </div>
            {queue && (
              <div className="col-lg-6 mt-4">
                <div className="media  align-items-center shadow rounded rounded border">
                  <div className="row p-2">
                    <div className="col-12 d-flex justify-content-center">
                      <div className="section-title">
                        <h4 className="title mb-2">
                          {machineStatus == 1
                            ? "Gray Fabric INITIALIZED"
                            : machineStatus == 2
                            ? "Gray Fabric PROCESSING"
                            : "Gray Fabric STOPPED"}
                        </h4>
                      </div>
                    </div>
                    <div className="col-lg-4 col-md-6 col-12 mt-2 mb-2">
                      <div
                        className="media key-feature align-items-center p-2 rounded shadow"
                        style={{ backgroundColor: "#1ada52" }}
                      >
                        <div className="icon text-center rounded-circle mr-2">
                          <i
                            data-feather="monitor"
                            className="fa fa-check text-white"
                          ></i>
                        </div>
                        <div className="media-body">
                          <h4 className="title mb-0 text-white">
                            Gray Fabric ID: {queue.equipment_id}
                          </h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {grayFabric && (
              <div className="col-lg-6 mt-4">
                <div className="media  align-items-center shadow rounded rounded border">
                  <div className="row p-2">
                    <div className="col-12 d-flex justify-content-center">
                      <div className="section-title">
                        <h4 className="title mb-2">
                          {/* {grayFabric
                            ? "FABRIC INSPECTION PROCESSING"
                            : "Fabric Inspected"} */}
                        </h4>
                      </div>
                    </div>
                    <div className="col-lg-4 col-md-6 col-12 mt-2 mb-2">
                      <div
                        className="media key-feature align-items-center p-2 rounded shadow"
                        style={{ backgroundColor: "#1ada52" }}
                      >
                        <div className="icon text-center rounded-circle mr-2">
                          <i
                            data-feather="monitor"
                            className="fa fa-check text-white"
                          ></i>
                        </div>
                        <div className="media-body">
                          <h4 className="title mb-0 text-white">
                            Inspected Fabric ID: {grayFabric}
                          </h4>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* <div className="col-lg-6 mt-4">
              <div className="media  align-items-center shadow rounded event-schedule rounded border">
                <div className="card-body">
                  <div className="media">
                    <img
                      src="images/06.jpg"
                      className="avatar avatar-medium rounded-circle img-thumbnail"
                      alt=""
                    />
                    <div className="media-body content ml-3">
                      <h4>
                        <a href="#" className="text-dark title">
                          BEAM ID: {beam}
                        </a>
                      </h4>
                      <p
                        className="text-muted location-time"
                        // style={{ textAlign: "justify" }}
                      >
                        <span className="text-dark h6 ">INITIALIZED:</span>{" "}
                        {data.initializedDate ? data.initializedDate : ""}
                        <br />
                        <span className="text-dark h6">START:</span>{" "}
                        {data.startDate} <br />{" "}
                        <span className="text-dark h6">STOP:</span>{" "}
                        {data.stopDate}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div> */}
          </div>
        </div>
      </section>
    </>
  );
}

export default FabricInspection;