Skip to content

Commit 72c07ec

Browse files
demshydemshy
authored
Merge pull request #60 from plezanje-net/edit-crag-sectors
Edit crag sectors
2 parents 07d1a6b + 43c0c69 commit 72c07ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2398
-185
lines changed

‎package-lock.json‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
1212
"gengradsys": "node ./src/scripts/generate-grading-systems.mjs"
1313
},
1414
"dependencies": {
15-
"@headlessui/react": "^2.0.3",
16-
"@headlessui/tailwindcss": "^0.2.0",
1715
"@dnd-kit/core": "^6.1.0",
1816
"@dnd-kit/modifiers": "^7.0.0",
17+
"@dnd-kit/sortable": "^8.0.0",
18+
"@headlessui/react": "^2.0.3",
19+
"@headlessui/tailwindcss": "^0.2.0",
1920
"@react-stately/slider": "^3.2.4",
2021
"@react-stately/toggle": "^3.4.3",
2122
"@tailwindcss/container-queries": "^0.1.1",

‎src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ import Checkbox from "@/components/ui/checkbox";
1515
function Filter() {
1616
const { cragRoutesState, setCragRoutesState } = useContext(CragRoutesContext);
1717

18-
const [routesTouchesFilterValue, setRoutesTouchesFilterValue] =
19-
useState("all");
18+
const [routesTouchesFilterValue, setRoutesTouchesFilterValue] = useState<
19+
string | undefined
20+
>("all");
2021
const [nrFiltersActive, setNrFiltersActive] = useState(0);
2122
const [difficultyFilterValue, setDifficultyFilterValue] = useState({
2223
from: minSliderValue,

‎src/app/[lang]/crag/[cragSlug]/(crag)/info/page.tsx‎

Lines changed: 26 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { gql } from "urql/core";
22
import urqlServer from "@/graphql/urql-server";
3-
import {
4-
Crag,
5-
CragInfoDocument,
6-
Orientation,
7-
Season,
8-
WallAngle,
9-
} from "@/graphql/generated";
3+
import { Crag, CragInfoDocument, Season, WallAngle } from "@/graphql/generated";
104
import Image from "next/image";
115
import IconWalk from "@/components/ui/icons/walk";
126
import IconHeight from "@/components/ui/icons/height";
@@ -25,27 +19,22 @@ import IconOrientation from "@/components/ui/icons/orientation";
2519
import GradeDistribution from "@/components/grade-distribution";
2620
import VisitsDistribution from "@/components/visits-distribution";
2721
import Map from "@/components/map/map";
28-
import Button from "@/components/ui/button";
2922
import IconMissing from "@/components/ui/icons/missing";
3023
import Link from "@/components/ui/link";
3124
import { IconSize } from "@/components/ui/icons/icon-size";
3225
import IconMore from "@/components/ui/icons/more";
33-
import { TMarker } from "@/components/map/map-marker";
26+
import MapMarker from "@/components/map/map-marker";
3427

3528
type TCragInfoPageParams = {
3629
cragSlug: string;
3730
};
3831

3932
/*
40-
TODO:
41-
-- fill with real data:
42-
43-
-- enable button
44-
-- enable links
45-
-- make coordinates links
46-
-- many parkings, many walls -> numbers next to icons?...
47-
48-
-- what if cover image to small? test, but maybe no need to resolve as cover images will have to be manually chosen by editors
33+
TODO: enable more button
34+
TODO: enable links
35+
TODO: make coordinates links
36+
TODO: many parkings, many walls -> numbers next to icons?...
37+
TODO: what if cover image to small? test, but maybe no need to resolve as cover images will have to be manually chosen by editors
4938
*/
5039

5140
type TCragInfo = Crag & {
@@ -63,10 +52,6 @@ type TParkings = {
6352
[key: string]: { lat: number; lon: number; sectors: TSector[] };
6453
};
6554

66-
// TODO: after this page's layout is tested remove this dummy filler
67-
const DUMMY_DATA = true;
68-
// const DUMMY_DATA = false;
69-
7055
async function CragInfoPage({ params }: { params: TCragInfoPageParams }) {
7156
const response = await urqlServer().query(CragInfoDocument, {
7257
crag: params.cragSlug,
@@ -86,41 +71,6 @@ async function CragInfoPage({ params }: { params: TCragInfoPageParams }) {
8671

8772
const imagesBaseUrl = `${process.env.IMAGES_PROTOCOL}://${process.env.IMAGES_HOSTNAME}${process.env.IMAGES_PATHNAME}`;
8873

89-
// TODO: remove dummy logic after tested
90-
if (DUMMY_DATA) {
91-
crag.orientations = [Orientation.North];
92-
crag.approachTime = 10;
93-
crag.minRouteLength = 10;
94-
crag.maxRouteLength = 15;
95-
crag.wallAngles = [WallAngle.Slab, WallAngle.Overhang];
96-
crag.seasons = [Season.Summer, Season.Spring];
97-
crag.rainproof = true;
98-
99-
crag.coverImage = {
100-
id: "",
101-
path: "1040/crags/mislinja",
102-
extension: "jpg",
103-
maxIntrinsicWidth: 1200,
104-
aspectRatio: 0.75,
105-
};
106-
107-
crag.description =
108-
"Plezališče je oktobra 2015 opremila skupina 9 francoskih plezalcev (http://www.ffcam.fr/croatie-excellence-equipement.html) na pobudo domačina z Brača Iva Ljubetića-Šteke, vse težje smeri (do 8c) je prvi preplezal Mathieu Bouyoud. Smeri so večinoma dolge (do 50 m) in navpične do zmerno previsne. <br /> Levo od glavnega sektorja je 5 nekoliko krajših smeri neznanega avtorja (ocene srednjih treh so zelo približne). Prva (Shiva) in zadnja (San) imata ime napisano na vstopu. Skala še ni očiščena, čelada zelo priporočljiva. Stena je obrnjena na SZ. Plezanje je možno celo leto, tudi ob toplih, suhih zimah, čeprav je stena cel dan v senci.";
109-
110-
crag.activityByMonth = [0, 2, 3, 4, 6, 3, 2, 0, 1, 0, 0, 1];
111-
112-
crag.access =
113-
"Plezališče se nahaja v Kamniški Bistrici: Parkiraš na parkirišču za slap Orglice, po potki hodiš do reke. Nadaljuješ po gozdni cesti ob reki 5 min. Nato boš na levi videl velik možic, tam zaviješ in slediš poti do plezališča. Pot gre mimo velikih balvanov. Od parkirišča do plezališča 10 min.";
114-
115-
crag.sectors[0].parkings = [
116-
{
117-
id: "a1",
118-
lat: 45.567241935747305,
119-
lon: 13.862603368337682,
120-
},
121-
];
122-
}
123-
12474
// Find out if any data depicted with icons is missing and if so, construct appropriate messages.
12575
const iconDataMissing: string[] = [];
12676

@@ -183,19 +133,24 @@ async function CragInfoPage({ params }: { params: TCragInfoPageParams }) {
183133
});
184134

185135
// Construct array of all parkings and walls markers
186-
const markers: TMarker[] = Object.entries(parkings).map(
187-
([_id, { lat, lon, sectors }]) => ({
188-
type: "parking",
189-
position: [lat, lon],
190-
popupContent: <ParkingMarkerPopupContent sectors={sectors} />,
191-
})
136+
const markers = Object.entries(parkings).map(
137+
([id, { lat, lon, sectors }]) => (
138+
<MapMarker
139+
key={id}
140+
type="parking"
141+
position={[lat, lon]}
142+
popupContent={<ParkingMarkerPopupContent sectors={sectors} />}
143+
/>
144+
)
192145
);
193146
if (crag.lat && crag.lon) {
194-
markers.push({
195-
type: "wall",
196-
position: [crag.lat, crag.lon],
197-
popupContent: <div>{`Plezališče ${crag.name}`}</div>,
198-
});
147+
markers.push(
148+
<MapMarker
149+
type="wall"
150+
position={[crag.lat, crag.lon]}
151+
popupContent={<div>{`Plezališče ${crag.name}`}</div>}
152+
/>
153+
);
199154
}
200155

201156
return (
@@ -376,7 +331,9 @@ async function CragInfoPage({ params }: { params: TCragInfoPageParams }) {
376331

377332
{/* Map */}
378333
<div className="md:col-span-2">
379-
{markers.length > 0 && <Map autoBounds markers={markers} />}
334+
{markers.length > 0 && (
335+
<Map autoBounds markers={markers} className="xs:rounded-lg" />
336+
)}
380337
</div>
381338
</div>
382339
</>

‎src/app/[lang]/crags/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AllCountriesDocument, AllCragsDocument } from "@/graphql/generated";
44
import { CragsProvider } from "./components/crags-context";
55
import Crags from "./components/crags";
66

7-
async function Crags2Page() {
7+
async function CragsPage() {
88
const cragsDataPromise = urqlServer().query(AllCragsDocument, {});
99
const countriesDataPromise = urqlServer().query(AllCountriesDocument, {});
1010
const [{ data: cragsData }, { data: countriesData }] = await Promise.all([
@@ -22,7 +22,7 @@ async function Crags2Page() {
2222
);
2323
}
2424

25-
export default Crags2Page;
25+
export default CragsPage;
2626

2727
gql`
2828
query AllCrags {

‎src/app/[lang]/edit/(crag)/[cragSlug]/components/edit-crag-form.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Country, Crag } from "@/graphql/generated";
2+
import CragForm from "../../components/crag-form";
3+
4+
type TEditCragForm = {
5+
countriesWithAreas: Country[];
6+
crag: Crag;
7+
};
8+
9+
function EditCragForm({ countriesWithAreas, crag }: TEditCragForm) {
10+
return (
11+
<CragForm
12+
formType="edit"
13+
countriesWithAreas={countriesWithAreas}
14+
crag={crag}
15+
/>
16+
);
17+
}
18+
19+
export default EditCragForm;

‎src/app/[lang]/edit/(crag)/[cragSlug]/page.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import Breadcrumbs from "@/components/breadcrumbs";
2+
import ContentHeader from "@/components/content-header";
3+
import IconInfo from "@/components/ui/icons/info";
4+
import IconRoutes from "@/components/ui/icons/routes";
5+
import TabMenu, { TTabMenuItem } from "@/components/ui/tab-menu";
6+
import {
7+
EditCragPageCountriesDocument,
8+
EditCragPageCragDocument,
9+
} from "@/graphql/generated";
10+
import urqlServer from "@/graphql/urql-server";
11+
import { gql } from "urql";
12+
import EditCragForm from "./components/edit-crag-form";
13+
14+
type TEditCragPageProps = {
15+
params: { cragSlug: string };
16+
};
17+
18+
async function EditCragPage({ params: { cragSlug } }: TEditCragPageProps) {
19+
const countriesDataPromise = urqlServer().query(
20+
EditCragPageCountriesDocument,
21+
{}
22+
);
23+
const cragDataPromise = urqlServer().query(EditCragPageCragDocument, {
24+
cragSlug: cragSlug,
25+
});
26+
const [{ data: countriesData }, { data: cragData }] = await Promise.all([
27+
countriesDataPromise,
28+
cragDataPromise,
29+
]);
30+
31+
const crag = cragData.cragBySlug;
32+
33+
const tabMenuItems: TTabMenuItem[] = [
34+
{
35+
label: "Osnovni podatki",
36+
link: `/edit/${cragSlug}`,
37+
isActive: true,
38+
icon: <IconInfo />,
39+
},
40+
{
41+
label: "Sektorji in smeri",
42+
link: `/edit/${cragSlug}/sectors`,
43+
isActive: false,
44+
icon: <IconRoutes />,
45+
},
46+
];
47+
48+
return (
49+
<>
50+
<ContentHeader
51+
heading={`Urejanje plezališča ${crag.name}`}
52+
breadcrumbs={
53+
<Breadcrumbs
54+
crumbs={[
55+
{ label: "Plezanje.net", link: "/" },
56+
{ label: "Urejanje", link: null },
57+
{ label: crag.name, link: null },
58+
]}
59+
/>
60+
}
61+
tabMenu={<TabMenu items={tabMenuItems} />}
62+
/>
63+
64+
<EditCragForm countriesWithAreas={countriesData.countries} crag={crag} />
65+
</>
66+
);
67+
}
68+
69+
export default EditCragPage;
70+
71+
gql`
72+
query EditCragPageCountries {
73+
countries {
74+
id
75+
name
76+
slug
77+
areas {
78+
id
79+
name
80+
slug
81+
}
82+
}
83+
}
84+
`;
85+
86+
gql`
87+
query EditCragPageCrag($cragSlug: String!) {
88+
cragBySlug(slug: $cragSlug) {
89+
id
90+
slug
91+
name
92+
country {
93+
id
94+
}
95+
area {
96+
id
97+
}
98+
type
99+
defaultGradingSystem {
100+
id
101+
}
102+
lat
103+
lon
104+
description
105+
wallAngles
106+
rainproof
107+
orientations
108+
seasons
109+
approachTime
110+
access
111+
isHidden
112+
coverImage {
113+
id
114+
path
115+
extension
116+
maxIntrinsicWidth
117+
aspectRatio
118+
}
119+
}
120+
}
121+
`;

0 commit comments

Comments
 (0)