{% extends 'base.html.twig' %}
{% block title %}CookNChefs{% endblock %}
{% block body %}
{% if (1==0) %}
<table class="table table-striped">
<thead>
<tr>
<th>Article Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hi</td>
</tr>
</tbody>
</table>
{% else %}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!--
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="CookpotHelper.js?v=3.0"></script>
<link rel="stylesheet" type="text/css" href="css/Layout.css">
<link rel="stylesheet" type="text/css" href="Home.css?v=2.6">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css" >
<script src="Bootstrap/js/bootstrap.js" > </script>
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-->
<style>
.main-body {
margin:0px;
height:2000px;
background-color:#fcf2e6;
}
.container {
padding-top: 250px;
}
</style>
<script>
/*
$(function() {
$('#draggable').draggable();
});
*/
/*
$( function() {
$( "#div1" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "isDropped" )
.html( "Dropped!" );
}
});
});
});
*/
$( function() {
//$( "#draggable" ).draggable();
$( ".droppable-area" ).droppable({
/*
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
*/
});
} );
</script>
</head>
<body class="main-body">
<!--Header-->
<?php
include_once("Header.php");
?>
<!--
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
-->
{% include('header.html.twig') %}
<div class="entire-panel">
<div class="panel-row">
<div class="col-sm-6 col-md-6">
<recipes-panel></recipes-panel>
</div>
<div class="col-sm-6 col-md-6">
<cook-pot></cook-pot>
</div>
</div>
</div>
<!--Footer-->
<?php
include_once("Footer.php");
?>
<script>
/*
function allowDrop(ev) {
console.log("allow drop", ev);
ev.preventDefault();
}
function drag(ev) {
console.log("drag", ev);
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
console.log("drop", ev);
ev.preventDefault();
//var data = ev.dataTransfer.getData("text");
//console.log(data);
console.log("drop event");
console.log(ev);
console.log(ev.toElement.id);
var data = ev.toElement.id;
console.log(data);
if(ev.target.tagName == "IMG") {
console.log("image");
console.log(document.getElementById(data));
ev.target.parentNode.appendChild(document.getElementById(data));
} else {
console.log("else case");
var myData = document.getElementById(data);
console.log(myData);
console.log(myData.style);
//myData.style = "";
myData.style.left = "";
myData.style.top = "";
console.log(myData.style);
ev.target.appendChild(document.getElementById(data));
}
document.getElementById("hiddenIngredients").value = "something";
var evt = new Event('change');
document.getElementById("hiddenIngredients").dispatchEvent(evt)
}
*/
/*
function dropToGroup(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data);
console.log(document.getElementById(data));
ev.target.appendChild(document.getElementById(data));
document.getElementById("hiddenIngredients").value = "something";
var evt = new Event('change');
document.getElementById("hiddenIngredients").dispatchEvent(evt)
}
*/
</script>
</body>
{% endif %}
{% endblock %}