From b55eb2a62c0560f7cc5c5d1709e3c567dfae9793 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Sat, 3 Jun 2023 18:56:01 +0000 Subject: [PATCH] Add table of all storage locations --- webclient/src/App.js | 6 +++- webclient/src/Classes.js | 2 +- webclient/src/Home.js | 16 ++------- webclient/src/Members.js | 16 ++------- webclient/src/Storage.js | 78 +++++++++++++++++++++++++++++++++++----- webclient/src/dark.css | 25 +++++++++++++ 6 files changed, 107 insertions(+), 36 deletions(-) diff --git a/webclient/src/App.js b/webclient/src/App.js index 7e5caf4..d84a22c 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -27,7 +27,7 @@ import { Subscribe } from './PayPal.js'; import { PasswordReset, ConfirmReset } from './PasswordReset.js'; import { NotFound, PleaseLogin } from './Misc.js'; import { Debug } from './Debug.js'; -import { StorageDetail, ClaimShelf } from './Storage.js'; +import { Storage, StorageDetail, ClaimShelf } from './Storage.js'; import { Garden } from './Garden.js'; import { Footer } from './Footer.js'; import { LCARS1Display, LCARS2Display } from './Display.js'; @@ -244,6 +244,10 @@ function App() { + + + + diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js index aa963d0..9af7649 100644 --- a/webclient/src/Classes.js +++ b/webclient/src/Classes.js @@ -345,7 +345,7 @@ export function Classes(props) {
Class List
-

Click here to view the list of all courses.

+

View the list of all courses.

{!!user && !!classes.length && !!classes.filter(byTeaching).length && <> diff --git a/webclient/src/Home.js b/webclient/src/Home.js index 14ad62d..547bd47 100644 --- a/webclient/src/Home.js +++ b/webclient/src/Home.js @@ -8,6 +8,7 @@ import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from import { LoginForm, SignupForm } from './LoginSignup.js'; import { AccountForm } from './Account.js'; import { SignForm } from './Sign.js'; +import { StorageButton } from './Storage.js'; import { PayPalSubscribeDeal } from './PayPal.js'; function MemberInfo(props) { @@ -21,11 +22,6 @@ function MemberInfo(props) { const unpaidTraining = user.training?.filter(x => x.attendance_status === 'Waiting for payment'); - const handleStorageButton = (e, id) => { - e.preventDefault(); - history.push('/storage/' + id); - }; - return (
{member.protocoin < 0 && @@ -67,14 +63,8 @@ function MemberInfo(props) { Shelf: {user.storage.length ? - user.storage.map((x, i) => - + user.storage.sort((a, b) => a.location == 'member_shelves' ? -1 : 1).map((x, i) => + ) : <>None [claim] diff --git a/webclient/src/Members.js b/webclient/src/Members.js index b594012..0f34da9 100644 --- a/webclient/src/Members.js +++ b/webclient/src/Members.js @@ -6,6 +6,7 @@ import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } import { NotFound } from './Misc.js'; import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminMemberTraining, AdminMemberCertifications } from './AdminMembers.js'; import { AdminMemberTransactions } from './AdminTransactions.js'; +import { StorageButton } from './Storage.js'; import AbortController from 'abort-controller'; const memberSorts = { @@ -166,11 +167,6 @@ export function Members(props) { doSearch(q); }; - const handleStorageButton = (e, id) => { - e.preventDefault(); - history.push('/storage/' + id); - }; - useEffect(() => { if (!responseCache) { doSort('recently_vetted'); @@ -246,14 +242,8 @@ export function Members(props) { <> Shelf: {x.member.storage.length ? - x.member.storage.map((x, i) => - + x.member.storage.sort((a, b) => a.location == 'member_shelves' ? -1 : 1).map((x, i) => + ) : 'None' diff --git a/webclient/src/Storage.js b/webclient/src/Storage.js index ff7d289..9f340a7 100644 --- a/webclient/src/Storage.js +++ b/webclient/src/Storage.js @@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'; import { Link, useParams, useHistory } from 'react-router-dom'; import './light.css'; import { MembersDropdown } from './Members.js'; -import { isAdmin, BasicTable, requester } from './utils.js'; -import { Button, Container, Form, Grid, Header, Message, Segment, Table } from 'semantic-ui-react'; +import { isAdmin, BasicTable, requester, useIsMobile } from './utils.js'; +import { Button, Container, Form, Grid, Header, Icon, Message, Segment, Table } from 'semantic-ui-react'; export function StorageEditor(props) { const { token, input, setInput, error } = props; @@ -174,6 +174,8 @@ export function StorageDetail(props) {
Storage Location
+

View the list of all storage locations.

+ @@ -206,10 +208,38 @@ export function StorageDetail(props) { ); }; +export function StorageButton(props) { + const { storage } = props; + const history = useHistory(); + + const buttonColors = { + member_shelves: 'grey', + lockers: 'blue', + large_project_storage: 'brown', + }; + + const handleStorageButton = (e, id) => { + e.preventDefault(); + history.push('/storage/' + id); + }; + + return ( + + ); +}; + export function StorageList(props) { const { token } = props; const [storageList, setStorageList] = useState(false); const [error, setError] = useState(false); + const isMobile = useIsMobile(); useEffect(() => { requester('/storage/', 'GET', token) @@ -225,13 +255,34 @@ export function StorageList(props) { return (
+

+ Member shelf
+ Locker
+ Large project storage +

{!error ? storageList ? - storageList.map(x => -

{x.shelf_id} - {!!x.member_id && - {x.member_name} - }

- ) + + + + Shelf ID + Owner + Memo + + + + + {storageList.map(x => + + + + {isMobile && 'Owner: '}{x.member_name} + + {isMobile && 'Memo: '}{x.memo} + + )} + +
:

Loading...

: @@ -241,6 +292,18 @@ export function StorageList(props) { ); }; +export function Storage(props) { + const { token, user } = props; + + return ( + +
Storage Locations
+ + + + ); +}; + export function ClaimShelfForm(props) { const { token, user, refreshUser } = props; const member = user.member; @@ -299,7 +362,6 @@ export function ClaimShelfForm(props) { export function ClaimShelf(props) { const { token, user } = props; - const [error, setError] = useState(false); return ( diff --git a/webclient/src/dark.css b/webclient/src/dark.css index 5796ecc..d6c69c5 100644 --- a/webclient/src/dark.css +++ b/webclient/src/dark.css @@ -25,6 +25,16 @@ color: #db282882 !important; } +.darkmode--activated i.blue.circle.icon { + mix-blend-mode: difference; + color: #2185d0 !important; +} + +.darkmode--activated i.brown.circle.icon { + mix-blend-mode: difference; + color: #a5673f !important; +} + .darkmode--activated .footer { mix-blend-mode: difference; } @@ -62,6 +72,21 @@ background: #21ba4582 !important; } +.darkmode--activated .ui.grey.button { + mix-blend-mode: difference; + background: #767676 !important; +} + +.darkmode--activated .ui.blue.button { + mix-blend-mode: difference; + background: #2185d0 !important; +} + +.darkmode--activated .ui.brown.button { + mix-blend-mode: difference; + background: #a5673f !important; +} + .darkmode--activated .ui.tag.label { mix-blend-mode: difference; }