Merge pull request #13 from Eyevinn/feat-add-management-lock

feat: add management lock
Eyevinn · Sep 17, 2024 · 34a0421 · 34a0421
2 parents e373e58 + ff5eb34
commit 34a0421
Show file tree

Hide file tree

Showing 26 changed files with 293 additions and 132 deletions.
diff --git a/src/app/inventory/page.tsx b/src/app/inventory/page.tsx
@@ -1,22 +1,5 @@
-import { Suspense } from 'react';
-import HeaderNavigation from '../../components/headerNavigation/HeaderNavigation';
-import { useTranslate } from '../../i18n/useTranslate';
-import { LoadingCover } from '../../components/loader/LoadingCover';
-import Inventory from '../../components/inventory/Inventory';
+import { InventoryPageContent } from '../../components/inventory/InventoryPageContent';
 
 export default function Page() {
-  const t = useTranslate();
-
-  return (
-    <>
-      <HeaderNavigation>
-        <h1 className="m-2 text-4xl text-p text-center mx-auto">
-          {t('inventory')}
-        </h1>
-      </HeaderNavigation>
-      <Suspense fallback={<LoadingCover />}>
-        <Inventory />
-      </Suspense>
-    </>
-  );
+  return <InventoryPageContent />;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,15 @@
-import React, { Suspense } from 'react';
-import ProductionsList from '../components/productionsList/ProductionsList';
-import { CreateProduction } from '../components/createProduction/CreateProduction';
-import { LoadingCover } from '../components/loader/LoadingCover';
+import React from 'react';
 import Link from 'next/link';
 import { Button } from '../components/button/Button';
 import { useTranslate } from '../i18n/useTranslate';
+import { getProductions } from '../api/manager/productions';
+import { HomePageContent } from '../components/homePageContent/HomePageContent';
 
 export const dynamic = 'force-dynamic';
 
-function Home() {
+async function Home() {
   const t = useTranslate();
+  const productions = await getProductions();
   return (
     <>
       <div>
@@ -22,13 +22,7 @@ function Home() {
             </Link>
           </div>
         </div>
-      </div>
-      <CreateProduction />
-      <div className="flex items-center w-full">
-        <Suspense fallback={<LoadingCover />}>
-          {/* @ts-expect-error Async Server Component: https://github.com/vercel/next.js/issues/42292 */}
-          <ProductionsList />
-        </Suspense>
+        <HomePageContent productions={productions} />
       </div>
     </>
   );

diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
@@ -1,8 +1,6 @@
 'use client';
-import React, { useEffect, useState, KeyboardEvent } from 'react';
+import React, { useEffect, useState, KeyboardEvent, useContext } from 'react';
 import { PageProps } from '../../../../.next/types/app/production/[id]/page';
-import SourceListItem from '../../../components/sourceListItem/SourceListItem';
-import FilterOptions from '../../../components/filter/FilterOptions';
 import { AddSource } from '../../../components/addSource/AddSource';
 import { IconX } from '@tabler/icons-react';
 import { useSources } from '../../../hooks/sources/useSources';
@@ -43,6 +41,8 @@ import { useGetMultiviewPreset } from '../../../hooks/multiviewPreset';
 import { ISource } from '../../../hooks/useDragableItems';
 import { useMultiviews } from '../../../hooks/multiviews';
 import SourceList from '../../../components/sourceList/SourceList';
+import { LockButton } from '../../../components/lockButton/LockButton';
+import { GlobalContext } from '../../../contexts/GlobalContext';
 
 export default function ProductionConfiguration({ params }: PageProps) {
   const t = useTranslate();
@@ -89,6 +89,8 @@ export default function ProductionConfiguration({ params }: PageProps) {
   const [deleteSourceStatus, setDeleteSourceStatus] =
     useState<DeleteSourceStatus>();
 
+  const { locked } = useContext(GlobalContext);
+
   useEffect(() => {
     refreshPipelines();
     refreshControlPanels();
@@ -608,14 +610,18 @@ export default function ProductionConfiguration({ params }: PageProps) {
             }
           }}
           onBlur={() => updateConfigName(configurationName)}
+          disabled={locked}
         />
         <div
           className="flex mr-2 w-fit rounded justify-end items-center gap-3"
           key={'StartProductionButtonKey'}
           id="presetDropdownDefaultCheckbox"
         >
+          <LockButton />
           <PresetDropdown
-            disabled={productionSetup ? productionSetup.isActive : false}
+            disabled={
+              (productionSetup ? productionSetup.isActive : false) || locked
+            }
             isHidden={isPresetDropdownHidden}
             setHidden={setIsPresetDropdownHidden}
             selectedPreset={selectedPreset}
@@ -629,14 +635,14 @@ export default function ProductionConfiguration({ params }: PageProps) {
               })}
           </PresetDropdown>
           <ConfigureOutputButton
-            disabled={productionSetup?.isActive}
+            disabled={productionSetup?.isActive || locked}
             preset={selectedPreset}
             updatePreset={updatePreset}
           />
           <StartProductionButton
             refreshProduction={refreshProduction}
             production={productionSetup}
-            disabled={!selectedPreset ? true : false}
+            disabled={(!selectedPreset ? true : false) || locked}
           />
         </div>
       </HeaderNavigation>
@@ -652,6 +658,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
             actionText={t('inventory_list.add')}
             onClose={() => setInventoryVisible(false)}
             isDisabledFunc={isDisabledFunction}
+            locked={locked}
           />
           {addSourceModal && selectedSource && (
             <AddSourceModal
@@ -661,6 +668,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
               onConfirm={handleAddSource}
               status={addSourceStatus}
               loading={loadingCreateStream}
+              locked={locked}
             />
           )}
         </div>
@@ -723,7 +731,8 @@ export default function ProductionConfiguration({ params }: PageProps) {
             <AddSource
               disabled={
                 productionSetup?.production_settings === undefined ||
-                productionSetup?.production_settings === null
+                productionSetup?.production_settings === null ||
+                locked
               }
               onClick={() => {
                 setInventoryVisible(true);
@@ -736,7 +745,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
                 (pipeline, i) => {
                   return (
                     <PipelineNameDropDown
-                      disabled={productionSetup.isActive}
+                      disabled={productionSetup.isActive || locked}
                       key={pipeline.pipeline_readable_name}
                       label={pipeline.pipeline_readable_name}
                       options={pipelines?.map((pipeline) => ({
@@ -752,7 +761,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
               )}
             {productionSetup?.production_settings && (
               <ControlPanelDropDown
-                disabled={productionSetup.isActive}
+                disabled={productionSetup.isActive || locked}
                 options={controlPanels?.map((controlPanel) => ({
                   option: controlPanel.name,
                   available: controlPanel.outgoing_connections?.length === 0

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
+
 type ButtonProps = {
   type?: 'submit' | 'button';
   className?: string;
@@ -26,16 +27,14 @@ export function Button({
   hoverMessage,
   icon
 }: PropsWithChildren<ButtonProps>) {
-  const css = disabled
-    ? 'bg-gray-400 text-gray-600 cursor-default hover:bg-gray-400'
-    : states[state];
+  const css = !disabled && states[state];
 
   return (
     <button
       type={type}
       onClick={onClick}
       className={twMerge(
-        `font-bold py-2 px-4 rounded inline-flex items-center cursor-pointer `,
+        `font-bold py-2 px-4 rounded inline-flex items-center cursor-pointer`,
         css,
         className
       )}

diff --git a/src/components/createProduction/CreateProduction.tsx b/src/components/createProduction/CreateProduction.tsx
@@ -3,18 +3,20 @@
 import { useRouter } from 'next/navigation';
 import { Button } from '../button/Button';
 import { LegacyRef, useCallback, useRef, useState, KeyboardEvent } from 'react';
-import { IconServerCog } from '@tabler/icons-react';
+import { IconServerCog, IconPlus } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useTranslate } from '../../i18n/useTranslate';
 import { usePostProduction } from '../../hooks/productions';
-import { IconPlus } from '@tabler/icons-react';
 import { refresh } from '../../utils/refresh';
+import { LockButton } from '../lockButton/LockButton';
+
 export function CreateProduction() {
   const router = useRouter();
   const postProduction = usePostProduction();
 
   const inputRef: LegacyRef<HTMLInputElement> = useRef<HTMLInputElement>(null);
-  const [showing, setShowing] = useState(false);
+  const [showing, setShowing] = useState<boolean>(false);
+
   const t = useTranslate();
 
   const handleCreateNew = useCallback(async () => {
@@ -47,11 +49,12 @@ export function CreateProduction() {
           {t('production_configuration')}
         </div>
         <div className="flex mr-2 gap-3">
+          <LockButton />
           <Button className="hover:bg-button-hover-bg">
             <Link href="/inventory">{t('inventory')}</Link>
           </Button>
           <Button
-            className="hover:bg-button-hover-bg"
+            className="hover:bg-button-hover-bg bg-button-bg"
             onClick={handleOpen}
             icon={<IconPlus size={16} className="mr-2" />}
           >
@@ -92,7 +95,7 @@ export function CreateProduction() {
             </div>
             <div className="rounded">
               <Button
-                className="hover:bg-button-hover-bg"
+                className="hover:bg-button-hover-bg bg-button-bg"
                 onClick={handleCreateNew}
               >
                 {t('create')}

diff --git a/src/components/homePageContent/HomePageContent.tsx b/src/components/homePageContent/HomePageContent.tsx
@@ -0,0 +1,26 @@
+'use client';
+import { CreateProduction } from '../createProduction/CreateProduction';
+import { Suspense, useContext } from 'react';
+import { LoadingCover } from '../loader/LoadingCover';
+import ProductionsList from '../productionsList/ProductionsList';
+import { Production } from '../../interfaces/production';
+import { GlobalContext } from '../../contexts/GlobalContext';
+
+type HomePageContentProps = {
+  productions: Production[];
+};
+
+export const HomePageContent = ({ productions }: HomePageContentProps) => {
+  const { locked } = useContext(GlobalContext);
+
+  return (
+    <div>
+      <CreateProduction />
+      <div className="flex items-center w-full">
+        <Suspense fallback={<LoadingCover />}>
+          <ProductionsList productions={productions} locked={locked} />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/inventory/Inventory.tsx b/src/components/inventory/Inventory.tsx
@@ -8,7 +8,7 @@ import EditView from './editView/EditView';
 import SourceList from '../sourceList/SourceList';
 import { useTranslate } from '../../i18n/useTranslate';
 
-export default function Inventory() {
+export default function Inventory({ locked }: { locked: boolean }) {
   const [removeInventorySource, reloadList] = useSetSourceToPurge();
   const [updatedSource, setUpdatedSource] = useState<
     SourceWithId | undefined
@@ -38,10 +38,12 @@ export default function Inventory() {
         sources={sources}
         action={editSource}
         actionText={t('inventory_list.edit')}
+        locked={locked}
       />
       {currentSource ? (
         <div className={`p-3 ml-2 mt-2 bg-container rounded h-1/2 min-w-max`}>
           <EditView
+            locked={locked}
             source={currentSource}
             updateSource={(source) => setUpdatedSource(source)}
             close={() => setCurrentSource(null)}

diff --git a/src/components/inventory/InventoryPageContent.tsx b/src/components/inventory/InventoryPageContent.tsx
@@ -0,0 +1,30 @@
+'use client';
+import { Suspense, useContext } from 'react';
+import { LockButton } from '../lockButton/LockButton';
+import { useTranslate } from '../../i18n/useTranslate';
+import HeaderNavigation from '../headerNavigation/HeaderNavigation';
+import Inventory from './Inventory';
+import { GlobalContext } from '../../contexts/GlobalContext';
+
+export const InventoryPageContent = () => {
+  const t = useTranslate();
+  const { locked } = useContext(GlobalContext);
+
+  return (
+    <>
+      <HeaderNavigation>
+        <div className="flex justify-center items-center w-full">
+          <div className="flex space-x-8">
+            <h1 className="m-2 text-4xl text-p text-center">
+              {t('inventory')}
+            </h1>
+            <LockButton />
+          </div>
+        </div>
+      </HeaderNavigation>
+      <Suspense>
+        <Inventory locked={locked} />
+      </Suspense>
+    </>
+  );
+};
diff --git a/src/components/inventory/editView/AudioChannels/AudioChannels.tsx b/src/components/inventory/editView/AudioChannels/AudioChannels.tsx
@@ -11,9 +11,10 @@ import { channel, mapAudio } from '../../../../utils/audioMapping';
 
 interface IAudioChannels {
   source: Source;
+  locked: boolean;
 }
 
-export default function AudioChannels({ source }: IAudioChannels) {
+export default function AudioChannels({ source, locked }: IAudioChannels) {
   type TOutputs = 'audio_mapping.outL' | 'audio_mapping.outR';
   const t = useTranslate();
   const outputs: TOutputs[] = ['audio_mapping.outL', 'audio_mapping.outR'];
@@ -227,6 +228,7 @@ export default function AudioChannels({ source }: IAudioChannels) {
             rowIndex={rowIndex}
             max={max}
             updateRows={updateRows}
+            locked={locked}
           />
         </div>
       ))}

diff --git a/src/components/inventory/editView/AudioChannels/NumberInput.tsx b/src/components/inventory/editView/AudioChannels/NumberInput.tsx
@@ -26,7 +26,7 @@ export default function InputRow({
       max={max}
       onChange={updateRows}
       disabled={isDisabled}
-      className={`w-[100%] h-[100%] appearance-none text-black text-center 	${
+      className={`w-[100%] h-[100%] appearance-none text-black text-center ${
         styles.numberInput
       } ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
     />

diff --git a/src/components/inventory/editView/AudioChannels/Outputs.tsx b/src/components/inventory/editView/AudioChannels/Outputs.tsx
@@ -17,17 +17,19 @@ interface IOutput {
   outputRows: IContents[][];
   rowIndex: number;
   max: number;
-  updateRows?: (e: IEvent, rowIndex: number, index: number, id: string) => void;
   small?: boolean;
+  locked: boolean;
+  updateRows?: (e: IEvent, rowIndex: number, index: number, id: string) => void;
 }
 
 export default function Outputs({
   contents,
   outputRows,
   rowIndex,
   max,
-  updateRows,
-  small = false
+  small = false,
+  locked,
+  updateRows
 }: IOutput) {
   return (
     <div className="flex">
@@ -50,7 +52,7 @@ export default function Outputs({
             } relative ${styles.checkbox}`}
           >
             <NumberInput
-              isDisabled={small || !isEnabled}
+              isDisabled={small || !isEnabled || locked}
               max={max}
               value={value}
               updateRows={(e: IEvent) =>