Appointment Booker

by joplomacedo

HTML

<div id="app">
	<div class="wrapper">
		<div @click="openBox" class="toggle">
	  	{{is_box_open ? 'Fechar' : 'Marque aqui a sua consulta'}}
	  </div>
	  
	  <div class="box" v-show="is_box_open">
	  	<div class="box_slide">
		  	<p>Que servico procura?</p>
			
			<div>
				<ul>
					<li>
						<button class="btn">Fisioterapia</button>
					</li>
					<li>
						<button class="btn">Disturbios de sono</button>
					</li>
					<li>
						<button class="btn">Podologia</button>
					</li>
				</ul>
			</div>
	  	</div>
	  
	  <div class="box" v-show="is_box_open">
	  	<div class="box_slide">
		  	<p>Terapeuta especifico?</p>
			
			<div>
				<ul>
					<li>
						<button class="btn">Nao</button>
					</li>
					<li>
						<button class="btn">Sim</button>
					</li>
				</ul>
			</div>
	  	</div>
		
		<div class="box_slide">
		  	<p>Quem?</p>
			
			<div>
				<ul>
					<li v-for="terapeuta in terapeutas">
						<button class="btn">
							{{terapeuta}}
						</button>
					</li>
				</ul>
			</div>
	  	</div>
	  
	  	<div class="box_slide">
		  	<p>Quando?</p>
			
			<div>

						<p>
						O mais cedo que temos para si e amanha (13 de Fevereiro) para as seguintes horas:
						</p>
						
						<div>
							<button class="btn">13:00</button>
							<button class="btn">14:00</button>
							<button class="btn">18:00</button>
						</div>
						
						<div>Escolher outra data</div>

			</div>
	  	</div>
		
		<div class="box_slide">
		  	<p>Escolha a data</p>
			
			<div>
				<!-- quando data escolhida, mostrar datas em coluna do lado direito e horas em coluna do lado esquerdo, para permitir rapida circulacao pelas datas/horas -->
			</div>
	  	</div>
		
		<div class="box_slide">
		  	<div>Escolha a hora</div>
			<div>
				<ul class="time_slot_groups_list">
					<li class="time_slot_groups_list__item" v-for="group in time_slot_groups">
						<div class="">{{group.name}}</div>
						<ul class="time_slots_list">
							<li class="time_slots_list__item" @click="x" v-for="slot...

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
  font: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  outline: none;
  color: inherit;
  text-decoration: none;
}

ul,ol,li{
	list-style: none;
}

input,
select,
textarea {
	max-width: 100%;
}

#app,
.wrapper {
	height: 100%;
	pointer-events: none;
}

.wrapper {
  position: fixed;
  padding: 1em;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}

.toggle,
.box {
	pointer-events: all;
}

.toggle {
	cursor: pointer;
	background-color: #eee;
}

.box {
	width: 20em;
	background-color: #eee;
	border-radius: 3px;
	overflow: auto;
	margin-bottom: 1em;
	animation: boxShow .3s;
}

@keyframes boxShow {
	0% {
		opacity: .3;
		transform: translateY(10px);
	}
}

.box_slide {
	padding: .8em;
}


.yzt {
	opacity: .3;
}

.time_slots_list__item {
	cursor: pointer;
	padding: .2em;
	background-color: #fff;
	border-radius: 2px;
	margin-bottom: .2em;
}

.time_slots_list__item:hover .yzt {
	opacity: 1;
}

.field,
.btn {
	padding: .2em;
	border-radius: 3px;
	border: 1px solid transparent;
}

.field {
	border-color: #333;
	background-color: #fff;
}

.btn {
	background-color: lightblue;
	cursor: pointer;
}

Vue

var app = new Vue({
  el: "#app",
  data: {
	is_box_open: false,
	
	terapeutas: [
		'Basilio',
		'Sergio',
		'Pedro'
	],
	
	time_slot_groups: [
		{
			name: 'Manha',
			slots: [
				['9:00', '10:00'],
				['10:00', '11:00'],
				['11:00', '12:00'],
				['12:00', '13:00']
			]
		},
		
		{
			name: 'Tarde',
			slots: [
				['13:00', '14:00'],
				['14:00', '15:00'],
				['15:00', '16:00'],
				['16:00', '17:00'],
				['17:00', '18:00'],
				['18:00', '19:00'],
				['19:00', '20:00']
			]
		}
	],
	
	selected_options: {
		terapeuta: '',
		date: '',
		time_slot: '',
		name: '',
		phone_num: ''
	}
  },
  computed: {

  },
  methods: {
  	x: function( e ) {
		
    },
  	openBox: function( e ) {
		this.is_box_open = !this.is_box_open;
    }
  }
})