|
|
//
|
|
|
// CreateBetView.swift
|
|
|
// AllIn
|
|
|
//
|
|
|
// Created by Emre on 29/09/2023.
|
|
|
//
|
|
|
|
|
|
import SwiftUI
|
|
|
|
|
|
struct CreationBetView: View {
|
|
|
|
|
|
@StateObject private var viewModel = CreationBetViewModel()
|
|
|
@Binding var showMenu: Bool
|
|
|
@State private var selectedTab = 0
|
|
|
|
|
|
// Popovers
|
|
|
@State private var showTitlePopover: Bool = false
|
|
|
@State private var showDescriptionPopover: Bool = false
|
|
|
@State private var showRegistrationEndDatePopover: Bool = false
|
|
|
@State private var showBetEndDatePopover: Bool = false
|
|
|
@State private var showConfidentialityPopover: Bool = false
|
|
|
|
|
|
let dateRange: ClosedRange<Date> = {
|
|
|
let calendar = Calendar.current
|
|
|
let startDate = Date()
|
|
|
let endDate = calendar.date(byAdding: .year, value: 10, to: startDate)!
|
|
|
return startDate ... endDate
|
|
|
}()
|
|
|
let screenWidth = UIScreen.main.bounds.width
|
|
|
|
|
|
@State private var response = ""
|
|
|
@State private var values: [String] = []
|
|
|
|
|
|
@State private var selectedOption = 0
|
|
|
let options: [(Int, String, String)] = [
|
|
|
(0, "questionMarkIcon", "Oui / Non"),
|
|
|
(1, "footballIcon", "Pari sportif"),
|
|
|
(2, "paintbrushIcon", "Réponses personnalisées")
|
|
|
]
|
|
|
|
|
|
@State var groupedItems: [[String]] = [[String]] ()
|
|
|
|
|
|
private func updateGroupedItems() {
|
|
|
|
|
|
var updatedGroupedItems: [[String]] = [[String]] ()
|
|
|
var tempItems: [String] = [String] ()
|
|
|
var width: CGFloat = 0
|
|
|
var dynamicWidthLimit: CGFloat
|
|
|
|
|
|
for value in values {
|
|
|
let label = UILabel()
|
|
|
label.text = value
|
|
|
label.sizeToFit()
|
|
|
dynamicWidthLimit = CGFloat(tempItems.count) * 105.0
|
|
|
|
|
|
let labelWidth = label.frame.size.width
|
|
|
if (width + labelWidth + dynamicWidthLimit) < screenWidth {
|
|
|
width += labelWidth
|
|
|
tempItems.append(value)
|
|
|
} else {
|
|
|
width = labelWidth
|
|
|
updatedGroupedItems.append(tempItems)
|
|
|
tempItems.removeAll()
|
|
|
tempItems.append(value)
|
|
|
}
|
|
|
}
|
|
|
updatedGroupedItems.append(tempItems)
|
|
|
|
|
|
groupedItems = updatedGroupedItems
|
|
|
}
|
|
|
|
|
|
var body: some View {
|
|
|
VStack(alignment: .center, spacing: 0) {
|
|
|
NavigationLink(destination: MainView(page: "Bet").navigationBarBackButtonHidden(true), isActive: $viewModel.betAdded) {
|
|
|
EmptyView()
|
|
|
}
|
|
|
TopBar(showMenu: self.$showMenu)
|
|
|
TabView(selection: $selectedTab) {
|
|
|
|
|
|
// First Page
|
|
|
ScrollView(showsIndicators: false) {
|
|
|
VStack(spacing: 5) {
|
|
|
VStack() {
|
|
|
HStack(spacing: 5) {
|
|
|
Text("Thème")
|
|
|
.textStyle(weight: .bold, color: AllInColors.primaryTextColor, size: 17)
|
|
|
|
|
|
Image("questionMarkGreyIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 14, height: 14)
|
|
|
.onTapGesture {
|
|
|
showTitlePopover.toggle()
|
|
|
}
|
|
|
.allInPopover(isPresented: $showTitlePopover, paddingHorizontal: 20) {
|
|
|
"Généralement un nom commun décrivant le thème global du pari pour servir de référence."
|
|
|
}
|
|
|
|
|
|
Spacer()
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
.padding(.leading, 10)
|
|
|
|
|
|
VStack {
|
|
|
if let themeError = $viewModel.themeFieldError.wrappedValue {
|
|
|
Text(themeError)
|
|
|
.textStyle(weight: .bold, color: .red, size: 10)
|
|
|
}
|
|
|
TextField("", text: $viewModel.theme, prompt: Text("Études, sport, soirée...")
|
|
|
.foregroundColor(AllInColors.lightGrey300Color)
|
|
|
.font(.system(size: 14))
|
|
|
.fontWeight(.light))
|
|
|
.padding()
|
|
|
.background(
|
|
|
RoundedRectangle(cornerRadius: 9)
|
|
|
.fill(AllInColors.componentBackgroundColor)
|
|
|
.frame(height: 40)
|
|
|
)
|
|
|
.frame(width: 350, height: 40)
|
|
|
.foregroundColor(AllInColors.primaryTextColor)
|
|
|
.overlay(
|
|
|
RoundedRectangle(cornerRadius: 10, style: .continuous)
|
|
|
.stroke(AllInColors.delimiterGrey, lineWidth: 1)
|
|
|
)
|
|
|
.padding(.bottom, 5)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
HStack(spacing: 5) {
|
|
|
Text("Phrase du BET")
|
|
|
.textStyle(weight: .bold, color: AllInColors.primaryTextColor, size: 17)
|
|
|
|
|
|
Image("questionMarkGreyIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 14, height: 14)
|
|
|
.allInPopover(isPresented: $showDescriptionPopover, paddingHorizontal: 10) {
|
|
|
"Court descriptif du pari, souvent une question ouverte ou fermée."
|
|
|
}
|
|
|
|
|
|
Spacer()
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
.padding(.leading, 10)
|
|
|
|
|
|
VStack {
|
|
|
if let descriptionError = $viewModel.descriptionFieldError.wrappedValue {
|
|
|
Text(descriptionError)
|
|
|
.textStyle(weight: .bold, color: .red, size: 10)
|
|
|
}
|
|
|
TextField("", text: $viewModel.description, prompt: Text("David sera absent Lundi matin en cours ?")
|
|
|
.foregroundColor(AllInColors.lightGrey300Color)
|
|
|
.font(.system(size: 14))
|
|
|
.fontWeight(.light), axis: .vertical)
|
|
|
.lineLimit(4, reservesSpace: true)
|
|
|
.padding()
|
|
|
.background(
|
|
|
RoundedRectangle(cornerRadius: 9)
|
|
|
.fill(AllInColors.componentBackgroundColor)
|
|
|
.frame(height: 110)
|
|
|
)
|
|
|
.frame(width: 350, height: 110)
|
|
|
.foregroundColor(AllInColors.primaryTextColor)
|
|
|
.overlay(
|
|
|
RoundedRectangle(cornerRadius: 10, style: .continuous)
|
|
|
.stroke(AllInColors.delimiterGrey, lineWidth: 1)
|
|
|
)
|
|
|
.padding(.bottom, 30)
|
|
|
}
|
|
|
|
|
|
HStack(spacing: 5) {
|
|
|
Text("Date de fin des inscriptions")
|
|
|
.textStyle(weight: .bold, color: AllInColors.primaryTextColor, size: 17)
|
|
|
Image("questionMarkGreyIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 14, height: 14)
|
|
|
.allInPopover(isPresented: $showRegistrationEndDatePopover) {
|
|
|
"Date de fin avant laquelle les joueurs peuvent s'inscrire en pariant leurs Allcoins."
|
|
|
}
|
|
|
|
|
|
Spacer()
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
.padding(.leading, 10)
|
|
|
|
|
|
VStack {
|
|
|
if let endRegisterError = $viewModel.endRegisterDateFieldError.wrappedValue {
|
|
|
Text(endRegisterError)
|
|
|
.textStyle(weight: .bold, color: .red, size: 10)
|
|
|
}
|
|
|
HStack(spacing: 5) {
|
|
|
DatePicker(
|
|
|
"",
|
|
|
selection: $viewModel.endRegisterDate,
|
|
|
in: dateRange,
|
|
|
displayedComponents: [.date, .hourAndMinute]
|
|
|
)
|
|
|
.accentColor(AllInColors.lightPurpleColor)
|
|
|
.labelsHidden()
|
|
|
.padding(.bottom, 10)
|
|
|
Spacer()
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
}
|
|
|
|
|
|
VStack(alignment: .leading, spacing: 5) {
|
|
|
VStack() {
|
|
|
HStack(spacing: 5) {
|
|
|
Text("Date de fin du BET")
|
|
|
.textStyle(weight: .bold, color: AllInColors.primaryTextColor, size: 17)
|
|
|
|
|
|
Image("questionMarkGreyIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 14, height: 14)
|
|
|
.allInPopover(isPresented: $showBetEndDatePopover) {
|
|
|
"Date des résultats où seront redistribués les Allcoins aux vainqueurs."
|
|
|
}
|
|
|
|
|
|
Spacer()
|
|
|
}
|
|
|
.padding(.leading, 10)
|
|
|
}
|
|
|
|
|
|
VStack {
|
|
|
if let endBetError = $viewModel.endBetDateFieldError.wrappedValue {
|
|
|
Text(endBetError)
|
|
|
.textStyle(weight: .bold, color: .red, size: 10)
|
|
|
}
|
|
|
HStack(spacing: 5) {
|
|
|
DatePicker(
|
|
|
"",
|
|
|
selection: $viewModel.endBetDate,
|
|
|
in: dateRange,
|
|
|
displayedComponents: [.date, .hourAndMinute]
|
|
|
)
|
|
|
.accentColor(AllInColors.lightPurpleColor)
|
|
|
.labelsHidden()
|
|
|
.padding(.bottom, 40)
|
|
|
Spacer()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
|
|
|
VStack {
|
|
|
HStack(spacing: 5) {
|
|
|
Text("Confidentialité du BET")
|
|
|
.textStyle(weight: .bold, color: AllInColors.primaryTextColor, size: 17)
|
|
|
Image("questionMarkGreyIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 14, height: 14)
|
|
|
.allInPopover(isPresented: $showConfidentialityPopover, paddingHorizontal: 15) {
|
|
|
"Option permettant d'ouvrir ou non le pari à des inconnus."
|
|
|
}
|
|
|
|
|
|
Spacer()
|
|
|
}
|
|
|
.padding(.leading, 10)
|
|
|
|
|
|
HStack(spacing: 5) {
|
|
|
ConfidentialityButton(image: "globe", text: "Public", selected: viewModel.isPublic)
|
|
|
.onTapGesture {
|
|
|
viewModel.isPublic = true
|
|
|
}
|
|
|
.padding(.trailing, 5)
|
|
|
|
|
|
ConfidentialityButton(image: "lock", text: "Privé", selected: !viewModel.isPublic)
|
|
|
.onTapGesture {
|
|
|
viewModel.isPublic = false
|
|
|
}
|
|
|
Spacer()
|
|
|
}
|
|
|
}
|
|
|
.frame(width: 340)
|
|
|
.padding(.bottom, 10)
|
|
|
|
|
|
|
|
|
VStack(spacing: 10) {
|
|
|
|
|
|
if !self.viewModel.isPublic {
|
|
|
DropDownFriends()
|
|
|
.padding(.bottom, 30)
|
|
|
}
|
|
|
|
|
|
HStack() {
|
|
|
Spacer()
|
|
|
Text("Votre BET sera visible par tous les utilisateurs.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.multilineTextAlignment(.center)
|
|
|
Spacer()
|
|
|
}
|
|
|
HStack() {
|
|
|
Spacer()
|
|
|
Text("Tout le monde pourra rejoindre le BET.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.multilineTextAlignment(.center)
|
|
|
Spacer()
|
|
|
}
|
|
|
HStack() {
|
|
|
Spacer()
|
|
|
Text("Vous pourrez inviter des amis à tout moment pendant la période d’inscription.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.padding(.leading, 35)
|
|
|
.multilineTextAlignment(.center)
|
|
|
Spacer()
|
|
|
}
|
|
|
}
|
|
|
Spacer()
|
|
|
HStack() {
|
|
|
Spacer()
|
|
|
Button(action: {
|
|
|
viewModel.create()
|
|
|
}) {
|
|
|
Text("Publier le bet")
|
|
|
.font(.system(size: 24))
|
|
|
.fontWeight(.bold)
|
|
|
.overlay {
|
|
|
AllInColors.primaryGradient.frame(width: 150)
|
|
|
.mask(
|
|
|
Text("Publier le bet")
|
|
|
.font(.system(size: 24))
|
|
|
.fontWeight(.bold)
|
|
|
.frame(maxWidth: .infinity)
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
.frame(width: 335, height: 60)
|
|
|
.background(AllInColors.componentBackgroundColor)
|
|
|
.cornerRadius(12)
|
|
|
.overlay(
|
|
|
RoundedRectangle(cornerRadius: 10, style: .continuous)
|
|
|
.stroke(AllInColors.delimiterGrey, lineWidth: 1)
|
|
|
)
|
|
|
Spacer()
|
|
|
}
|
|
|
}
|
|
|
.padding([.leading, .trailing, .bottom], 30)
|
|
|
.padding(.top, 50)
|
|
|
}
|
|
|
.tag(0)
|
|
|
|
|
|
// Second Page
|
|
|
VStack(spacing: 5) {
|
|
|
|
|
|
VStack() {
|
|
|
DropDownMenu(selectedOption: $selectedOption, options: options)
|
|
|
}
|
|
|
.padding([.bottom], 15)
|
|
|
.frame(width: 340)
|
|
|
|
|
|
|
|
|
Group {
|
|
|
switch selectedOption {
|
|
|
case 0:
|
|
|
Text("Les utilisateurs devront répondre au pari avec OUI ou NON.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.padding([.leading, .trailing], 20)
|
|
|
|
|
|
Text("Aucune autre réponse ne sera acceptée.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
|
|
|
case 2:
|
|
|
Text("Vous allez renseigner les différentes réponses disponibles dans ce pari.")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.padding(.leading, 13)
|
|
|
|
|
|
Text("Faites attention a etre claire et éviter toutes incertitudes")
|
|
|
.textStyle(weight: .bold, color: AllInColors.veryLightPurpleColor, size: 13)
|
|
|
.padding(.bottom, 15)
|
|
|
|
|
|
VStack(spacing: 5) {
|
|
|
HStack(spacing: 0) {
|
|
|
TextField("", text: $response, prompt: Text("Intitulé de réponse")
|
|
|
.foregroundColor(AllInColors.lightGrey200Color)
|
|
|
.font(.system(size: 16))
|
|
|
.fontWeight(.medium))
|
|
|
.padding()
|
|
|
.background(
|
|
|
Rectangle()
|
|
|
.fill(Color.white)
|
|
|
.cornerRadius(9, corners: [.topLeft, .bottomLeft])
|
|
|
.frame(height: 38)
|
|
|
)
|
|
|
.frame(width: 250, height: 38)
|
|
|
.foregroundColor(.black)
|
|
|
.onChange(of: response) { newValue in
|
|
|
if newValue.count > 20 {
|
|
|
response = String(newValue.prefix(20))
|
|
|
}
|
|
|
}
|
|
|
|
|
|
Button(action: {
|
|
|
if !response.isEmpty && values.count < 5 {
|
|
|
values.append(response)
|
|
|
updateGroupedItems()
|
|
|
response = ""
|
|
|
}
|
|
|
}) {
|
|
|
Text("Ajouter")
|
|
|
.foregroundColor(.white)
|
|
|
}
|
|
|
.frame(width: 95, height: 40)
|
|
|
.background(AllInColors.lightPurpleColor)
|
|
|
.cornerRadius(10, corners: [.bottomRight, .topRight])
|
|
|
.cornerRadius(2, corners: [.bottomLeft, .topLeft])
|
|
|
}
|
|
|
HStack {
|
|
|
Spacer()
|
|
|
Text("encore \(5 - values.count) max.")
|
|
|
.textStyle(weight: .regular, color: AllInColors.primaryTextColor, size: 12)
|
|
|
|
|
|
}
|
|
|
VStack(spacing: 10) {
|
|
|
ForEach(groupedItems, id: \.self) { items in
|
|
|
HStack {
|
|
|
ForEach(items, id: \.self) { text in
|
|
|
HStack {
|
|
|
Text(text)
|
|
|
.foregroundColor(.white)
|
|
|
.lineLimit(1)
|
|
|
Button(action: {
|
|
|
if let index = values.firstIndex(of: text) {
|
|
|
values.remove(at: index)
|
|
|
updateGroupedItems()
|
|
|
}
|
|
|
}) {
|
|
|
Image("crossIcon")
|
|
|
.resizable()
|
|
|
.frame(width: 15, height: 15)
|
|
|
.foregroundColor(.white)
|
|
|
}
|
|
|
}
|
|
|
.padding(5)
|
|
|
.padding([.leading, .trailing], 5)
|
|
|
.background(AllInColors.lightPurpleColor)
|
|
|
.cornerRadius(16)
|
|
|
}
|
|
|
Spacer()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
default:
|
|
|
Text("En attente")
|
|
|
}
|
|
|
}
|
|
|
Spacer()
|
|
|
}
|
|
|
.padding([.leading, .trailing], 30)
|
|
|
.padding(.top, 50)
|
|
|
.tag(1)
|
|
|
}
|
|
|
.overlay(
|
|
|
HStack {
|
|
|
Button(action: {
|
|
|
selectedTab = 0
|
|
|
}) {
|
|
|
Text("Question")
|
|
|
.font(.system(size: 16))
|
|
|
.padding()
|
|
|
.fontWeight(selectedTab == 0 ? .bold : .semibold)
|
|
|
.foregroundColor(selectedTab == 0 ? AllInColors.primaryTextColor : .gray)
|
|
|
.offset(y: 0)
|
|
|
}
|
|
|
Button(action: {
|
|
|
selectedTab = 1
|
|
|
}) {
|
|
|
Text("Réponses")
|
|
|
.font(.system(size: 16))
|
|
|
.padding()
|
|
|
.fontWeight(selectedTab == 1 ? .bold : .semibold)
|
|
|
.foregroundColor(selectedTab == 1 ? AllInColors.primaryTextColor : .gray)
|
|
|
.offset(y: 0)
|
|
|
}
|
|
|
}
|
|
|
, alignment: .top)
|
|
|
.tabViewStyle(PageTabViewStyle())
|
|
|
}
|
|
|
.onTapGesture {
|
|
|
hideKeyboard()
|
|
|
}
|
|
|
.edgesIgnoringSafeArea(.bottom)
|
|
|
.background(AllInColors.backgroundColor)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
struct CreationBetView_Previews: PreviewProvider {
|
|
|
static var previews: some View {
|
|
|
CreationBetView(showMenu: .constant(false))
|
|
|
.preferredColorScheme(.dark)
|
|
|
}
|
|
|
}
|
