Add lock status viewer and button

See also: #13
snu-quiqcl · Dec 7, 2024 · f4711a9 · f4711a9
1 parent 0677d7a
commit f4711a9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/wlm-ui/src/MainPage/Channel/Channel.scss b/wlm-ui/src/MainPage/Channel/Channel.scss
@@ -12,6 +12,13 @@
     justify-content: space-between;
 }
 
+.channel-lock-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
+}
+
 .channel-attr-viewer-container {
     display: flex;
     flex-direction: row;

diff --git a/wlm-ui/src/MainPage/Channel/Channel.tsx b/wlm-ui/src/MainPage/Channel/Channel.tsx
@@ -188,6 +188,10 @@ const Channel = (props: IProps) => {
                     )}
                 </h1>
             </div>
+            <div className='channel-lock-container'>
+                <span>{props.lock.locked ? `Locked by ${props.lock.owner}` : 'Open'}</span>
+                <button>{props.hasLock ? 'Release' : 'Acquire'}</button>
+            </div>
             <div className='channel-attr-viewer-container'>
                 <b>Exp. time</b>
                 <span style={{ width: '60px', textAlign: 'right' }}>