thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

test with mock data

Browse Source
This commit is contained in:
Azlothe 2024-05-19 20:51:10 -07:00
parent 5de76238c3
commit 84851cae4f
2 changed files with 90 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Element/Simple/TableElement.tsx
View File

@ -13,12 +13,16 @@ const TableElement = ({ element, children }: TableElementProps) => {
const renderTable = () => {
return (
<table className="border-collapse">
<table className="border-collapse w-full border-spacing-14">
<tbody>
{Array.from({ length: rows }).map((_, i) => (
<tr className="border-y-2 border-gray-800" key={i}>
<tr className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`} key={i}>
{Array.from({ length: cols }).map((_, j) => (
<td key={j}>{tableData[i][j]}</td>
<td key={j} className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && 'text-[#bcbcbc]'} border-[#585864] py-1`}>
<div className='ml-4'>
{tableData[i][j]}
</div>
</td>
))}
</tr>
))}

92
src/components/Widget/HistoryWidget.tsx
View File

@ -1,4 +1,5 @@
import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
import TableElement from '../Element/Simple/TableElement';
type HistoryWidgetProps = {
widget: HistoryWidgetType;
@ -13,17 +14,90 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
<div
key={id}
style={{ top: y, left: x, width: w, height: h }}
className={`absolute bg-[#2D2D30] text-white grid grid-cols-12 items-start justify-start p-4`}
className={`absolute text-white `}
>
<div className="col-span-1 flex flex-col h-full">
<span className="bg-teal-300 flex flex-row py-1 mx-4 rounded-md items-center justify-center">
4
</span>
<div className="border-gray-200 h-full w-1/2 border-r-4 my-4 flex flex-row items-center justify-center rounded-sm" />
</div>
<div className="grid grid-cols-12 items-start justify-start p-4 gap-4">
<div className="col-span-11 bg-gray-300">message content</div>
<div className="col-span-1 flex flex-col">test</div>
{/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
<div className="col-span-1 flex flex-col h-full">
<span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
4
</span>
<div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
</div>
<div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
<div className="grid grid-cols-6">
<div className="col-span-2 flex flex-col gap-5">
<div className="font-semibold text-xl">
<div className="text-[#97979d]">ACA-7</div>
Request to attack
</div>
<div className="font-normal">Approval for kinetic attack</div>
</div>
<div className="col-span-4 w-full">
<TableElement
element={{
id: 'convoID_<el.index>',
modality: 'visual',
h: 3,
w: 4,
type: 'table',
rows: 4,
cols: 2,
tableData: [
['location', '34N, 118W'],
['priority', 'high'],
['threat-level', 'high'],
['col.damage', '45%'],
],
}}
/>
</div>
</div>
</div>
<div className="col-span-1 flex flex-col h-full">
<span className="bg-[#2d2d30] text-white text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
3
</span>
<div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
</div>
<div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
<div className="grid grid-cols-6">
<div className="col-span-2 flex flex-col gap-5">
<div className="font-semibold text-xl">
<div className="text-[#97979d]">Update</div>
Threat Level High
</div>
<div className="font-normal"></div>
</div>
<div className="col-span-4 w-full">
<TableElement
element={{
id: 'convoID_<el.index>',
modality: 'visual',
h: 3,
w: 4,
type: 'table',
rows: 2,
cols: 2,
tableData: [
['priority', 'high'],
['threat-level', 'high'],
],
}}
/>
</div>
</div>
</div>
</div>
</div>
);
};