Updated Duration Picker during Recipe Editing

2024-03-01 15:32:04 +01:00
parent 744ea76a34
commit 650df2b67e
13 changed files with 733 additions and 525 deletions
--- a/Client/Views/Recipes/RecipeViewSections/RecipeDurationSection.swift
+++ b/Client/Views/Recipes/RecipeViewSections/RecipeDurationSection.swift
@@ -0,0 +1,122 @@
+//
+//  RecipeDurationSection.swift
+//  Nextcloud Cookbook iOS Client
+//
+//  Created by Vincent Meilinger on 01.03.24.
+//
+
+import Foundation
+import SwiftUI
+
+// MARK: - RecipeView Duration Section
+
+struct RecipeDurationSection: View {
+    @ObservedObject var viewModel: RecipeView.ViewModel
+    
+    var body: some View {
+        if viewModel.editMode {
+            LazyVGrid(columns: [GridItem(.adaptive(minimum: 200, maximum: .infinity), alignment: .leading)]) {
+                EditableDurationView(time: viewModel.observableRecipeDetail.prepTime, title: LocalizedStringKey("Preparation"))
+                EditableDurationView(time: viewModel.observableRecipeDetail.cookTime, title: LocalizedStringKey("Cooking"))
+                EditableDurationView(time: viewModel.observableRecipeDetail.totalTime, title: LocalizedStringKey("Total time"))
+            }
+        } else {
+            LazyVGrid(columns: [GridItem(.adaptive(minimum: 200, maximum: .infinity), alignment: .leading)]) {
+                DurationView(time: viewModel.observableRecipeDetail.prepTime, title: LocalizedStringKey("Preparation"))
+                DurationView(time: viewModel.observableRecipeDetail.cookTime, title: LocalizedStringKey("Cooking"))
+                DurationView(time: viewModel.observableRecipeDetail.totalTime, title: LocalizedStringKey("Total time"))
+            }
+        }
+    }
+}
+
+fileprivate struct DurationView: View {
+    @ObservedObject var time: DurationComponents
+    @State var title: LocalizedStringKey
+    
+    var body: some View {
+        VStack(alignment: .leading) {
+            HStack {
+                SecondaryLabel(text: title)
+                Spacer()
+            }
+            HStack {
+                Image(systemName: "clock")
+                    .foregroundStyle(.secondary)
+                Text(time.displayString)
+                    .lineLimit(1)
+            }
+        }
+        .padding()
+    }
+}
+
+fileprivate struct EditableDurationView: View {
+    @ObservedObject var time: DurationComponents
+    @State var title: LocalizedStringKey
+    @State var presentPopoverView: Bool = false
+    @State var hour: Int = 0
+    @State var minute: Int = 0
+    
+    var body: some View {
+        VStack(alignment: .leading) {
+            HStack {
+                SecondaryLabel(text: title)
+                Spacer()
+            }
+            Button {
+                presentPopoverView.toggle()
+            } label: {
+                HStack {
+                    Image(systemName: "clock")
+                        .foregroundStyle(.secondary)
+                    Text(time.displayString)
+                        .lineLimit(1)
+                }
+            }
+        }
+        .padding()
+        .popover(isPresented: $presentPopoverView) {
+            TimePickerPopoverView(selectedHour: $hour, selectedMinute: $minute)
+        }
+        .onChange(of: presentPopoverView) { presentPopover in
+            if !presentPopover {
+                time.hourComponent = String(hour)
+                time.minuteComponent = String(minute)
+            }
+        }
+        .onAppear {
+            minute = Int(time.minuteComponent) ?? 0
+            hour = Int(time.hourComponent) ?? 0
+        }
+    }
+}
+
+
+fileprivate struct TimePickerPopoverView: View {
+    @Binding var selectedHour: Int
+    @Binding var selectedMinute: Int
+    
+    var body: some View {
+        HStack {
+            Picker(selection: $selectedHour, label: Text("Hours")) {
+                ForEach(0..<99, id: \.self) { hour in
+                    Text("\(hour) h").tag(hour)
+                }
+            }
+            .pickerStyle(WheelPickerStyle())
+            .frame(width: 100, height: 150)
+            .clipped()
+
+            Picker(selection: $selectedMinute, label: Text("Minutes")) {
+                ForEach(0..<60, id: \.self) { minute in
+                    Text("\(minute) min").tag(minute)
+                }
+            }
+            .pickerStyle(WheelPickerStyle())
+            .frame(width: 100, height: 150)
+            .clipped()
+        }
+        .padding()
+    }
+}