public_html/breakdown.html

   1 <html>
   2     <head>
   3         <!-- Latest compiled and minified CSS -->
   4         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   5
   6         <!-- Optional theme -->
   7         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
   8
   9         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  10
  11         <!-- Latest compiled and minified JavaScript -->
  12         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  13         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  14
  15         <style>
  16             .highlighted {
  17                 background-color: blue;
  18             }
  19
  20             .sprite table.outline td {
  21                 border: 1px solid red;
  22             }
  23
  24             .sprite table {
  25                 margin-left: auto;
  26                 margin-right: auto;
  27             }
  28
  29             .clearfix {
  30                 clear: both;
  31             }
  32
  33             .line-left {
  34                 border-left: 2px solid transparent;
  35             }
  36
  37             .line-right {
  38                 border-right: 2px solid transparent;
  39             }
  40
  41             .line-top {
  42                 border-top: 2px solid transparent;
  43             }
  44
  45             .line-bottom {
  46                 border-bottom: 2px solid transparent;
  47             }
  48
  49             .sprite.measurements .line-left {
  50                 border-left: 2px solid black;
  51             }
  52
  53             .sprite.measurements .line-right {
  54                 border-right: 2px solid black;
  55             }
  56
  57             .sprite.measurements .line-top {
  58                 border-top: 2px solid black;
  59             }
  60
  61             .sprite.measurements .line-bottom {
  62                 border-bottom: 2px solid black;
  63             }
  64
  65             .sprite.measurements .dimension-top {
  66                 transform: translate(50%, -50%);
  67             }
  68
  69             .sprite.measurements .dimension-bottom {
  70                 transform: translate(50%, 50%);
  71             }
  72
  73             .sprite.measurements .dimension-left {
  74                 transform: translateY(50%);
  75             }
  76
  77             .sprite.measurements .dimension-right {
  78                 transform: translateY(50%);
  79             }
  80
  81             .sprite.measurements .dimension-left .line-left, .sprite.measurements .dimension-right .line-right {
  82                 height: 100%;
  83             }
  84
  85             .sprite .height {
  86                 visibility: hidden;
  87                 padding-left: 5px;
  88             }
  89
  90             .sprite .width {
  91                 visibility: hidden;
  92                 text-align:center;
  93             }
  94
  95             .sprite.measurements .height, .sprite.measurements .width {
  96                 visibility: visible;
  97             }
  98
  99             .sprite .grid {
 100                 border: 1px solid red;
 101             }
 102
 103             #home {
 104                 margin-right: 10px;
 105             }
 106
 107             /*.sprite {
 108                 float: left;
 109                 margin-right: 20px;
 110             }*/
 111         </style>
 112
 113     </head>
 114     <body>
 115         <div class="container-fluid">
 116             <h1><a id="home" href="/" title="Return"><i class="fa fa-arrow-left"></i></a><?php echo $name; ?></h1>
 117
 118             <ul class="nav nav-tabs">
 119                 <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
 120                 <li class="nav"><a href="#cost" data-toggle="tab">Cost</a></li>
 121                 <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
 122             </ul>
 123
 124             <div class="tab-content">
 125                 <div class="tab-pane fade in active" id="comparison">
 126                     <div id="original_sprite">
 127                         <div class="col-md-6">
 128                             <h2>Original</h2>
 129                             <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
 130                             <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
 131                         </div>
 132                         <div class="col-md-6">
 133                             <h2>Ironlack approximation</h2>
 134                             <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
 135                             <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
 136                         </div>
 137                     </div>
 138                 </div>
 139                 <div class="tab-pane fade in" id="cost">
 140                     <div class="col-md-6">
 141                         <h2>Summary</h2>
 142                         <div class="sprite measurements col-md-8">
 143                             <?php echo $ironlak_sprite; ?>
 144                         </div>
 145                         <div class="col-md-4">
 146                             <h3>Cost of materials</h3>
 147                             <?php $materials = $cost_of_lumber + $cost_of_cans; ?>
 148                             <?php $materials_used = $value_of_lumber_used + $value_of_can_used; ?>
 149                             <table class="table">
 150                                 <tr>
 151                                     <th>Wood</th>
 152                                     <td><?php echo $cost_of_lumber; ?></td>
 153                                 </tr>
 154                                 <tr>
 155                                     <th>Paint</th>
 156                                     <td><?php echo $cost_of_cans; ?></td>
 157                                 </tr>
 158                                 <tr>
 159                                     <td></td>
 160                                     <td><strong><?php echo $materials; ?></strong></td>
 161                                 </tr>
 162                             </table>
 163
 164                             <h3>Value of materials used</h3>
 165                             <table class="table">
 166                                 <tr>
 167                                     <th>Wood</th>
 168                                     <td><?php echo $value_of_lumber_used; ?></td>
 169                                 </tr>
 170                                 <tr>
 171                                     <th>Paint</th>
 172                                     <td><?php echo $value_of_can_used; ?></td>
 173                                 </tr>
 174                                 <tr>
 175                                     <td></td>
 176                                     <td><strong><?php echo $materials_used; ?></strong></td>
 177                                 </tr>
 178                             </table>
 179
 180                             <h3>Profit @ <?php echo $markup*100; ?>% Markup</h3>
 181                             <table class="table">
 182                                 <tr>
 183                                     <th>Sell price</th>
 184                                     <td><?php echo $materials_used*$markup; ?></td>
 185                                 </tr>
 186                                 <tr>
 187                                     <th>Less materials</th>
 188                                     <td><?php echo $materials_used*$markup - $materials; ?></td>
 189                                 </tr>
 190                             </table>
 191
 192                         </div>
 193                     </div>
 194                     <div class="col-md-6">
 195                         <h2>Materials Breakdown</h2>
 196                         <div class="col-md-12">
 197                             <h3>Paint</h3>
 198                             <?php echo $spray_can_breakdown; ?>
 199                         </div>
 200
 201                         <div class="col-md-12">
 202                             <h3>Paint</h3>
 203                             <?php echo $lumber_breakdown; ?>
 204                         </div>
 205                     </div>
 206                 </div>
 207                 <div class="tab-pane fade in" id="materials">
 208                     <div class="col-md-6">
 209                         <h2>Materials</h2>
 210                         <div class="sprite col-md-8">
 211                             <?php echo $ironlak_sprite; ?>
 212                         </div>
 213                         <div class="col-md-4">
 214                             <h3>Measurements (in m)</h3>
 215                             <form action="upload.php" method="POST" class="form-horizontal">
 216                                <div class="form-group">
 217                                     <label for="spritename" class="control-label col-md-3">Name:</label>
 218                                     <div class="col-md-8"><input id="spritename" name="spritename" class="form-control" type="text" value="<?php echo $vars['spritename']; ?>"></input></div>
 219                                 </div>
 220
 221                                 <div class="form-group">
 222                                     <label for="wood_size" class="control-label col-md-3">Size:</label>
 223                                     <div class="col-md-8"><input id="wood_size" name="wood_size" class="form-control" type="text" value="<?php echo $vars['wood_size']; ?>"></input></div>
 224                                 </div>
 225
 226                                 <div class="form-group">
 227                                     <label for="wood_length" class="control-label col-md-3">Length:</label>
 228                                     <div class="col-md-8"><input id="wood_length" name="wood_length" class="form-control" type="text" value="<?php echo $vars['wood_length']; ?>"></input></div>
 229                                 </div>
 230
 231                                 <div class="form-group">
 232                                     <label for="wood_cost" class="control-label col-md-3">Cost:</label>
 233                                     <div class="col-md-8"><input id="wood_cost" name="wood_cost" class="form-control" type="text" value="<?php echo $vars['wood_cost']; ?>"></input></div>
 234                                 </div>
 235
 236                                 <div class="form-group">
 237                                     <label for="markup" class="control-label col-md-3">Markup:</label>
 238                                     <div class="col-md-8"><input id="markup" name="markup" class="form-control" type="text" value="<?php echo $vars['markup']; ?>"></input></div>
 239                                 </div>
 240
 241                                 <input type="hidden" name="hash" value="<?php echo $hash; ?>"></input>
 242                                 <input class="btn btn-success" type="submit" name="submit" value="Save">
 243                             </form>
 244                         </div>
 245                     </div>
 246                 </div>
 247             </div>
 248         </div>
 249
 250         <script>
 251             padSprite = function(sprite, width, height) {
 252                 console.log(sprite);
 253
 254
 255                 $(sprite).find('tr').each(function() {
 256                     $(this).append("<td class=\"added\"></td>");
 257                 });
 258
 259                 $(sprite).find('tr:first td:last').append('<div class="line-top"></div>');
 260                 $(sprite).find('tr:first td:last').addClass('dimension-top');
 261
 262                 $(sprite).find('tr:last td:last').append('<div class="line-bottom"></div>');
 263                 $(sprite).find('tr:last td:last').addClass('dimension-bottom');
 264
 265                 $(sprite).find('tr').each(function(){
 266                     $(this).find('td').eq(0).before('<td class="added"></td>');
 267                 });
 268
 269                 for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
 270                     var cells = cells ? cells + '<td class="added"></td>' : '<tr><td class="added"></td>';
 271                 }
 272                 cells += "<td class=\"added\"></td></tr><tr><td class=\"added\"></td><td class=\"line-top width added\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
 273                 $(sprite).find("tr:last").after(cells);
 274
 275                 $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').append('<div class="line-left"></div>');
 276                 $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').addClass('dimension-left');
 277
 278                 $(sprite).find('tr:nth-last-child(2) td:first').append('<div class="line-right"></div>');
 279                 $(sprite).find('tr:nth-last-child(2) td:first').addClass('dimension-right');
 280
 281                 $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height added\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
 282             };
 283
 284             var height = $(".sprite:first table tr").length;
 285             var width = $(".sprite:first table tr:first td").length;
 286             $(".sprite").each(function() {
 287                 padSprite($(this), width, height);
 288             });
 289
 290
 291             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
 292
 293             $(".sprite td").width(pixelSize);
 294             $(".sprite td").height(pixelSize);
 295
 296             $(window).bind('resize', function(e)
 297             {
 298                 window.resizeEvt;
 299                 $(window).resize(function()
 300                 {
 301                     clearTimeout(window.resizeEvt);
 302                     window.resizeEvt = setTimeout(function()
 303                     {
 304                         var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
 305                         //console.log($(".sprite:visible").filter(":first").width());
 306                         //console.log($(".sprite:first table tr:first td").length)
 307                         //console.log(pixelSize);
 308                         $(".sprite td").width(pixelSize);
 309                         $(".sprite td").height(pixelSize);
 310                     }, 250);
 311                 });
 312             });
 313
 314             $( ".colour-row" ).hover(function() {
 315                 var colour = $(this).attr('colour');
 316                 $("." + colour).toggleClass("highlighted");
 317             });
 318
 319             function nextTab(elem) {
 320               $(elem + ' li.active')
 321                 .next()
 322                 .find('a[data-toggle="tab"]')
 323                 .click();
 324             }
 325
 326             $(document).keypress(function(e) {
 327               if(e.which == 110) {
 328                 var active = $(".nav li.active");
 329                 var tabs = active.parent().children();
 330                 tabs.eq((tabs.index(active) + 1) % tabs.length).find('a[data-toggle="tab"]').click();
 331               }
 332
 333               if(e.which == 103) {
 334                   $(".sprite tr td:not(.added)").toggleClass("grid");
 335               }
 336             });
 337         </script>
 338     </body>
 339 </html>
 340