- |
-
+ |
+
{dayjs(service.serviced_on).format("DD MMM YYYY")}
|
-
-
+ |
+
{service.note || "--"}
|
-
-
+ |
+
{formatDate(service.created_date)}
|
-
-
+ |
+
{service.edits?.length > 1 ? (
{
setServiceDetails(
No Service Logs Found
@@ -271,9 +271,9 @@ const AssetManage = (props: AssetManageProps) => {
-
+
- {item.label}
+ {item.label}
-
+
{asset?.description}
@@ -397,7 +397,7 @@ const AssetManage = (props: AssetManageProps) => {
)}
-
@@ -468,7 +468,7 @@ const AssetManage = (props: AssetManageProps) => {
)}
-
+
Service Details
@@ -489,7 +489,7 @@ const AssetManage = (props: AssetManageProps) => {
-
+
{asset?.created_date && (
)}
@@ -522,27 +522,27 @@ const AssetManage = (props: AssetManageProps) => {
className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
id="service-history"
>
-
+
- |
+ |
Serviced on
|
-
+ |
Note
|
-
+ |
Created on
|
-
+ |
Last Updated
|
-
+ |
Edit
|
-
+
{servicesDetails}
@@ -552,24 +552,24 @@ const AssetManage = (props: AssetManageProps) => {
className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg"
id="transaction-history"
>
-
+
- |
+ |
Moved from
|
-
+ |
Moved to
|
-
+ |
Moved By
|
-
+ |
Moved On
|
-
+
{transactionDetails}
diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 87bf561d471..196a902b450 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -67,7 +67,7 @@ export const AssetServiceEditModal = (props: {
>
-
+
{t("update_record_for_asset")}
{props.asset?.name}
@@ -81,21 +81,21 @@ export const AssetServiceEditModal = (props: {
onClick={() => {
setEditRecord(edit);
}}
- className="my-2 flex cursor-pointer justify-between rounded-lg border border-gray-300 p-4 py-2 transition-colors duration-200 hover:bg-gray-100"
+ className="my-2 flex cursor-pointer justify-between rounded-lg border border-secondary-300 p-4 py-2 transition-colors duration-200 hover:bg-secondary-100"
>
-
+
{isLast ? "Created" : "Edited"} On
-
+
{formatDateTime(edit.edited_on)}
-
+
{isLast ? "Created" : "Edited"} By
-
+
{edit.edited_by.username}
@@ -109,42 +109,45 @@ export const AssetServiceEditModal = (props: {
);
})}
{editRecord && (
-
+
-
+
{t("edited_on")}
-
+
{formatDateTime(editRecord.edited_on)}
-
+
{t("edited_by")}
-
+
{editRecord.edited_by.username}
-
+
{t("serviced_on")}
{formatDate(editRecord.serviced_on)}
-
+
{t("notes")}
-
+
{editRecord.note || "-"}
@@ -175,7 +178,7 @@ export const AssetServiceEditModal = (props: {
>
-
+
{t("update_record_for_asset")}
{props.asset?.name}
diff --git a/src/Components/Assets/AssetWarrantyCard.tsx b/src/Components/Assets/AssetWarrantyCard.tsx
index 860fb5ab7af..cde8dfc256d 100644
--- a/src/Components/Assets/AssetWarrantyCard.tsx
+++ b/src/Components/Assets/AssetWarrantyCard.tsx
@@ -36,7 +36,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
{Object.keys(details).map((key) => (
-
+
{key}
@@ -65,7 +65,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
-
+
Customer Support Details
{asset.support_name || "--"}
@@ -78,7 +78,9 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
{item[1] && (
<>
- {item[0]} :
+
+ {item[0]} :
+
{
prefetch: !!(qParams.facility && qParams.location),
});
- const getAssetIdFromQR = async (assetUrl: string) => {
+ function isValidURL(url: string) {
+ try {
+ new URL(url);
+ return true;
+ } catch (_) {
+ return false;
+ }
+ }
+
+ const accessAssetIdFromQR = async (assetURL: string) => {
try {
setIsLoading(true);
setIsScannerActive(false);
- const params = parseQueryParams(assetUrl);
+ if (!isValidURL(assetURL)) {
+ setIsLoading(false);
+ Notification.Error({
+ msg: "Invalid QR code scanned !!!",
+ });
+ return;
+ }
+ const params = parseQueryParams(assetURL);
// QR Maybe searchParams "asset" or "assetQR"
+ // If no params found, then use assetText
const assetId = params.asset || params.assetQR;
+
if (assetId) {
- const { data } = await request(routes.listAssets, {
- query: { qr_code_id: assetId },
+ const { data } = await request(routes.listAssetQR, {
+ pathParams: { qr_code_id: assetId },
+ });
+ if (!data) {
+ setIsLoading(false);
+ Notification.Error({
+ msg: "Invalid QR code scanned !!!",
+ });
+ return;
+ }
+ const { data: assetData } = await request(routes.listAssets, {
+ query: { qr_code_id: assetId, limit: 1 },
+ });
+ if (assetData?.results.length === 1) {
+ navigate(
+ `/facility/${assetData.results[0].location_object.facility?.id}/assets/${assetData.results[0].id}`,
+ );
+ } else {
+ setIsLoading(false);
+ Notification.Error({
+ msg: "Asset not found !!!",
+ });
+ }
+ } else {
+ setIsLoading(false);
+ Notification.Error({
+ msg: "Invalid QR code scanned !!!",
});
- return data?.results[0].id;
- }
- } catch (err) {
- console.log(err);
- }
- };
-
- const checkValidAssetId = async (assetId: string) => {
- const { data: assetData } = await request(routes.getAsset, {
- pathParams: { external_id: assetId },
- });
- try {
- if (assetData) {
- navigate(
- `/facility/${assetData.location_object.facility?.id}/assets/${assetId}`,
- );
}
} catch (err) {
console.log(err);
- setIsLoading(false);
- Notification.Error({
- msg: "Invalid QR code scanned !!!",
- });
}
};
@@ -159,8 +182,7 @@ const AssetsList = () => {
{
if (text) {
- const assetId = await getAssetIdFromQR(text);
- checkValidAssetId(assetId ?? text);
+ await accessAssetIdFromQR(text);
}
}}
onError={(e) => {
@@ -259,7 +281,7 @@ const AssetsList = () => {
} else {
manageAssets = (
- No Assets Found
+ No Assets Found
diff --git a/src/Components/Auth/Login.tsx b/src/Components/Auth/Login.tsx
index a74969fbfa4..68fdf2a6b67 100644
--- a/src/Components/Auth/Login.tsx
+++ b/src/Components/Auth/Login.tsx
@@ -193,13 +193,13 @@ export const Login = (props: { forgot?: boolean }) => {
{custom_description || t("goal")}
) : (
-
+
{t("goal")}
)}
@@ -236,7 +236,7 @@ export const Login = (props: { forgot?: boolean }) => {
href={coronasafe_url}
target="_blank"
rel="noopener noreferrer"
- className="text-gray-500"
+ className="text-secondary-500"
>
{t("footer_body")}
@@ -265,7 +265,7 @@ export const Login = (props: { forgot?: boolean }) => {
className="h-14 rounded-lg py-3"
alt="state logo"
/>
-
+
)}
![]() {
onBlur={() => setPasswordInputInFocus(false)}
/>
{passwordInputInFocus && (
-
+
{validateRule(
form.password?.length >= 8,
"Password should be atleast 8 characters long",
diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
index c8a2d5451bc..dafb28d133f 100644
--- a/src/Components/CameraFeed/AssetBedSelect.tsx
+++ b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -2,15 +2,69 @@ import { Fragment } from "react";
import { AssetBedModel } from "../Assets/AssetTypes";
import { Listbox, Transition } from "@headlessui/react";
import CareIcon from "../../CAREUI/icons/CareIcon";
+import { classNames } from "../../Utils/utils";
+import { dropdownOptionClassNames } from "../Form/MultiSelectMenuV2";
+import ButtonV2 from "../Common/components/ButtonV2";
interface Props {
+ disabled?: boolean;
options: AssetBedModel[];
value?: AssetBedModel;
label?: (value: AssetBedModel) => string;
onChange?: (value: AssetBedModel) => void;
}
-export default function AssetBedSelect(props: Props) {
+export default function CameraPresetSelect(props: Props) {
+ const label = props.label ?? defaultLabel;
+ return (
+ <>
+ {/* Desktop View */}
+
+ {props.options
+ .slice(0, props.options.length > 5 ? 4 : 5)
+ .map((option) => {
+ const selected = props.value?.id === option.id;
+
+ return (
+ props.onChange?.(option)}
+ border
+ size="small"
+ >
+ {label(option)}
+ {selected && (
+
+ )}
+
+ );
+ })}
+ {props.options.length > 5 && (
+ o.id === props.value?.id)}
+ />
+ )}
+
+
+ {/* Mobile View */}
+
+
+
+
+ );
+}
+
+export const CameraPresetDropdown = (
+ props: Props & { placeholder: string },
+) => {
const selected = props.value;
const options = props.options.filter(({ meta }) => meta.type !== "boundary");
@@ -18,44 +72,53 @@ export default function AssetBedSelect(props: Props) {
const label = props.label ?? defaultLabel;
return (
-
+
-
+
- {selected ? label(selected) : "No Preset"}
+ {options.length === 0
+ ? "No presets"
+ : selected
+ ? label(selected)
+ : props.placeholder}
-
-
+ {selected && (
+
+ )}
+
+
-
+
{options?.map((obj) => (
- `relative cursor-default select-none px-2 py-1 ${
- active ? "bg-zinc-700 text-white" : "text-zinc-400"
- }`
+ className={(args) =>
+ classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
}
value={obj}
>
- {({ selected }) => (
- <>
-
- {label(obj)}
-
-
- )}
+ {label(obj)}
))}
@@ -63,7 +126,7 @@ export default function AssetBedSelect(props: Props) {
);
-}
+};
const defaultLabel = ({ bed_object, meta }: AssetBedModel) => {
return `${bed_object.name}: ${meta.preset_name}`;
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 8f7659cf730..7c5cf7a8a19 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -9,13 +9,14 @@ import FeedAlert, { FeedAlertState } from "./FeedAlert";
import FeedNetworkSignal from "./FeedNetworkSignal";
import NoFeedAvailable from "./NoFeedAvailable";
import FeedControls from "./FeedControls";
-import Fullscreen from "../../CAREUI/misc/Fullscreen";
+import FeedWatermark from "./FeedWatermark";
+import useFullscreen from "../../Common/hooks/useFullscreen";
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
interface Props {
children?: React.ReactNode;
asset: AssetData;
preset?: PTZPayload;
- silent?: boolean;
className?: string;
// Callbacks
onCameraPresetsObtained?: (presets: Record) => void;
@@ -25,16 +26,18 @@ interface Props {
constrolsDisabled?: boolean;
shortcutsDisabled?: boolean;
onMove?: () => void;
+ operate: ReturnType["operate"];
}
export default function CameraFeed(props: Props) {
const playerRef = useRef(null);
+ const playerWrapperRef = useRef(null);
const streamUrl = getStreamUrl(props.asset);
+ const inlineControls = useBreakpoints({ default: false, sm: true });
const player = usePlayer(streamUrl, playerRef);
- const operate = useOperateCamera(props.asset.id, props.silent);
- const [isFullscreen, setFullscreen] = useState(false);
+ const [isFullscreen, setFullscreen] = useFullscreen();
const [state, setState] = useState();
useEffect(() => setState(player.status), [player.status, setState]);
@@ -42,7 +45,10 @@ export default function CameraFeed(props: Props) {
useEffect(() => {
async function move(preset: PTZPayload) {
setState("moving");
- const { res } = await operate({ type: "absolute_move", data: preset });
+ const { res } = await props.operate({
+ type: "absolute_move",
+ data: preset,
+ });
setTimeout(() => setState((s) => (s === "moving" ? undefined : s)), 4000);
if (res?.status === 500) {
setState("host_unreachable");
@@ -58,19 +64,19 @@ export default function CameraFeed(props: Props) {
useEffect(() => {
if (!props.onCameraPresetsObtained) return;
async function getPresets(cb: (presets: Record) => void) {
- const { res, data } = await operate({ type: "get_presets" });
+ const { res, data } = await props.operate({ type: "get_presets" });
if (res?.ok && data) {
cb((data as { result: Record }).result);
}
}
getPresets(props.onCameraPresetsObtained);
- }, [operate, props.onCameraPresetsObtained]);
+ }, [props.operate, props.onCameraPresetsObtained]);
const initializeStream = useCallback(() => {
player.initializeStream({
onSuccess: async () => {
props.onStreamSuccess?.();
- const { res } = await operate({ type: "get_status" });
+ const { res } = await props.operate({ type: "get_status" });
if (res?.status === 500) {
setState("host_unreachable");
}
@@ -87,34 +93,113 @@ export default function CameraFeed(props: Props) {
initializeStream();
};
+ const controls = !props.constrolsDisabled && (
+ {
+ if (!value) {
+ setFullscreen(false);
+ return;
+ }
+
+ if (isIOS) {
+ const element = document.querySelector("video");
+ if (!element) {
+ return;
+ }
+ setFullscreen(true, element, true);
+ return;
+ }
+
+ if (!playerRef.current) {
+ return;
+ }
+
+ setFullscreen(
+ true,
+ playerWrapperRef.current || (playerRef.current as HTMLElement),
+ true,
+ );
+ }}
+ onReset={resetStream}
+ onMove={async (data) => {
+ props.onMove?.();
+ setState("moving");
+ const { res } = await props.operate({ type: "relative_move", data });
+ setTimeout(() => {
+ setState((state) => (state === "moving" ? undefined : state));
+ }, 4000);
+ if (res?.status === 500) {
+ setState("host_unreachable");
+ }
+ }}
+ />
+ );
+
return (
- setFullscreen(false)}>
+
-
-
-
+ {
+ if (player.status !== "playing") {
+ return "bg-black text-zinc-400";
+ }
+
+ if (isFullscreen) {
+ return "bg-zinc-900 text-white";
+ }
+
+ return "bg-zinc-500/20 text-zinc-800";
+ })(),
+ )}
+ >
+
+ {props.children}
+
+
+
{props.asset.name}
-
-
-
+ {!isIOS && (
+
+
+
+ )}
- {props.children}
+
{/* Notifications */}
+ {player.status === "playing" && }
{/* No Feed informations */}
{state === "host_unreachable" && (
@@ -130,7 +215,7 @@ export default function CameraFeed(props: Props) {
{player.status === "offline" && (
}
controls={false}
+ pip={false}
playsinline
playing
muted
@@ -162,10 +248,12 @@ export default function CameraFeed(props: Props) {
) : (
+ {controls}
+
+ )}
-
+
);
}
diff --git a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
index 4c205c0e9c6..7268397b81a 100644
--- a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
+++ b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
@@ -1,10 +1,12 @@
import { useState } from "react";
import { AssetBedModel, AssetData } from "../Assets/AssetTypes";
import CameraFeed from "./CameraFeed";
-import AssetBedSelect from "./AssetBedSelect";
import useQuery from "../../Utils/request/useQuery";
import routes from "../../Redux/api";
import useSlug from "../../Common/hooks/useSlug";
+import { CameraPresetDropdown } from "./AssetBedSelect";
+import useOperateCamera from "./useOperateCamera";
+import { classNames } from "../../Utils/utils";
interface Props {
asset: AssetData;
@@ -18,23 +20,29 @@ export default function LocationFeedTile(props: Props) {
query: { limit: 100, facility, asset: props.asset?.id },
});
+ const { operate, key } = useOperateCamera(props.asset.id, true);
+
return (
-
- {loading ? (
- loading presets...
- ) : (
-
+
+
);
diff --git a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
index e2931a816bc..80032fc9abc 100644
--- a/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
+++ b/src/Components/CameraFeed/CentralLiveMonitoring/LiveMonitoringFilters.tsx
@@ -7,6 +7,7 @@ import useFilters from "../../../Common/hooks/useFilters";
import { Fragment } from "react";
import CareIcon from "../../../CAREUI/icons/CareIcon";
import useSlug from "../../../Common/hooks/useSlug";
+import { useTranslation } from "react-i18next";
interface Props {
perPageLimit: number;
@@ -16,6 +17,7 @@ interface Props {
}
const LiveMonitoringFilters = (props: Props) => {
+ const { t } = useTranslation();
const facilityId = useSlug("facility");
const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
limit: props.perPageLimit,
@@ -25,9 +27,9 @@ const LiveMonitoringFilters = (props: Props) => {
-
+
- Settings and Filters
+ {t("settings_and_filters")}
{
leaveTo="opacity-0 translate-y-1"
>
-
-
+
+
-
+
{props.totalCount}{" "}
Camera(s) present
@@ -73,37 +75,6 @@ const LiveMonitoringFilters = (props: Props) => {
/>
- {/* {
- if (value) {
- updateQuery({ [name]: value });
- } else {
- removeFilter(name);
- }
- }}
- labelClassName="text-sm"
- errorClassName="hidden"
- />
- {
- if (value) {
- updateQuery({ [name]: value });
- } else {
- removeFilter(name);
- }
- }}
- labelClassName="text-sm"
- errorClassName="hidden"
- /> */}
= {
+const ALERT_ICON_MAP: Partial> = {
playing: "l-play-circle",
stop: "l-stop-circle",
offline: "l-exclamation-triangle",
loading: "l-spinner",
- moving: "l-expand-from-corner",
+ // moving: "l-expand-from-corner",
zooming: "l-search",
saving_preset: "l-save",
host_unreachable: "l-exclamation-triangle",
@@ -53,14 +53,14 @@ export default function FeedAlert({ state }: Props) {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-5"
>
-
- {state && (
+
+ {state && ALERT_ICON_MAP[state] && (
)}
diff --git a/src/Components/CameraFeed/FeedButton.tsx b/src/Components/CameraFeed/FeedButton.tsx
index f0e568d4ad4..e2ae2a8fe9e 100644
--- a/src/Components/CameraFeed/FeedButton.tsx
+++ b/src/Components/CameraFeed/FeedButton.tsx
@@ -4,7 +4,7 @@ import { classNames } from "../../Utils/utils";
interface Props {
className?: string;
children?: React.ReactNode;
- readonly shortcut?: string[];
+ shortcuts?: string[][];
onTrigger: () => void;
helpText?: string;
shortcutsDisabled?: boolean;
@@ -15,7 +15,8 @@ export default function FeedButton(props: Props) {
const child = (
| |