Seat map test

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
	<div id="canvas">
		<a href="#" class="seat" v-for="seat in seats" v-bind:style="'top:' + seat.y + 'px;left:' + seat.x + 'px;background-color:' + seat.color + ';transform:rotate(' + seat.angle + 'deg);'" v-bind:title="'Sectie ' + seat.section + ' - Rij ' + seat.row + ' - Stoel ' + seat.seat"></a>
	</div>
</div>

SCSS

html,body{margin:0;padding:0;}
body {
	*, *:before, *:after {
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
	}
}
#app {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	
	#canvas {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		max-height: 400px;
		background: linear-gradient(0deg, #B3E5FC, #64B5F6);
		
		a {
			text-decoration: none;
			border: 0px;
			outline: none;
		}
		
		.seat {
			display: inline-block;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 16px;
			height: 16px;
			background-color: red;
			border-radius: 4px 4px 50% 50%;
			border: 1px solid rgba(#fff, 0.3);
			//box-shadow: 0px 1px 3px 0px rgba(0,0,0, 0.3);
		}
	}
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
	seats: [
		{
			section: 'A',
			row: 1,
			seat: 1,
			available: true,
			color: '#4CAF50',
			x: 100,
			y: 100,
			angle: 0,
		},
		{
			section: 'A',
			row: 1,
			seat: 2,
			available: true,
			color: '#4CAF50',
			x: 110,
			y: 100,
			angle: 22.5,
		},
		{
			section: 'A',
			row: 1,
			seat: 3,
			available: true,
			color: '#4CAF50',
			x: 120,
			y: 100,
			angle: 45,
		},
	],
  }
})