From 9f506acf58e6e8954b1c19c952c4aa6a88d93329 Mon Sep 17 00:00:00 2001 From: stephensm Date: Mon, 5 Aug 2013 16:20:07 -0400 Subject: [PATCH] better layout --- drawSaved.js | 2 +- graph.css | 40 +++++++++++ home-screen.html | 4 +- perfectSteak.css | 50 ++++++++++++-- perfectSteak.js | 172 +++++++++++++++++++---------------------------- sample.js | 2 + 6 files changed, 158 insertions(+), 112 deletions(-) diff --git a/drawSaved.js b/drawSaved.js index f0896ac..9f6f52e 100644 --- a/drawSaved.js +++ b/drawSaved.js @@ -43,7 +43,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side) //$(".span6").append(dropdown); var svgContainer = d3.select(".span6").append("svg") .attr("width", '50%') - .attr("height", '200px') + .attr("height", '150px') .append("g") .attr("class",'savedInfo') .attr("transform", "translate(" + 45 + "," + 140 + ")") diff --git a/graph.css b/graph.css index 2b6e3c0..279e344 100644 --- a/graph.css +++ b/graph.css @@ -56,3 +56,43 @@ background-image:-ms-linear-gradient(top, #693d34 10%, #e87c66 30%,#f52900 50%,# stroke: black; stroke-width: 1.5px; } +ul { + font-family: Arial, Verdana; + font-size: 14px; + margin: 0; + padding: 0; + list-style: none; +} +ul li { + display: block; + position: relative; + float: left; +} +li ul { + display: none; +} +ul li a { + display: block; + text-decoration: none; + color: #ffffff; + border-top: 1px solid #ffffff; + padding: 5px 15px 5px 15px; + background: #1e7c9a; + margin-left: 1px; + white-space: nowrap; +} +ul li a:hover { +background: #3b3b3b; +} +li:hover ul { + display: block; + position: absolute; +} +li:hover li { + float: none; + font-size: 11px; +} +li:hover a { background: #3b3b3b; } +li:hover li a:hover { + background: #1e7c9a; +} diff --git a/home-screen.html b/home-screen.html index b3b5f03..17c210a 100644 --- a/home-screen.html +++ b/home-screen.html @@ -7,7 +7,7 @@ - + @@ -75,7 +75,7 @@

About this Applet

Create Your Meat

-
Meat Thickness: cm
+
Meat Thickness: cm
Initial Meat Temperature: °C
What type of meat are you cooking?
Steak
diff --git a/perfectSteak.css b/perfectSteak.css index 48830e2..8c91a5a 100644 --- a/perfectSteak.css +++ b/perfectSteak.css @@ -1,21 +1,48 @@ .inputTable{ position: relative; - width: 120% !important; + width: 150% !important; text-align: center; + padding: 0px !important; + margin: 0px!important; /* left: 10% !important;*/ } .displayDiv{ position: relative; - width: 80%; + width: 100%; } +.dropdown{ + top:100%; + height:20px; +} + +.selectName{ + position: absolute; + width: 30%; + height: 20%; +} +#recipeName{ + width: 200px !important; +} + +#saveBut{ + position:relative; + top: -5px; + float: left; + width: 29% !important; + height: 17px !important; + font-size:6pt; + padding:1px; + margin:1px; + +} .table-container{ overflow-x: hidden; overflow-y: auto; - width:120%; + width:100%; height:160px; font-size: 10px; } @@ -26,7 +53,7 @@ th{ } td{ height: 30px !important; - + max-width:33%!important; } #addButton{ @@ -37,7 +64,7 @@ td{ } .displayDiv{ position:relative; - width:80% + width:100% } #subButton{ /* position: absolute;*/ @@ -57,6 +84,15 @@ td{ } */ +#steakHist +{ + width:40%; + height:20px; + margin-left:5%; + margin-right:5%; + margin-top:0%; + margin-bottom:0%; +} #meatInp{ position:relative; padding: 20px; @@ -67,7 +103,7 @@ input[type="text"] { border: 1px solid black; font-size: 12px; width: 40px; - + margin-right:0px; } #thickInpDiv, #tempInpDiv, #meatTypeDiv{ @@ -82,4 +118,4 @@ input[type="text"] { margin:0px !important; position: relative !important; top:-5px!important; -} +} \ No newline at end of file diff --git a/perfectSteak.js b/perfectSteak.js index 9b45b82..da4425c 100644 --- a/perfectSteak.js +++ b/perfectSteak.js @@ -2,7 +2,7 @@ var perfectSteak = function (div) { function Model(div) { - var currentInfo={'meatTemp':23, 'thickness':3, 'data':[], 'numRows':2, 'time':0, 'OKToGraph':true} + var currentInfo={'meatTemp':23, 'thickness':3, 'data':[], 'numRows':2, 'time':0, 'OKToGraph':true, 'recipes':[]} var timeStep = 15; var inputTable = $(".inputTable"); @@ -42,6 +42,10 @@ var perfectSteak = function (div) { currentInfo['time']=value; } + var addRecipe=function(name, recipe){ + currentInfo['recipe']['name']=recipe; + } + //CHANGES X SECONDS INTO Y:X WHERE Y IS MINUTES X IS SECONDS var convertTime=function(secs){ var minutes=Math.floor(parseInt(secs)/60); @@ -82,6 +86,10 @@ var perfectSteak = function (div) { } + var saveRecipe=function(name){ + console.log(currentInfo["data"]); + } + var buildData=function(){ var newData=[]; @@ -89,6 +97,7 @@ var perfectSteak = function (div) { var side1data=parseFloat($("#inp1_"+g).val()); var side2data=parseFloat($("#inp2_"+g).val()); var timedata=$("#row"+g+"time").val(); + console.log("timedata"+timedata+" timedata length " +timedata.length) if (timedata.length>2){ var timeMin=function(time){ console.log("timeMin") @@ -134,7 +143,9 @@ var perfectSteak = function (div) { changeTime:changeTime, addTime:addTime, buildData:buildData, - checkDiv:checkDiv + checkDiv:checkDiv, + saveRecipe:saveRecipe, + addRecipe:addRecipe } } @@ -150,7 +161,6 @@ var perfectSteak = function (div) { displayDiv.append(inputTable); displayDiv.change(function(){ model.checkDiv() -//<<<<<<< HEAD model.buildData(); updateTime(); for (var j=0; j>>>>>> 98101b5e50ec50526ddb403f94f4d68ebcd1d185 if(clicked&&model.currentInfo["OKToGraph"]){graph()} - + else{d3.selectAll("svg") .remove(); - - + + model.dataClear(); - + } - - }) -// div.append + }) var addButton; var flipButton; var cookButton; + var saveBut=$('Save'); + var saveModal=$(''); + displayDiv.append(saveModal) + + saveBut.on("click", function(){ + var selectName=$("
") + var name=$("#recipeName").val(); + console.log("name "+ name); + model.saveRecipe(name) + }); var updateTime=function(){ for(var i=0;i
") -//======= + var addDropdown=function(){ + var dropdownDiv=$("
"); + var dropdown1=$(''); + dropdown1.append($('')); + + var dropdown2=$(''); + dropdown2.append($('')); + + + dropdownDiv.append(dropdown1,dropdown2); + $(".span6").append(dropdownDiv); - div.append("
") + } -//>>>>>>> 98101b5e50ec50526ddb403f94f4d68ebcd1d185 + var buildDisplay = function () { + if (model.currentInfo["OKToGraph"]){ + div.append("
"); $(".table-container").append(displayDiv); - + $("#startModal").modal("show"); - + cookButton = $(".cookButton"); -//<<<<<<< HEAD -// -// var thicknessInp = ($("
Meat Thickness (cm)
")); -// thicknessInp.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// var steakTemp = ($("
Initial Meat Temperature (°C)
")); -// steakTemp.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// //Item to hold inputs of meat. Append meatInput to your display -// var meatInput=$('What type of meat are you cooking?
' -// +'Steak
' -// +'Tuna
' -// +'Turkey'); -// meatInput.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// var cookbuttonrow = $("
Let's get cooking!"); -// -// var thicknessInp = ($("
Meat Thickness (cm)
")); -// thicknessInp.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// var steakTemp = ($("
Initial Meat Temperature (°C)
")); -// steakTemp.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// //Item to hold inputs of meat. Append meatInput to your display -// var meatInput=$('
What type of meat are you cooking?
' -// +'Steak
' -// +'Tuna
' -// +'Turkey
'); -// meatInput.change(function(){ -// model.checkDiv(); -// if(clicked&&model.currentInfo["OKToGraph"]){graph()}}); -// -// -// var cookbuttonrow = $("
>>>>>> 98101b5e50ec50526ddb403f94f4d68ebcd1d185 buildTable(); } else{ (".") } + + addDropdown(); } -var toF=function(C) -{ - return (C*(5/9)+32 + "°F"); -} + + var toF=function(C) + { + return (C*(5/9)+32 + "°F"); + } var buildTable = function () { var inpTabHeader = $("Duration (s)Side 1 (°C)Side 2 (°C)"); inputTable.append(inpTabHeader); var timeStep = model.timeStep; var len = model.currentInfo["data"].length; var newData = [] -//<<<<<<< HEAD -// $("#cookButton").remove(); -//======= - -//>>>>>>> 98101b5e50ec50526ddb403f94f4d68ebcd1d185 var sumtime=0; for (var i = 0; i < model.currentInfo["numRows"]; i++) { var iminus = i - 1; @@ -312,7 +279,7 @@ var toF=function(C) // } //var timeCol=$(""+minSecs+""); //======= - + //>>>>>>> 98101b5e50ec50526ddb403f94f4d68ebcd1d185 var duration = $(""); @@ -327,7 +294,7 @@ var toF=function(C) row.append(duration, step1Col, step2Col); inputTable.append(row); if (i == model.currentInfo["numRows"] - 1) { - inputTable.append(addButton); + inputTable.append(addButton,saveBut); } var sumtime=0; @@ -339,10 +306,10 @@ var toF=function(C) console.log(sumtime); if (len == 0) { - inp1.val(23); + inp1.val(180); inp2.val(23); - - + + model.dataAdd([sumtime, parseFloat($("#inp1_" + i).val()), parseFloat($("#inp2_" + i).val())]); } else if (i <= len) { @@ -373,7 +340,7 @@ var toF=function(C) flipButton = $(""); var i = model.currentInfo["numRows"] - 1; var row = $(""); - + if(i>0){ @@ -390,8 +357,8 @@ var toF=function(C) step1Col.append(flipButton); row.append(duration, step1Col, step2Col); $('#theTable').stop().animate({ - scrollTop: $("#theTable")[0].scrollHeight -}, 800); + scrollTop: $("#theTable")[0].scrollHeight + }, 800); console.log($("#theTable").scrollTop()); timeFun(i); flipButtonFun(i); @@ -408,6 +375,7 @@ var toF=function(C) model.dataAdd([sumtime, parseFloat($("#inp1_" + i).val()), parseFloat($("#inp2_" + i).val())]) closeRowFun(); } + } var delRow = function () { @@ -422,13 +390,13 @@ var toF=function(C) }); }; - + var closeRowFun=function(){ $(".closeRow").on("click", function(){ var rowNum=String($(this).attr("id").charAt(3)) $("#row"+rowNum).remove(); model.numRowsMinus(); - + //NOW WE NEED TO CHANGE THE ROW NUMBER OF ALL THE OTHER ROWS for (var l=rowNum+1; l1){ var sumtime=parseFloat(time[1]); - + sumtime+=parseFloat(60*time[0]); } else{var sumtime=parseFloat(time[0]);} - + console.log(sumtime); model.dataAdd([sumtime, cur1, cur2]); } diff --git a/sample.js b/sample.js index 2df480c..c31d376 100644 --- a/sample.js +++ b/sample.js @@ -6,6 +6,8 @@ var flame=Thedata.points; var timestep=1/Thedata.step; var maxTemps=Thedata.maxTemps; console.log(sampledata); +drawFinished(meatType,maxTemps,data,steak[0],0); +drawFinished('Tuna',maxTemps.concat(maxTemps),data,steak[0],1); graphSteak(sampledata,flame,timestep,meatType,maxTemps); // if(localStorage.pastMeats == undefined){//if no meats have been saved before, make this the first one