Skip to content

Commit

Permalink
Tailwind LiveFeed.tsx (#5718)
Browse files Browse the repository at this point in the history 
* fixes #4966

* fixes #4966
  • Loading branch information
@rithviknishad
rithviknishad committed Jun 21, 2023
1 parent 77abcdd commit 0eec833
Showing 1 changed file with 57 additions and 111 deletions.
168 changes: 57 additions & 111 deletions src/Components/Facility/Consultations/LiveFeed.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
/* eslint-disable eqeqeq */
import { useEffect, useState, useRef } from "react";
import { useDispatch } from "react-redux";
import screenfull from "screenfull";
import useKeyboardShortcut from "use-keyboard-shortcut";
import loadable from "@loadable/component";
import {
listAssetBeds,
partialUpdateAssetBed,
Expand All @@ -15,23 +13,16 @@ import {
useMSEMediaPlayer,
} from "../../../Common/hooks/useMSEplayer";
import { useFeedPTZ } from "../../../Common/hooks/useFeedPTZ";
const PageTitle = loadable(() => import("../../Common/PageTitle"));
import * as Notification from "../../../Utils/Notifications.js";
import {
Card,
CardContent,
InputLabel,
Modal,
Tooltip,
} from "@material-ui/core";
import { FeedCameraPTZHelpButton } from "./Feed";
import { AxiosError } from "axios";
import { isNull } from "lodash";
import { BedSelect } from "../../Common/BedSelect";
import { BedModel } from "../models";
import { LegacyTextInputField } from "../../Common/HelperInputFields";
import useWindowDimensions from "../../../Common/hooks/useWindowDimensions";
import CareIcon from "../../../CAREUI/icons/CareIcon";
import Page from "../../Common/components/Page";
import ConfirmDialogV2 from "../../Common/ConfirmDialogV2";
import { FieldLabel } from "../../Form/FormFields/FormField";

const LiveFeed = (props: any) => {
const middlewareHostname =
Expand Down Expand Up @@ -294,85 +285,50 @@ const LiveFeed = (props: any) => {
}

return (
<div className="mt-4 px-6 mb-2">
<PageTitle title="Live Feed" hideBack={true} />

<Page title="Live Feed" hideBack>
{toDelete && (
<Modal
className="flex h-fit justify-center items-center top-1/2"
open={!isNull(toDelete)}
>
<Card>
<CardContent>
<h5>
Confirm delete preset: {toDelete.meta.preset_name} (in bed:{" "}
{toDelete.bed_object.name})?
</h5>
<hr />
<div className="flex gap-3 justify-end mt-2">
<button
className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
onClick={() => deletePreset(toDelete.id)}
>
Confirm
</button>
<button className="text-sm" onClick={() => setToDelete(null)}>
Cancel
</button>
</div>
</CardContent>
</Card>
</Modal>
<ConfirmDialogV2
show
title="Are you sure you want to delete this preset?"
description={
<span>
<p>
Preset: <strong>{toDelete.meta.preset_name}</strong>
</p>
<p>
Bed: <strong>{toDelete.bed_object.name}</strong>
</p>
</span>
}
action="Delete"
variant="danger"
onClose={() => setToDelete(null)}
onConfirm={() => deletePreset(toDelete.id)}
/>
)}
{toUpdate && (
<Modal
className="flex h-fit justify-center items-center top-1/2"
open={!isNull(toUpdate)}
<ConfirmDialogV2
show
title="Update Preset"
description={"Preset: " + toUpdate.meta.preset_name}
action="Update"
variant="primary"
onClose={() => setToUpdate(null)}
onConfirm={() => updatePreset(toUpdate)}
>
<Card>
<CardContent>
<h5>Update Preset</h5>
<hr />
<div>
<InputLabel id="asset-type">Bed</InputLabel>
<BedSelect
name="bed"
setSelected={(selected) => setBed(selected as BedModel)}
selected={bed}
error=""
multiple={false}
location={cameraAsset.location_id}
facility={cameraAsset.facility_id}
/>
</div>
<div>
<InputLabel id="location">Preset Name</InputLabel>
<LegacyTextInputField
name="name"
id="location"
variant="outlined"
margin="dense"
type="text"
value={preset}
onChange={(e) => setNewPreset(e.target.value)}
errors=""
/>
</div>

<div className="flex gap-3 justify-end mt-2">
<button
onClick={() => updatePreset(toUpdate)}
className="bg-red-500 px-3 text-sm py-1 rounded-md text-white"
>
Confirm
</button>
<button className="text-sm" onClick={() => setToUpdate(null)}>
Cancel
</button>
</div>
</CardContent>
</Card>
</Modal>
<div className="flex flex-col mt-4">
<FieldLabel required>Bed</FieldLabel>
<BedSelect
name="bed"
setSelected={(selected) => setBed(selected as BedModel)}
selected={bed}
error=""
multiple={false}
location={cameraAsset.location_id}
facility={cameraAsset.facility_id}
/>
</div>
</ConfirmDialogV2>
)}
<div className="mt-4 flex flex-col">
<div className="flex flex-col lg:flex-row gap-4 mt-4 relative">
Expand Down Expand Up @@ -451,30 +407,20 @@ const LiveFeed = (props: any) => {
.replace("ArrowRight", "→");

return (
<Tooltip
placement="top"
arrow={true}
title={
<span className="text-sm font-semibold">
{`${option.label} (${shortcutKeyDescription})`}
</span>
}
key={option.action}
<button
className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1 tooltip"
onClick={option.callback}
>
<button
className="bg-green-100 hover:bg-green-200 border border-green-100 p-2 flex-1"
onClick={option.callback}
>
<span className="sr-only">{option.label}</span>
{option.icon ? (
<i className={`fas fa-${option.icon} md:p-2`}></i>
) : (
<span className="px-2 font-bold h-full w-8 flex items-center justify-center">
{option.value}x
</span>
)}
</button>
</Tooltip>
<span className="sr-only">{option.label}</span>
{option.icon ? (
<i className={`fas fa-${option.icon} md:p-2`}></i>
) : (
<span className="px-2 font-bold h-full w-8 flex items-center justify-center">
{option.value}x
</span>
)}
<span className="tooltip-text tooltip-top -translate-x-1/2 text-sm font-semibold">{`${option.label} (${shortcutKeyDescription})`}</span>
</button>
);
})}
<div className="pl-3 hideonmobilescreen">
Expand Down Expand Up @@ -644,7 +590,7 @@ const LiveFeed = (props: any) => {
</div>
</div>
</div>
</div>
</Page>
);
};

Expand Down

0 comments on commit 0eec833

Please sign in to comment.