-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (72 loc) · 4.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Cadê Buffet</title>
</head>
<body>
<div id="app" class="">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<img src="search-icon.png" alt="" style="height: 45px;" class="input-group-text">
<input v-model="searchInput" type="text" placeholder="Buscar buffet por nome" class="form-control">
</div>
</form>
</nav>
<div v-if="resultList.length <= 0" class="text-center">
Nenhum buffet encontrado.
</div>
<ul class="d-flex flex-wrap justify-content-center">
<li v-for="buffet, index in resultList" class="card mb-2 mx-4 overflow-y-auto" style="width: 18rem; height: 14rem;">
<div class="card-body">
<h5 class="card-title">{{ buffet.social_name }} {{ buffet.city }}</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">{{ buffet.email }}</h6>
<p>{{ buffet.city }}</p>
<button v-on:click="showDetails(buffet.id)" class="mt-1">Ver detalhes</button>
<button v-on:click="showEventTypes(buffet.id, buffet.social_name)" class="mt-1">Ver tipos de evento</button>
</div>
<ul v-if="buffetDetails && buffet.id === buffetToShowDetails" class="list-group list-group-flush">
<li class="list-group-item">Telefone: {{ phone }}</li>
<li class="list-group-item">Endereço: {{ address }}, {{ neighborhood }}, {{ city }} - {{ state }}, {{ zip_code }}</li>
<li class="list-group-item">Descrição: {{ description }}</li>
<li class="list-group-item">Eventos por dia: {{ events_per_day }}</li>
<li class="list-group-item">Avaliado em: {{ rating_average }} <span v-if="star">⭐</span></li>
</ul>
</li>
</ul>
<div v-if="eventTypesContent" class="card container mb-3">
<div class="card-body d-flex flex-wrap justify-content-center">
<button v-on:click="hideEventTypes" class="btn btn-close btn-sm position-absolute top-0 start-0 ms-3 mt-3"></button>
<h5 class="card-title d-block w-100 text-center mb-3">Tipos de Evento de {{ buffetName }}</h5>
<div v-if="eventTypeList.length <= 0" class="text-center">
Nenhum evento encontrado.
</div>
<div v-if="disponibilityRequested" class="alert alert-info d-block w-100">
<p>{{ disponibilityResponse }}</p>
<p>{{ disponibilityResponseContent }}</p>
<p v-if="eventPrice">Valor do evento: R${{ eventPrice }} (com possibilidade de acréscimos ou descontos)</p>
</div>
<div v-for="eventType in eventTypeList" class="card mx-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{ eventType.name }}</h5>
<h6 class="card-subtitle mb-2">{{ eventType.description }}</h6>
<p>Capacidade máxima de convidados: {{ eventType.maximal_people_capacity }}</p>
<hr>
<h6 class="card-subtitle mb-2">Conferir disponibilidade</h6>
<input v-model="eventDate" type="date" class="form-control mb-2" required>
<input v-model="guestsEstimation" type="text" class="form-control mb-2" required>
<button v-on:click="checkDisponibility(eventType.id)">Conferir disponibilidade</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</body>
</html>