Skip to content

BER-80: Converting MapMarkerDetailView into SwiftUI #341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 31 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
6293188
something
Chhumbucket Mar 12, 2025
72e7aec
Created SwiftUI view for MapMarkerDetail
Chhumbucket Mar 13, 2025
dff7222
Added Button templates
Chhumbucket Mar 13, 2025
a6500af
Added fixes and changes button to the formatting guide. Worried about…
Chhumbucket Mar 15, 2025
7afef88
merging
Chhumbucket Mar 20, 2025
0bdc698
Fixed Colors
Chhumbucket Mar 20, 2025
77356ee
message
Chhumbucket Mar 20, 2025
504bff5
Implemented SwiftUI Map marker, bug when on menstrual category, onclo…
Chhumbucket Mar 29, 2025
83d72c1
Fixed padding
Chhumbucket Mar 29, 2025
bb79a60
Save before Essa
Chhumbucket Mar 29, 2025
7d1e11c
Saving
Chhumbucket Mar 31, 2025
d273278
Merge branch 'master' of github.com:asuc-octo/berkeley-mobile-ios
Chhumbucket Mar 31, 2025
b93720b
BER-80: Fix project file structure after merge
Chhumbucket Apr 1, 2025
d48348f
Revert "Fixed padding"
Chhumbucket Apr 1, 2025
152c754
Fixed the MapViewController
Chhumbucket Apr 1, 2025
1d6da83
Added Justin and Baurzjohn fixes
Chhumbucket Apr 2, 2025
5bc47fc
Add new line
Chhumbucket Apr 2, 2025
102796f
Fix spacing
Chhumbucket Apr 2, 2025
c5d7da4
fixed marks
Chhumbucket Apr 2, 2025
af98076
Fixing space
Chhumbucket Apr 2, 2025
329c5e5
Changed sizes
Chhumbucket Apr 3, 2025
a2ae856
Fix alignedmnet
Chhumbucket Apr 3, 2025
3f048bb
Messing with changes
Chhumbucket Apr 5, 2025
8b8707a
Added fixes
Chhumbucket Apr 5, 2025
0d61a4d
Adding changes
Chhumbucket May 2, 2025
ac7752b
Fixed the padding, I want to make the code more modular
Chhumbucket May 2, 2025
2a39354
Modular
Chhumbucket May 2, 2025
6efe6d4
Fixed negative space
Chhumbucket May 3, 2025
12c0663
adding version
Chhumbucket May 3, 2025
ffd7cb5
Merge branch 'master' of github.com:asuc-octo/berkeley-mobile-ios
Chhumbucket May 3, 2025
b25e4c1
Merge branch 'master' into dylchhum/ber-80
Chhumbucket May 3, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions berkeley-mobile.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@
55DCF79B237243D4001B01B8 /* MaterialTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55DCF79A237243D4001B01B8 /* MaterialTextField.swift */; };
55DCF79D237243F5001B01B8 /* RippleLayer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55DCF79C237243F5001B01B8 /* RippleLayer.swift */; };
55DCF7A123724835001B01B8 /* MaterialButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55DCF7A023724835001B01B8 /* MaterialButton.swift */; };
7FC99C602D810A820010724D /* MapMarkerDetailSwiftView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7FC99C5F2D810A820010724D /* MapMarkerDetailSwiftView.swift */; };
C14CCB612D9CC2730075FE69 /* BMFilterButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = C14CCB602D9CC2680075FE69 /* BMFilterButton.swift */; };
E80330EB2CE431C200DC9574 /* DepthButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = E80330EA2CE431C200DC9574 /* DepthButtonStyle.swift */; };
E80330ED2CE7EBB100DC9574 /* NSCoding+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = E80330EC2CE7EBB100DC9574 /* NSCoding+Extension.swift */; };
Expand Down Expand Up @@ -395,6 +396,7 @@
55DCF79C237243F5001B01B8 /* RippleLayer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RippleLayer.swift; sourceTree = "<group>"; };
55DCF7A023724835001B01B8 /* MaterialButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MaterialButton.swift; sourceTree = "<group>"; };
61D128E68A4FC209FFCDE60F /* Pods-berkeley-mobile.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-berkeley-mobile.release.xcconfig"; path = "Target Support Files/Pods-berkeley-mobile/Pods-berkeley-mobile.release.xcconfig"; sourceTree = "<group>"; };
7FC99C5F2D810A820010724D /* MapMarkerDetailSwiftView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MapMarkerDetailSwiftView.swift; sourceTree = "<group>"; };
C14CCB602D9CC2680075FE69 /* BMFilterButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BMFilterButton.swift; sourceTree = "<group>"; };
E80330EA2CE431C200DC9574 /* DepthButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DepthButtonStyle.swift; sourceTree = "<group>"; };
E80330EC2CE7EBB100DC9574 /* NSCoding+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NSCoding+Extension.swift"; sourceTree = "<group>"; };
Expand Down Expand Up @@ -875,6 +877,7 @@
297678862426B7BA00FDD1EB /* SearchAnnotation.swift */,
2E1C227C2D835A9D0021803C /* SearchBarView.swift */,
13492D2C240E179F00AD3D1F /* MapMarkerDetailView.swift */,
7FC99C5F2D810A820010724D /* MapMarkerDetailSwiftView.swift */,
2E765C242D88BF3E008708CD /* SearchResultsView.swift */,
2ED4FB6A2D8BCB390086306A /* SearchViewModel.swift */,
2E76503A2DB76C89009B5551 /* RecentSearchManager.swift */,
Expand Down Expand Up @@ -1296,6 +1299,7 @@
0181711C25CB506A00BA6317 /* Encodable+JSON.swift in Sources */,
13135BB3241244370056B169 /* FilterViewCell.swift in Sources */,
016A56D42519E96800531A12 /* CampusCalendarViewController.swift in Sources */,
7FC99C602D810A820010724D /* MapMarkerDetailSwiftView.swift in Sources */,
298EE27025BB82A2002BAF0F /* CardTableViewCell.swift in Sources */,
13580AF62437D7E700D309AA /* LibraryDetailViewController.swift in Sources */,
135D7F77243A9BD1003F8BD1 /* Colors+GymClass.swift in Sources */,
Expand Down Expand Up @@ -1539,6 +1543,7 @@
CODE_SIGN_ENTITLEMENTS = "berkeley-mobile/berkeley-mobile.entitlements";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 2;
DEVELOPMENT_TEAM = "";
DEVELOPMENT_TEAM = 4HBETBULVA;
INFOPLIST_FILE = "berkeley-mobile/Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 16.0;
Expand All @@ -1563,6 +1568,7 @@
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 2;
DEVELOPMENT_TEAM = "";
DEVELOPMENT_TEAM = 4HBETBULVA;
INFOPLIST_FILE = "berkeley-mobile/Info.plist";
IPHONEOS_DEPLOYMENT_TARGET = 16.0;
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"originHash" : "7ed1966e3e00f1cc30964015f9aca1372b03fa405ea9aca1300a7bf1d858ba6a",
"pins" : [
{
"identity" : "swiftsoup",
"kind" : "remoteSourceControl",
"location" : "https://github.com/scinfu/SwiftSoup.git",
"state" : {
"revision" : "0837db354faf9c9deb710dc597046edaadf5360f",
"version" : "2.7.6"
}
}
],
"version" : 3
}
222 changes: 222 additions & 0 deletions berkeley-mobile/Map/MapMarkerDetailSwiftView.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
//
// MapMakerDetailSwiftView.swift
// berkeley-mobile
//
// Created by Dylan Chhum on 3/11/25.
// Copyright © 2025 ASUC OCTO. All rights reserved.
//

import Foundation
import MapKit
import SwiftUI

// MARK: - MapMarkerDetailSwiftView
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove MARK


struct MapMarkerDetailSwiftView: View {
var marker: MapMarker?
var onClose: (() -> Void)?
var body: some View {
Comment on lines +17 to +18
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add newline between onClose and body

ZStack {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this ZStack necessary?

HStack {
colorAccentBar

VStack(alignment: .leading, spacing: 4) {
headerView
Spacer()
descriptionView
Spacer()
infoRowView
}
.padding(.vertical, 8)
Spacer()
}
.background(Color(.systemBackground))
.clipShape(RoundedRectangle(cornerRadius: 12))
.frame(maxWidth: .infinity)
.frame(minWidth: 200, maxHeight: 140)
.shadow(color: .black.opacity(0.2), radius: 5, x: 0, y: 2)
.padding(.horizontal, 20)
}
}


// MARK: - Private Views

private var colorAccentBar: some View {
let markerColor: Color = {
guard let marker else {
return .purple
}

switch marker.type {
case .known(let type):
return Color(type.color())
case .unknown:
return Color(BMColor.MapMarker.other)
}
}()
Comment on lines +46 to +57
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe make this is a private helper function?


return Rectangle()
.fill(markerColor)
.frame(width: 12)
}

private var headerView: some View {
HStack(alignment: .top) {
Text((marker?.title ?? "Unknown").capitalized)
.font(Font(BMFont.bold(21)))
.foregroundColor(.primary)
.fixedSize(horizontal: false, vertical: true)
Spacer()

Button {
onClose?()
} label: {
Image(systemName: "xmark")
.font(.system(size: 16))
.foregroundStyle(Color.secondary)
.padding(.trailing, 4)
}
Comment on lines +72 to +79
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use trailing closure syntax:

Button(action: {
}) {
...
}

}
}

private var descriptionView: some View {
Text(marker?.subtitle ?? "No description")
.font(Font(BMFont.regular(10)))
.fixedSize(horizontal: false, vertical: true)
.padding(.trailing, 8)
}

private var infoRowView: some View {
HStack {
HStack(spacing: 8) {
Image(systemName: "clock")
.font(.system(size: 12))
.foregroundColor(.secondary)
.rotationEffect(.init(degrees: 90))
openStatusButton
}

Spacer()

locationInfoView

Spacer()

categoryView
}
Comment on lines +91 to +107
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the outer HStack necessary? Could we put lines 100-106 within the nested HStack?

}

private var openStatusButton: some View {
Capsule()
.fill(marker?.isOpen ?? false ? Color.blue : Color(red: 0.4, green: 0.5, blue: 0.9))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Color.blue.blue?

.frame(width: 48, height: 18)
.overlay {
Text(marker?.isOpen ?? false ? "Open" : "Closed")
.font(Font(BMFont.medium(9)))
.foregroundStyle(.white)
}
}

private var locationInfoView: some View {
HStack(spacing: 8) {
Image(systemName: "mappin.and.ellipse")
.font(.system(size: 12))
.foregroundColor(.secondary)
Text(marker?.address ?? "No Address")
.font(Font(BMFont.regular(12)))
.foregroundColor(.primary)
.lineLimit(1)
.truncationMode(.tail)
}
}

private var categoryView: some View {
HStack(spacing: 8){
Image(systemName: getCategoryIcon())
.font(.system(size: 12))
.foregroundColor(.secondary)

Group {
if let marker, case .known(let type) = marker.type, type == .cafe, let mealPrice = marker.mealPrice {
Text(mealPrice)
.font(Font(BMFont.regular(12)))
.foregroundColor(.primary)
} else {
Text("<10")
.font(Font(BMFont.regular(12)))
.foregroundColor(.primary)
}
}
Comment on lines +140 to +150
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bring .font(Font(BMFont.regular(12))) and .foregroundColor(.primary) out and apply it to Group?

}
}

private func getCategoryIcon() -> String {
guard let marker else {
return "questionmark.circle"
}

switch marker.type {
case .known(let type):
switch type {
case .cafe:
return "fork.knife"
case .store:
return "bag"
case .mentalHealth:
return "brain"
case .genderInclusiveRestrooms:
return "toilet"
case .menstrualProductDispensers:
return "drop"
case .garden:
return "leaf"
case .bikes:
return "bicycle"
case .lactation:
return "heart"
case .rest:
return "bed.double"
case .microwave:
return "bolt"
case .printer:
return "printer"
case .water:
return "drop.fill"
case .waste:
return "trash"
case .none:
return "mappin"
}
case .unknown:
return "mappin"
}
}
Comment on lines +154 to +194
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we have a icon() method on a MapMarker that returns a UIImage? maybe use that?

}


// MARK: - Preview

#Preview {
MapMarkerDetailSwiftView(
marker: MapMarker(
type: "Cafe",
location: CLLocationCoordinate2D(latitude: 37.871684, longitude: -122.259934),
name: "Babette South Hall Coffee Bar",
description: "A retail Cal Dining location featuring a Peet Coffee & tea store, made- to-go order deli and bagels bar, smoothies, and grab-and-go items.",
address: "Lower Sproul Plaza",
onCampus: true,
phone: "510-123-4567",
email: "[email protected]",
weeklyHours: nil,
appointment: false,
mealPrice: "$5-10",
cal1Card: true,
eatWell: true,
mpdRooms: nil,
accessibleGIRs: nil,
nonAccesibleGIRs: nil
),
onClose: {}
)
}
Loading