0

Quiero crear el comedor de un restaurante y guardar las posiciones de las mesas en base de datos. Las mesas son draggables pero no se cómo guardar esas posiciones en base de datos para mostrar luego el comedor como yo lo haya guardado. Gracias!

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script type="text/javascript">
	function inicio(){
		$("#crea_mesas").on("click",function(){
			for(var i = 1; i <= $("#numero_mesas").val(); i++){
				$(".mesas_comedor").append("<div class='mesa' id='mesa"+i+"'>"+'mesa '+i+"</div>");
				
			}
			$('.mesa').draggable({
				containment: '.comedor'
			});
			$('.mesa').click(function () {
				$(this).attr('contenteditable', 'true');
			}); 
			// Al salir se elimina el atributo editable
			$('.mesa').focusout(function(){
				$(this).removeAttr('contenteditable');
			});
		});
		function AsignaPosicion(){
		  $("#guarda_comedor").on("click",function(){
		  		var i=1;
				for( i = 1; i <= $(".mesa").length; i++){
					var posicion=$("#mesa"+i).position();	
					GuardarDatos(i,posicion.left,posicion.top);
				}		
		  });	
		}
		function RestaurarDatos(){
				for(var i = 1; i <=2 /*$(".mesa").length*/; i++){
					$(".comedor").append("<div class='mesa' id='mesa"+i+"'>"+'mesa '+i+"</div>");
					$("#mesa"+i).css({"top":localStorage["mesa"+i+"top"],
									  "left":localStorage["mesa"+i+"left"],
									  "width": "50px"
									  }
									);					
				}
		}
		function GuardarDatos(i,posicion1,posicion2){
			localStorage.setItem("mesa"+i+"left",posicion1);
			localStorage.setItem("mesa"+i+"top",posicion2);
			console.log(localStorage["mesa"+i+"top"]);
			console.log(localStorage["mesa"+i+"left"]);
		}
		function Restaurar(){
			$("#restaurar").on("click",function(){
				RestaurarDatos();
			});
		}
		AsignaPosicion();
		Restaurar();
	}
	  $(document).ready(inicio);
    </script>
	<style type="text/css">
	.mesas_comedor{
			 border: 1px solid black;
			 display: flex;
			 flex-flow: row wrap;
			 padding: 1%;
			 width: 80%;
	}
	.mesa{
		border: 1px solid black;
		background-color: #00FF7F;
		margin: 1%;
	}
	.comedor{
		background:-webkit-linear-gradient(left, #385F83, #CBD5DF);
		background:-o-linear-gradient(left, #385F83, #CBD5DF);
		background:linear-gradient(to right, #385F83, #CBD5DF);
		border: 1px solid black;
		height: 20vh;
		width: 80%;
		margin-bottom: 1%;
	}
	form > label{
		width: 35%;
	}
	input{
		width: 15%;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Crear Comedor</title>

</head>
<body>
<main>
	<h1>Crear Un comedor nuevo</h1>
	<form action="#" name="crea_comedor" method="post">
		<label for="nombre_comedor">Introduzca el nombre del nuevo comedor</label>
		<input type="text" name="nombre_comedor"><br>
		<label for="nombre_comedor">Introduzca cuantas mesas tiene el comedor</label>
		<input type="number" name="numero_mesas" id="numero_mesas"><br>
		<input type="button" class="btn btn-info" name="Crear_comedor" id="crea_mesas" value="Crear">
	</form>
	<h3>Mesas que dispone su comedor</h3>
	<div class="mesas_comedor" id="mesas_comedor">
	</div>
	<div class="comedor"></div>
	<button id="restaurar" class="btn btn-info">Ver diseño</button>
	<button class="btn btn-info" id="guarda_comedor">Guardar</button>
</main>
</body>

    </html>

1

1 respuesta 1

0

Si lo que deseas es guardar solo el CSS en una base de datos... creo que tendrías que hacer lo siguiente...

  1. guardar en un archivo por separado el CSS que quieras guardar.
  2. leer ese archivo con PHP y subir el contenido a la base de datos como un texto largo
  3. Cuando lo traigas de la base datos lo guardas en el servidor con PHP
  4. llamas el CSS recién guardado.

(nunca lo e hecho, pero creo que podría funcionar)

aqui puedes leer sobre las finciones de PHP que te ayudaran en el proceso https://www.w3schools.com/php/php_file_open.asp

1
  • La idea es guardar de alguna manera las posiciones en los que se quedarían los div para luego poder recuperarlo. El usuario le da a guardar y luego cuando le de al boton de ver diseño se muestre la posicion de los div que se ha elegido Commented el 15 may. 2018 a las 20:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.