Skip to content

Commit 9317ae5

Browse files
IanHollowIanHollow
authored
Merge pull request #86 from HungrySlugs-CSE115A/location_menu_ui
made location ui based on figma
2 parents 3d49396 + 2e589e4 commit 9317ae5

File tree

10 files changed

+161
-136
lines changed

10 files changed

+161
-136
lines changed

‎app/[location]/page.tsx

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎app/foods/[food]/page.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Page({ params }: { params: { food: string } }) {
2+
return (
3+
<div>
4+
<h1>{decodeURIComponent(params.food)}</h1>
5+
</div>
6+
);
7+
}

‎app/locations/[location]/page.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
"use client";
2+
import { useState, useEffect, use } from "react";
3+
import axios from "axios";
4+
import LocationFood from "@/components/location/food";
5+
6+
interface Food {
7+
name: string;
8+
restrictions: Array<string>;
9+
}
10+
11+
interface subCategory {
12+
name: string;
13+
foods: Array<Food>;
14+
}
15+
16+
interface Category {
17+
name: string;
18+
sub_categories: Array<subCategory>;
19+
}
20+
21+
interface Location {
22+
name: string;
23+
categories: Category[];
24+
}
25+
26+
export default function Page({ params }: { params: { location: number } }) {
27+
const [location, setLocation] = useState<Location>();
28+
const [showCategories, setShowCategories] = useState<boolean[]>();
29+
30+
// fetch location data
31+
useEffect(() => {
32+
axios
33+
.get("http://localhost:8000/myapi/locations/")
34+
.then((response) => {
35+
// Fetch the locations data
36+
const locations: Location[] = response.data["locations"];
37+
38+
// get the location data
39+
const location = locations[params.location];
40+
41+
// Set the location
42+
setLocation(location);
43+
44+
// Set the show categories to array of booleans
45+
setShowCategories(new Array(location.categories.length).fill(true));
46+
})
47+
.catch((error) => {
48+
console.log(error);
49+
});
50+
}, [params.location]); // params.location is a dependency
51+
52+
return (
53+
<main>
54+
<div className="container mx-auto">
55+
<h1 className="font-semibold py-5 text-4xl text-[#003C6C]">
56+
{location && location.name}
57+
</h1>
58+
{location &&
59+
location.categories.map((category, i) => (
60+
<div key={i}>
61+
<div
62+
onClick={() => {
63+
const newShowCategories = [...(showCategories || [])];
64+
newShowCategories[i] = !newShowCategories[i];
65+
setShowCategories(newShowCategories);
66+
}}
67+
className="flex flex-row justify-between border-2 border-b-yellow-400 border-t-white border-r-white border-l-white hover:bg-[#F9F9F9] hover:rounded hover:border-t-gray-300 hover:border-r-gray-300 hover:border-l-gray-300"
68+
>
69+
<h2 className="text-2xl ml-6 text-[#003C6C] font-semibold">
70+
{category.name}
71+
</h2>
72+
{/* Icon for accordion that will face up on false and down on true */}
73+
<div className="flex justify-center items-center">
74+
<svg
75+
className={`h-6 w-6 mr-6 ${showCategories && showCategories[i] ? "rotate-180" : ""}`}
76+
fill="#000000"
77+
height="800px"
78+
width="800px"
79+
version="1.1"
80+
id="Layer_1"
81+
xmlns="http://www.w3.org/2000/svg"
82+
viewBox="0 0 330 330"
83+
>
84+
<path
85+
id="XMLID_224_"
86+
d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"
87+
/>
88+
</svg>
89+
</div>
90+
</div>
91+
{showCategories && showCategories[i] && (
92+
<div>
93+
{category.sub_categories.map((subCategory, j) => (
94+
<div key={j}>
95+
<h3 className="ml-3 italic text-base font-semibold text-gray-700">
96+
{subCategory.name}
97+
</h3>
98+
{subCategory.foods.map((food, k) => (
99+
<LocationFood
100+
key={k}
101+
food_name={food.name}
102+
restrictions={food.restrictions}
103+
/>
104+
))}
105+
</div>
106+
))}
107+
</div>
108+
)}
109+
{showCategories && !showCategories[i] && (
110+
<div className="flex justify-center items-center">
111+
<h3 className="text-sm italic text-gray-700">Hidden</h3>
112+
</div>
113+
)}
114+
</div>
115+
))}
116+
</div>
117+
</main>
118+
);
119+
}

‎backend/myapi/db_functions/user.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
from requests import delete
21
from ..models import users_collection
32

43
"""

‎backend/myapi/views.py

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
from dns import update
2-
from requests import get
31
from rest_framework.response import Response
42
from rest_framework.decorators import api_view
53
from django.http import JsonResponse

‎backend/utils.py

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@ def get_local_db_handle(db_name: str, host: str = "localhost", port: int = 27017
2121

2222

2323
if __name__ == "__main__":
24-
if (
25-
IS_DEV and False
26-
): # Remove the False to test locally but you will have to have a local mongodb server running
24+
if IS_DEV and False:
25+
# Remove the False to test locally but you will have to have a local mongodb server running
2726
db_handle, client = get_local_db_handle("test")
2827
else:
2928
db_handle, client = get_db_handle(

‎components/dh_bar_main.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function DhBar({
1313
<div className="border hover:border-black w-1/2 px-8 py-3 bg-[#F9F9F9] m4">
1414
<ul className="flex flex-col md:flex-row font-semibold text-2xl ">
1515
<li className=" text-[#00458C]">
16-
<Link href={`/${index}`}>{name}</Link>
16+
<Link href={`/locations/${index}`}>{name}</Link>
1717
</li>
1818
</ul>
1919
</div>

‎components/location/food.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Link from "next/link";
2+
3+
export default function LocationFood({
4+
food_name,
5+
restrictions,
6+
}: {
7+
food_name: string;
8+
restrictions: string[];
9+
}) {
10+
return (
11+
<Link href={`/foods/${encodeURIComponent(food_name)}`}>
12+
<div className="flex flex-row justify-between hover:border-gray-300 hover:rounded-[2px] border-white border bg-[#F9F9F9] font-medium text-gray-700 py-1 my-1 text-sm">
13+
<h4 className="ml-3">{food_name}</h4>
14+
<div className="flex flex-row mr-3">
15+
<ul className="flex flex-row px-1">
16+
{restrictions.map((restriction, l) => (
17+
<li key={l} className="px-1">
18+
{restriction}
19+
</li>
20+
))}
21+
</ul>
22+
<div>
23+
<h4>Review</h4>
24+
</div>
25+
<div>
26+
<h4>Rating</h4>
27+
</div>
28+
</div>
29+
</div>
30+
</Link>
31+
);
32+
}

‎components/meal_bar_dh.tsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎components/testbar.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

0 commit comments

Comments
 (0)