Prezados, boa tarde! Estou com uma dúvida ou melhor dizendo, não estou conseguindo saber por onde começar. Queria fazer um sistema, que fosse parecido com reserva de vaga de ônibus ou hospedagem de hotel. E este deveria associar uma imagem a reserva, data, valor. Exemplo: ônibus tem 30 lugares, queria marcar a poltrona 1 e 3, foram reservada e compradas pelo usuário H.
Oi Marcos, tudo bem? Neste caso, eu não entendi onde a imagem entraria nesse caso. Você iria ter uma imagem representando os assentos e para cada assento ocupado você editaria a imagem programaticamente, é isso?
Exatamente. A ideia seria associar a imagem do cadeira ao status de vago, reservado, ocupado.
Seu maior desafio é em relação a imagem Marcos, como você pensa em fazer isso? Como é algo programável, acredito que você possa criar um SVG da visão geral e modificar esse SVG de acordo com as regras.
Você pode dar uma olhada na API do SVG pra ver se consegue pensar em algo. É possível.
Pelo que eu entendi, você quer desenhar o mapa do ônibus e mostrar quais as poltronas que podem ser selecionadas.
Este tipo de problema você pode resolver usando arrays.
Você pode criar um array com as poltronas do ônibus, e arrays auxiliares com as poltronas que foram reservadas ou ocupadas. Fazendo um loop pelo array de poltronas, para cada linha você pode verificar se a poltrona existe em algum array auxiliar, e se existir, alterar o mapa do ônibus de acordo.
Fiz um exemplo bem simples usando javascript com efeitos simples em CSS que mostra uma forma de resolver este problema:
<html>
<head>
<title>Onibus</title>
<style type="text/css">
.posicao {float: left; width:70px;}
.disponivel {background-color: #FFFFCC}
.ocupado {background-color: #FF0000}
.reservado {background-color: #CCCCCC}
</style>
</head>
<body>
<div id="onibus">
</body>
<script type="text/javascript">
var posicao = [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];
var posicoes_ocupadas = [7, 10, 29, 30, 32];
var posicoes_reservadas = [1, 6, 11];
var tabela = "";
for (i = 0; i < posicao.length; i++) {
var tipo = "disponivel";
//Pesquisar se existe dentro de algum array
if (posicoes_ocupadas.indexOf(posicao[i])>-1){
tipo = "ocupado";
}
if (posicoes_reservadas.indexOf(posicao[i])>-1){
tipo = "reservado";
}
tabela += '<div class="posicao ' + tipo + '" >' + posicao[i] + '</div>';
//Apenas para separar as vagas na hora de imprimir
if ((posicao[i] % 4) == 0){
tabela += "<br>"; //Quebra de linha
} else {
if ((posicao[i] % 2) == 0){
tabela += '<div class="posicao"> </div>'; //Corredor
}
}
}
document.getElementById("onibus").innerHTML = tabela;
</script>
</html>