[text] Code

Viewer

  1. import React, { useEffect, useState } from "react";
  2. import "../DataTable/Table.css";
  3. import { FaCircle } from "react-icons/fa";
  4. import Header from "./TableHeader";
  5. import axios from "axios";
  6. import { Buffer } from 'buffer';
  7. import { BsFillCircleFill, BsArrowLeftRight } from "react-icons/bs";
  8.  
  9.  
  10. const TableCheck = props => {
  11.     const [comments, setdata] = useState([]);
  12.     const headers = [
  13.         { name: "", field: "thumbnail", sortable: true },
  14.         { name: "Clip", field: "name", sortable: true },
  15.         { name: "Slug Name", field: "creator", sortable: true },
  16.         { name: "Channel", field: "Duration", sortable: false },
  17.         { name: "Status", field: "End Time", sortable: true },
  18.         { name: "Mode", field: "Loaded Clip", sortable: true },
  19.         { name: "Start Time", field: "Start Time", sortable: true },
  20.         { name: "Duration", field: "Object_id", sortable: true },
  21.     ];
  22.     useEffect(() => {
  23.         getData1();
  24.     }, [props.val, props.NextVal]);
  25.  
  26.  
  27.     async function getData1() {
  28.         console.log("Ssending Props In table", props.val, props.NextVal);
  29.         var data = {
  30.             CURRENTRDL: props.val,
  31.             NEXTRDL: props.NextVal
  32.         }
  33.         axios({
  34.             method: 'POST',
  35.             url: `http://localhost:9763/api/setRundown`,
  36.             data,
  37.             headers: {
  38.                 'Accept': 'application/json',
  39.                 'Content-Type': 'application/json',
  40.                 'Access-control-allow-origin': '*'
  41.             },
  42.             auth: {
  43.                 username: 'admin',
  44.                 password: 'password'
  45.             }
  46.         }).then(response => {
  47.             setdata([...Object.values(response.data).flat()]);
  48.              console.log("table_check", [response.data]);
  49.         }).catch(error => {
  50.             console.log("Error In Post Data", error);
  51.         });
  52.     }
  53.  
  54.     const handleKeyDown = (event) => {
  55.         event.preventDefault();
  56.         //up and Down key
  57.         const active = document.activeElement;
  58.         active.addEventListener('keydown', function (event) {
  59.  
  60.             switch (event.key) {
  61.                 case "ArrowUp":
  62.                     active?.previousElementSibling?.focus();
  63.                     event.stopPropagation(0);
  64.                     break;
  65.                 case "ArrowDown":
  66.                     active?.nextElementSibling?.focus();
  67.                     break;
  68.                 default: break;
  69.             }
  70.         });
  71.     }
  72.  
  73.  
  74.     return (
  75.         <div className="mainContent">
  76.             <div className="tableHeaderBody">
  77.                 <div className="TableText">{props.val}</div>  <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
  78.             </div>
  79.             <div className="tableBody">
  80.                 <table className="table" >
  81.                     <Header
  82.                         headers={headers}
  83.                     />
  84.                     <tbody >
  85.                         {comments.map((comment) => {
  86.                             //Display Hex to base64 image format
  87.                             const base64 = Buffer.from(comment.Thumbnail, 'hex').toString('base64');
  88.                             //console.log(base64);
  89.                             if (comment.Status === 1 || comment.Mode === false) {
  90.                                 return (
  91.                                     <tr key={comment.SlugName} tabIndex={0} className="border_bottom" onKeyDown={handleKeyDown}>
  92.                                         <td style={{ color: "white", width: "200px" }}>
  93.                                             <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
  94.                                         </td>
  95.                                         <td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
  96.                                         <td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
  97.                                         <td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
  98.                                         <td style={{ color: "white", width: "140px" }}><div className="bordercolor"><BsFillCircleFill style={{ color: "#41fc00", width: "20px" }} /> Ready</div> </td>
  99.                                         <td style={{ color: "white" }}><BsArrowLeftRight style={{ color: "rgb(145, 143, 143)" }} /></td>
  100.                                         <td style={{ color: "white" }}>{comment.StartTime}</td>
  101.                                         <td style={{ color: "white" }}>{comment.Duration}</td>
  102.                                     </tr>)
  103.                             }
  104.                             else if (comment.Status === 0 || comment.Mode === true) {
  105.                                 return (
  106.                                     <tr key={comment.SlugName} tabIndex={0} className="border_bottom" onKeyDown={handleKeyDown}>
  107.                                         <td style={{ color: "white", width: "200px" }}>
  108.                                             <img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
  109.                                         </td>
  110.                                         <td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
  111.                                         <td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
  112.                                         <td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
  113.                                         <td style={{ color: "white", width: "140px" }}><div className="bordercolor"><BsFillCircleFill style={{ color: "red", width: "20px" }} /> Not Ready</div> </td>
  114.                                         <td style={{ color: "white" }}><BsArrowLeftRight style={{ color: "#41fc00" }} /></td>
  115.                                         <td style={{ color: "white" }}>{comment.StartTime}</td>
  116.                                         <td style={{ color: "white" }}>{comment.Duration}</td>
  117.                                     </tr>)
  118.                             }                                               
  119.                         }
  120.                         )
  121.                         }
  122.  
  123.                     </tbody>
  124.  
  125.                 </table>
  126.             </div>
  127.         </div>
  128.  
  129.     )
  130. }
  131.  
  132. export default TableCheck;
  133.  

Editor

You can edit this paste and save as new:


File Description
  • Code
  • Paste Code
  • 23 Jan-2022
  • 6.35 Kb
You can Share it: