Skip to content

Commit 82da7a3

Browse files
StubberG3StubberG3
committed
feat: #331 - Add selected state to top nav items, including Admin Portal dropdown items
1 parent e1da3b1 commit 82da7a3

7 files changed

Lines changed: 106 additions & 78 deletions

File tree

‎docker-compose.yml‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
services:
2-
db:
3-
build:
4-
context: ./db
5-
dockerfile: Dockerfile
6-
volumes:
7-
- postgres_data:/var/lib/postgresql/data/
8-
environment:
9-
- POSTGRES_USER=balancer
10-
- POSTGRES_PASSWORD=balancer
11-
- POSTGRES_DB=balancer_dev
12-
ports:
13-
- "5433:5432"
14-
networks:
15-
app_net:
16-
ipv4_address: 192.168.0.2
17-
pgadmin:
18-
container_name: pgadmin4
19-
image: dpage/pgadmin4
20-
environment:
21-
PGADMIN_DEFAULT_EMAIL: balancer-noreply@codeforphilly.org
22-
PGADMIN_DEFAULT_PASSWORD: balancer
23-
# PGADMIN_LISTEN_PORT = 80
24-
# volumes:
25-
# - ./pgadmin-data:/var/lib/pgadmin
26-
# # PGADMIN_LISTEN_PORT = 80
27-
ports:
28-
- "5050:80"
29-
networks:
30-
app_net:
31-
ipv4_address: 192.168.0.4
32-
backend:
33-
image: balancer-backend
34-
build: ./server
35-
command: python manage.py runserver 0.0.0.0:8000
36-
ports:
37-
- "8000:8000"
38-
env_file:
39-
- ./config/env/env.dev
40-
depends_on:
41-
- db
42-
volumes:
43-
- ./server:/usr/src/server
44-
networks:
45-
app_net:
46-
ipv4_address: 192.168.0.3
2+
# db:
3+
# build:
4+
# context: ./db
5+
# dockerfile: Dockerfile
6+
# volumes:
7+
# - postgres_data:/var/lib/postgresql/data/
8+
# environment:
9+
# - POSTGRES_USER=balancer
10+
# - POSTGRES_PASSWORD=balancer
11+
# - POSTGRES_DB=balancer_dev
12+
# ports:
13+
# - "5433:5432"
14+
# networks:
15+
# app_net:
16+
# ipv4_address: 192.168.0.2
17+
# pgadmin:
18+
# container_name: pgadmin4
19+
# image: dpage/pgadmin4
20+
# environment:
21+
# PGADMIN_DEFAULT_EMAIL: balancer-noreply@codeforphilly.org
22+
# PGADMIN_DEFAULT_PASSWORD: balancer
23+
# # PGADMIN_LISTEN_PORT = 80
24+
# # volumes:
25+
# # - ./pgadmin-data:/var/lib/pgadmin
26+
# # # PGADMIN_LISTEN_PORT = 80
27+
# ports:
28+
# - "5050:80"
29+
# networks:
30+
# app_net:
31+
# ipv4_address: 192.168.0.4
32+
# backend:
33+
# image: balancer-backend
34+
# build: ./server
35+
# command: python manage.py runserver 0.0.0.0:8000
36+
# ports:
37+
# - "8000:8000"
38+
# env_file:
39+
# - ./config/env/env.dev
40+
# depends_on:
41+
# - db
42+
# volumes:
43+
# - ./server:/usr/src/server
44+
# networks:
45+
# app_net:
46+
# ipv4_address: 192.168.0.3
4747
frontend:
4848
image: balancer-frontend
4949
build:
@@ -52,15 +52,15 @@ services:
5252
args:
5353
- IMAGE_NAME=balancer-frontend
5454
ports:
55-
- "3000:3000"
55+
- "3000:3000"
5656
environment:
57-
- CHOKIDAR_USEPOLLING=true
58-
# - VITE_API_BASE_URL=https://balancertestsite.com/
57+
- CHOKIDAR_USEPOLLING=true
58+
# - VITE_API_BASE_URL=https://balancertestsite.com/
5959
volumes:
60-
- "./frontend:/usr/src/app:delegated"
61-
- "/usr/src/app/node_modules/"
62-
depends_on:
63-
- backend
60+
- "./frontend:/usr/src/app:delegated"
61+
- "/usr/src/app/node_modules/"
62+
# depends_on:
63+
# - backend
6464
networks:
6565
app_net:
6666
ipv4_address: 192.168.0.5
@@ -72,4 +72,4 @@ networks:
7272
driver: default
7373
config:
7474
- subnet: "192.168.0.0/24"
75-
gateway: 192.168.0.1
75+
gateway: 192.168.0.1

‎frontend/.env‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# VITE_API_BASE_URL=https://balancertestsite.com/
2-
VITE_API_BASE_URL=http://localhost:8000
1+
VITE_API_BASE_URL=https://balancertestsite.com/
2+
# VITE_API_BASE_URL=http://localhost:8000

‎frontend/src/components/Header/FeatureMenuDropDown.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
import { Link } from "react-router-dom";
1+
import { Link, useLocation } from "react-router-dom";
22

33
export const FeatureMenuDropDown = () => {
4+
const location = useLocation();
5+
const currentPath = location.pathname;
46
return (
57
<div className="h-50 absolute top-full mb-2 mt-2 flex flex-row items-center rounded-lg border-2 bg-white font-inter text-sm sm:px-6 md:px-8 lg:px-8 xl:px-6 ">
68
<div className="mx-3 my-5 ">
79
<Link to="/AdminPortal">
8-
<ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
9-
<span className=" font-bold text-black ">Manage files</span>
10+
<ul className={currentPath === "/AdminPortal" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
11+
<span className="font-bold">Manage files</span>
1012

1113
<div className="mt-1 font-satoshi text-sm text-gray-400">
12-
Mange and chat with files.
14+
Manage and chat with files
1315
</div>
1416
</ul>
1517
</Link>
1618
<Link to="/rulesmanager">
17-
<ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
18-
<span className=" font-bold text-black ">Manage rules</span>
19+
<ul className={currentPath === "/rulesmanager" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
20+
<span className="font-bold">Manage rules</span>
1921

2022
<div className="mt-1 font-satoshi text-sm text-gray-400">
2123
Manage list of rules
2224
</div>
2325
</ul>
2426
</Link>
2527
<Link to="/ManageMeds">
26-
<ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
27-
<span className=" font-bold text-black ">Manage meds</span>
28+
<ul className={currentPath === "/ManageMeds" ? "subheader-nav-item subheader-nav-item-selected" : "subheader-nav-item"}>
29+
<span className="font-bold">Manage meds</span>
2830

2931
<div className="mt-1 font-satoshi text-sm text-gray-400">
3032
Manage list of meds
3133
</div>
3234
</ul>
3335
</Link>
34-
{/*
36+
{/*
3537
<Link to="/drugSummary">
3638
<ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
3739
<span className=" font-bold text-black ">Manage Prompts</span>

‎frontend/src/components/Header/Header.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {useState, useRef, useEffect, Fragment} from "react";
22
// import { useState, Fragment } from "react";
33
import accountLogo from "../../assets/account.svg";
4-
import {Link, useNavigate} from "react-router-dom";
4+
import {Link, useNavigate, useLocation} from "react-router-dom";
55
import LoginMenuDropDown from "./LoginMenuDropDown";
66
import "../../components/Header/header.css";
77
import Chat from "./Chat";
@@ -98,6 +98,9 @@ const Header: React.FC<LoginFormProps> = ({
9898
navigate("/");
9999
};
100100

101+
const location = useLocation();
102+
const currentPath = location.pathname;
103+
101104
return (
102105
<header className="z-50 fixed w-full items-center no-print">
103106
<div className="hidden w-full items-center justify-center border-b border-gray-300 bg-blue-100 p-1 text-center text-sm font-light text-gray-500 lg:flex">
@@ -136,38 +139,38 @@ const Header: React.FC<LoginFormProps> = ({
136139
<Link
137140
to="/"
138141
onClick={() => handleForm()}
139-
className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
142+
className={currentPath === "/" ? "header-nav-item header-nav-item-selected" : "header-nav-item"}
140143
>
141144
Medication Suggester
142145
</Link>
143146
<>
144147
<Link
145148
to="/medications"
146-
className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
149+
className={currentPath === "/medications" ? "header-nav-item header-nav-item-selected" : "header-nav-item"}
147150
>
148151
Medication List
149152
</Link>
150153
<Link
151154
to="/about"
152-
className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
155+
className={currentPath === "/about" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
153156
>
154157
About
155158
</Link>
156159
<Link
157160
to="/help"
158-
className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
161+
className={currentPath === "/help" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
159162
>
160163
Help
161164
</Link>
162165
<Link
163166
to="/feedback"
164-
className=" text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
167+
className={currentPath === "/feedback" ? "header-nav-item header-nav-item-selected" : "header-nav-item" }
165168
>
166169
Leave Feedback
167170
</Link>
168171
<a href="https://www.flipcause.com/secure/cause_pdetails/MjMyMTIw"
169172
target="_blank"
170-
className="text-black hover:border-blue-600 hover:text-blue-600 hover:no-underline"
173+
className="header-nav-item"
171174
>
172175
Donate
173176
</a>
@@ -179,11 +182,12 @@ const Header: React.FC<LoginFormProps> = ({
179182
className=""
180183
>
181184
<span
182-
className={` text-black ${
183-
showFeaturesMenu
184-
? "cursor-pointer border-b-2 border-blue-600 hover:border-b-2 hover:border-blue-600 hover:text-blue-600 hover:no-underline"
185-
: "cursor-pointer hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
186-
}`}
185+
className={`header-nav-item ${
186+
showFeaturesMenu && "text-blue-600"
187+
} ${
188+
(currentPath === "/rulesmanager" || currentPath === "/ManageMeds") && "header-nav-item-selected"
189+
}`
190+
}
187191
>
188192
Admin Portal
189193
<span

‎frontend/src/components/Header/header.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,19 @@
2121
.arrow:hover {
2222
animation: none;
2323
}
24+
25+
.header-nav-item {
26+
@apply text-black border-transparent border-b-2 hover:border-blue-600 hover:text-blue-600 hover:border-b-2 hover:border-blue-600;
27+
}
28+
29+
.header-nav-item.header-nav-item-selected {
30+
@apply text-blue-600;
31+
}
32+
33+
.subheader-nav-item {
34+
@apply cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100;
35+
}
36+
37+
.subheader-nav-item.subheader-nav-item-selected {
38+
@apply text-blue-600;
39+
}

‎server/Dockerfile‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ ENV PYTHONDONTWRITEBYTECODE 1
99
ENV PYTHONUNBUFFERED 1
1010

1111
# install system dependencies
12-
RUN apt-get update && apt-get install -y netcat
12+
RUN apt-get update && \
13+
apt-get install -y --no-install-recommends \
14+
busybox && \
15+
apt-get clean && \
16+
rm -rf /var/lib/apt/lists/*
1317

1418
# install dependencies
1519
RUN pip install --upgrade pip

‎server/entrypoint.sh‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ then
55
echo "Waiting for postgres..."
66

77
while ! nc -z $SQL_HOST $SQL_PORT; do
8+
busybox nc -z host port
89
sleep 0.1
910
done
1011

1112
echo "PostgreSQL started"
1213
fi
1314

14-
# python manage.py makemigrations api
15+
16+
# python manage.py makemigrations api
1517
# # python manage.py flush --no-input
1618
python manage.py migrate
1719
# create superuser for postgre admin on start up

0 commit comments

Comments
 (0)