Commit c7a74f563070953c0db1cddf8f07c1878e75edde

Authored by Lars Jørgen Fredheim
1 parent e306ae7e

Forced commit

archived/layoutMeasurements.js
... ... @@ -46,7 +46,7 @@ class LayoutMeasurements {
46 46 }
47 47  
48 48 createBackButton() {
49   - let btBack = new BABYLON.GUI.Button.CreateSimpleButton("btBack", "Tilbake");
  49 + let btBack = new BABYLON.GUI.Button.CreateSimpleButton("btPrevious", "Tilbake");
50 50 btBack.width = 0.075;
51 51 btBack.height = 0.075;
52 52 btBack.left = "-43%";
... ...
css/style.css
  1 +/* ----------------------------------------------------------- */
  2 +/* ------------------------ Tags ----------------------------- */
  3 +
1 4 html, body {
2   - overflow: hidden;
  5 + overflow: hidden; /*Remove this to enable scrolling */
3 6 width : 100%;
4 7 height : 100%;
5 8 margin : 0;
... ... @@ -8,20 +11,27 @@ html, body {
8 11 font-size: 16px;
9 12 }
10 13  
  14 +input:focus, select:focus, button:focus {
  15 + outline: 0;
  16 +}
  17 +
  18 +label {
  19 + font-weight: bold;
  20 +}
  21 +
  22 +/* ----------------------------------------------------------- */
  23 +/* -------------------- Main Wrappers ------------------------ */
  24 +
11 25 #renderCanvas {
  26 + position: fixed;
12 27 width : 100%;
13 28 height : 100%;
14 29 touch-action: none;
15   - display: none;
16 30 z-index : 5;
17 31 }
18 32  
19   -input:focus, select:focus, button:focus {
20   - outline: 0;
21   -}
22   -
23   -label {
24   - font-weight: bold;
  33 +#renderCanvas:focus {
  34 + outline:0;
25 35 }
26 36  
27 37 #main {
... ... @@ -37,19 +47,14 @@ label {
37 47 height: 600px;
38 48 }
39 49  
40   -#formC, #formD {
41   - display: none;
42   -}
43   -
44   -#measurements {
45   - display: none;
  50 +#setup {
  51 + position: fixed;
  52 + width: 100%;
  53 + height: 100%;
46 54 }
47 55  
48   -#layoutButtons {
49   - margin-left: auto;
50   - margin-right: auto;
51   - padding-bottom: 20px;
52   -}
  56 +/* ----------------------------------------------------------- */
  57 +/* -------------------- Misc Classes ------------------------- */
53 58  
54 59 .setup {
55 60 background-image: url("../images/background.jpg");
... ... @@ -59,59 +64,71 @@ label {
59 64 background-size: cover;
60 65 }
61 66  
  67 +.hide {
  68 + display: none;
  69 +}
  70 +
62 71 .box {
63 72 background: white;
64 73 border-radius: 10px;
65   - margin-top: 200px;
  74 + margin-top: 100px;
66 75 margin-left: auto;
67 76 margin-right: auto;
68 77 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
69 78 }
70 79  
71   -.centered {
72   - position: relative;
73   - text-align: center;
74   - left: -50%;
75   - top: -30%;
76   - background: white;
77   - border-radius: 10px;
78   - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  80 +.center {
  81 + display: block;
  82 + margin-left: auto;
  83 + margin-right: auto;
79 84 }
80 85  
  86 +/* ----------------------------------------------------------- */
  87 +/* ------------------------ Text ----------------------------- */
  88 +
81 89 .headline {
82 90 font-family: Arial, Helvetica, sans-serif;
83 91 font-weight: normal;
84 92 font-size: 2em;
85 93 padding-top: 30px;
  94 + color: black;
86 95 }
87 96  
88   -.grey {
  97 +.subText {
89 98 font-family: Arial, Helvetica, sans-serif;
90 99 font-style: normal;
91 100 font-size: 1em;
92 101 color: dimgrey;
93 102 }
94 103  
  104 +.error {
  105 + color: red;
  106 + font-size: 10px;
  107 +}
  108 +
  109 +/* ----------------------------------------------------------- */
  110 +/* ------------------- Layout selection ---------------------- */
  111 +
  112 +#layoutButtons {
  113 + margin-left: auto;
  114 + margin-right: auto;
  115 + padding-bottom: 20px;
  116 +}
  117 +
95 118 .layoutButton {
96 119 transition: all .2s ease-in-out;
97 120 }
98 121  
99 122 .layoutButton:hover {
100 123 cursor: pointer;
101   - transform: scale(1.1);
  124 + transform: scale(1.2);
102 125 }
103 126  
104   -#triggerModal {
105   - display: none;
106   -}
  127 +/* ----------------------------------------------------------- */
  128 +/* ------------------- Measurement input --------------------- */
107 129  
108   -#centerBt {
109   -}
  130 +#measurements {
110 131  
111   -.center {
112   - display: block;
113   - margin-left: auto;
114   - margin-right: auto;
115 132 }
116 133  
117 134 #lengths {
... ... @@ -119,22 +136,125 @@ label {
119 136 padding-bottom: 20px;
120 137 }
121 138  
122   -#btNext {
123   - background-color: #05AE0E;
124   - width: 100px;
  139 +/* ----------------------------------------------------------- */
  140 +/* -------------------- Custom terrace ----------------------- */
  141 +
  142 +#customTerraceGUI {
  143 + width: 300px;
  144 + text-align: center;
  145 + height: 100%;
  146 +}
  147 +
  148 +#customTerraceSidePanel {
  149 + width: 100%;
  150 + height: 100%;
  151 + /*background-color: red;*/
  152 + border-radius: 10px;
  153 + margin-top: 20px;
  154 + /*padding: 20px;
  155 + /*border: 3px solid black;*/
  156 +}
  157 +
  158 +#addLength, #deleteLength {
  159 + width: 100%;
  160 + background-color: #f3f3f3;
  161 + border: 1px solid black;
125 162 }
126 163  
127   -#btBuild {
  164 +#addLength:hover, #deleteLength:hover {
  165 + background-color: #e2e2e2;
  166 +}
  167 +
  168 +#bottomRow {
  169 + position: fixed;
  170 + bottom: 0;
  171 + background: linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,1) 25%);
  172 + margin-left: 5px;
  173 + padding-top: 25px;
  174 +}
  175 +
  176 +#btNext2 {
  177 + position: relative;
  178 + bottom: 0;
  179 + margin-top: 5px;
  180 +}
  181 +
  182 +#btPrevious2 {
  183 + position: relative;
  184 + bottom: 0;
  185 + margin-top: 5px;
  186 + margin-right: 30px;
  187 +}
  188 +
  189 +.angleRow {
  190 + margin-bottom: 10px;
  191 +}
  192 +
  193 +.btAngle {
  194 + border-radius: 5px;
  195 + padding: 5px;
  196 + margin-bottom: 10px;
  197 + border: 1px solid #000000;
  198 + background-color: white;
  199 +}
  200 +
  201 +.btAngle:hover {
  202 + cursor: pointer;
  203 + border: 1px solid #05AE0E;
  204 +}
  205 +
  206 +.scaleOnClick:active {
  207 + transform: scale(0.95);
  208 +}
  209 +
  210 +#angle-headline, #angle-length{
  211 + font-size: 30px;
  212 +}
  213 +
  214 +.angleButtons {
  215 + padding-bottom: 40px;
  216 + margin: 20px;
  217 +}
  218 +
  219 +.custom-container {
  220 + height: 100%;
  221 +}
  222 +
  223 +.test-wrapper {
  224 + overflow-y: auto;
  225 + overflow-x: hidden;
  226 + border-top-left-radius: 10px;
  227 + border-bottom-left-radius: 10px;
  228 + position: fixed;
  229 + right: 0;
  230 + height: 100%;
  231 + width: 275px;
  232 + z-index: 20;
  233 + /*background-image: url("../images/wallpapers/seamless_paper_texture.png");*/
  234 + border: 1px solid black;
  235 + background-color: #f9f9f9;
  236 + /*margin: 10px;*/
  237 +}
  238 +
  239 +/* ----------------------------------------------------------- */
  240 +/* --------------------- Nav Buttons ------------------------- */
  241 +
  242 +#btNext, #btNext2{
128 243 background-color: #05AE0E;
129   - width: 150px;
  244 + width: 100px;
130 245 }
131 246  
132   -#btBack {
133   - background-color: rgba(17, 16, 16, 0.49);
  247 +#btPrevious, #btPrevious2 {
  248 + background-color: #9f9f9f;
134 249 width: 100px;
135 250 }
136 251  
137   -#btNext, #btBack, #btBuild {
  252 +#btDraw {
  253 + background-color: #05AE0E;
  254 + width: 150px;
  255 +}
  256 +
  257 +#btNext, #btNext2, #btPrevious, #btPrevious2, #btDraw {
138 258 position: relative;
139 259 border: none;
140 260 color: white;
... ... @@ -146,22 +266,22 @@ label {
146 266 transition: all 0.2s ease-in-out;
147 267 }
148 268  
149   -#btNext:hover span , #btBuild:hover span{
  269 +#btNext:hover span, #btNext2:hover span, #btDraw:hover span{
150 270 padding-right: 15px;
151 271 }
152 272  
153   -#btBack:hover span {
  273 +#btPrevious:hover span, #btPrevious2:hover span {
154 274 padding-left: 15px;
155 275 }
156 276  
157   -#btNext span, #btBack span , #btBuild span{
  277 +#btNext span, #btNext2 span, #btPrevious span, #btPrevious2 span, #btDraw span{
158 278 cursor: pointer;
159 279 display: inline-block;
160 280 position: relative;
161 281 transition: 0.5s;
162 282 }
163 283  
164   -#btNext span:after, #btBuild span:after {
  284 +#btNext span:after, #btNext2 span:after, #btDraw span:after {
165 285 content: '\00bb';
166 286 position: absolute;
167 287 opacity: 0;
... ... @@ -170,7 +290,7 @@ label {
170 290 transition: 0.5s;
171 291 }
172 292  
173   -#btBack span:after {
  293 +#btPrevious span:after, #btPrevious2 span:after {
174 294 content: '\00ab';
175 295 position: absolute;
176 296 opacity: 0;
... ... @@ -179,21 +299,64 @@ label {
179 299 transition: 0.5s;
180 300 }
181 301  
182   -#btNext:hover span:after, #btBuild:hover span:after {
  302 +#btNext:hover span:after, #btNext2:hover span:after, #btDraw:hover span:after {
183 303 opacity: 1;
184 304 right: 0;
185 305 }
186 306  
187   -#btBack:hover span:after {
  307 +#btPrevious:hover span:after, #btPrevious2:hover span:after {
188 308 opacity: 1;
189 309 left: 0;
190 310 }
191 311  
192   -#btNext:active, #btBack:active, #btBuild:active {
  312 +#btNext:active, #btNext2:active, #btPrevious:active, #btPrevious2:active, #btDraw:active {
193 313 transform: scale(0.95);
194 314 }
195 315  
196 316 /* ----------------------------------------------------------- */
  317 +/* ------------------------- Main GUI ------------------------ */
  318 +
  319 +#shoppingCart {
  320 + position: fixed;
  321 + bottom: 5px;
  322 + left: 5px;
  323 + width: 100px;
  324 + z-index: 20;
  325 + text-align: center;
  326 + transition: all 0.2s ease-in-out;
  327 + cursor: pointer;
  328 + background-color: rgba(249, 249, 249, 0.5);
  329 + border-radius: 15px;
  330 + border: 1px solid black;
  331 + /*margin: 5px;*/
  332 + padding: 5px;
  333 +}
  334 +
  335 +#shoppingCart:hover {
  336 + transform: scale(1.05);
  337 +}
  338 +
  339 +#imgCart {
  340 + width: 50px;
  341 + bottom: 0;
  342 +}
  343 +
  344 +#subtotal {
  345 + font-size: 15px;
  346 + font-family: Arial, Helvetica, sans-serif;
  347 +}
  348 +
  349 +#totalCostButton {
  350 + position: fixed;
  351 + z-index: 10;
  352 + left: 0;
  353 + bottom: 0;
  354 + height: 50px;
  355 + width: 200px;
  356 + font-size: 1.4em;
  357 + border: 1px solid black;
  358 + border-radius: 5px;
  359 +}
197 360  
198 361 #gui {
199 362 width: 100%;
... ... @@ -206,6 +369,7 @@ label {
206 369 width: 12%;
207 370 height: 5%;
208 371 position: fixed;
  372 + z-index: 10;
209 373 left: 0;
210 374 top: 0;
211 375 }
... ... @@ -222,19 +386,10 @@ label {
222 386 margin: 1%;
223 387 }
224 388  
225   -#totalCostButton {
226   - position: fixed;
227   - left: 0;
228   - bottom: 0;
229   - height: 50px;
230   - width: 200px;
231   - font-size: 1.4em;
232   - border: 1px solid black;
233   - border-radius: 5px;
234   -}
235 389  
236 390 #itemList {
237 391 position: fixed;
  392 + z-index: 15;
238 393 width: 50%;
239 394 height: 70%;
240 395 background: lightgrey url("../images/background.jpg") no-repeat center;
... ... @@ -243,7 +398,6 @@ label {
243 398 border: 1px solid black;
244 399 border-radius: 10px;
245 400 display: none;
246   - z-index: 15;
247 401 }
248 402  
249 403 #itemListHeader {
... ... @@ -319,6 +473,7 @@ label {
319 473 width: 15%;
320 474 height: 100%;
321 475 position: fixed;
  476 + z-index: 10;
322 477 left: 85%;
323 478 top: 0;
324 479 background: lightgrey url("../images/background.jpg") no-repeat center;
... ... @@ -369,6 +524,7 @@ label {
369 524  
370 525 #poleMenu {
371 526 position: fixed;
  527 + z-index: 15;
372 528 bottom: -5.5%;
373 529 left: 40%;
374 530 width: 15%;
... ... @@ -381,6 +537,7 @@ label {
381 537  
382 538 #glassMenu {
383 539 position: fixed;
  540 + z-index: 15;
384 541 bottom: -5.5%;
385 542 left: 40%;
386 543 width: 20%;
... ... @@ -419,6 +576,7 @@ label {
419 576  
420 577 #autoGenPoleSelect {
421 578 position: fixed;
  579 + z-index: 15;
422 580 width: 20%;
423 581 height: 50%;
424 582 left: 40%;
... ... @@ -426,7 +584,6 @@ label {
426 584 background: lightgrey url("../images/background.jpg") no-repeat center;
427 585 border: 1px solid black;
428 586 border-radius: 10px;
429   - z-index: 15;
430 587 display: none;
431 588 }
432 589  
... ... @@ -448,8 +605,10 @@ label {
448 605 border-radius: 5px;
449 606 background-color: white;
450 607 }
  608 +
451 609 #autoGenFinishButton {
452 610 position: fixed;
  611 + z-index: 15;
453 612 left: 0;
454 613 top: 50%;
455 614 font-size: 1.5em;
... ...
images/menu_angle_135.png

819 Bytes | W: | H:

7.21 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_angle_180.png

257 Bytes | W: | H:

4.02 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_angle_225.png

822 Bytes | W: | H:

7.05 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_angle_270.png

773 Bytes | W: | H:

10 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/menu_angle_90.png

745 Bytes | W: | H:

9.99 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/references.txt
1   -Rotate right https://www.iconfinder.com/icons/1608421/right_rotate_icon#size=128
2   -Rotate left https://www.iconfinder.com/icons/1608422/left_rotate_icon#size=128
3   -Trash https://www.iconfinder.com/icons/211934/a_trash_icon#size=128
4   -Locked https://www.iconfinder.com/icons/111044/closed_lock_secure_icon#size=128
5   -Unlocked https://www.iconfinder.com/icons/111043/lock_open_icon#size=128
6   -Triangle https://www.iconfinder.com/icons/183309/shape_triangle_icon#size=64
7   -ruler.png https://www.iconfinder.com/icons/296913/design_ruler_icon#size=512
8   -plus.png https://www.iconfinder.com/icons/126583/add_plus_icon#size=128
  1 +Rotate right https://www.iconfinder.com/icons/1608421/right_rotate_icon#size=128
  2 +Rotate left https://www.iconfinder.com/icons/1608422/left_rotate_icon#size=128
  3 +Trash https://www.iconfinder.com/icons/211934/a_trash_icon#size=128
  4 +Locked https://www.iconfinder.com/icons/111044/closed_lock_secure_icon#size=128
  5 +Unlocked https://www.iconfinder.com/icons/111043/lock_open_icon#size=128
  6 +Triangle https://www.iconfinder.com/icons/183309/shape_triangle_icon#size=64
  7 +ruler.png https://www.iconfinder.com/icons/296913/design_ruler_icon#size=512
  8 +plus.png https://www.iconfinder.com/icons/126583/add_plus_icon#size=128
  9 +shoppingcart.png https://www.iconfinder.com/icons/1608412/cart_shopping_icon#size=128
9 10  
10 11 graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
11 12 \ No newline at end of file
... ...
index.html
... ... @@ -36,24 +36,38 @@
36 36  
37 37 <script src="js/HTMLGUI.js"></script>
38 38  
  39 + <!------------------------------------------------>
  40 + <script src="js/gui/GUI.js"></script>
  41 + <script src="js/gui/CustomTerraceGUI.js"></script>
  42 + <script src="js/gui/NotificationMessage.js"></script>
  43 + <script src="js/gui/LayoutSelectionGUI.js"></script>
  44 + <!------------------------------------------------>
  45 +
39 46 <script src="js/PDF/PDF.js"></script>
40 47 <script src="js/PDF/ImageURLS.js"></script>
41 48  
42 49 <script src="js/Constants.js"></script>
  50 + <script src="js/Setup.js"></script>
43 51 <!--------------------------------------------------------------------------------------------------------------------->
44 52  
45 53 </head>
46 54 <body onload="main()">
47 55  
48   - <canvas id="renderCanvas">
  56 + <!-- Canvas -->
  57 + <canvas id="renderCanvas" class="hide">
49 58 Denne nettleseren støtter ikke "canvas"-elementet!
50 59 </canvas>
51 60  
  61 +
  62 + <!-- Terrace setup -->
52 63 <div class="setup" id="setup">
53   - <div class="container">
  64 +
  65 + <!-- Predefined shapes -->
  66 + <div class="container" id="init">
54 67 <div class="row">
55 68 <div class="col-md-7 box">
56 69  
  70 + <!-- Layout selection -->
57 71 <div id="layout">
58 72 <div class="row">
59 73 <div class="col-md-12">
... ... @@ -62,7 +76,7 @@
62 76 </div>
63 77 <div class="row">
64 78 <div class="col-md-12">
65   - <p class="text-center grey" style="padding-bottom: 20px">I neste steg kan du legge inn sidemål</p>
  79 + <p class="text-center subText" style="padding-bottom: 20px">I neste steg kan du legge inn sidemål</p>
66 80 </div>
67 81 </div>
68 82 <div id="layoutButtons" class="row">
... ... @@ -81,27 +95,32 @@
81 95 </div>
82 96 <div class="row">
83 97 <div class="col-md-12" style="padding-top: 20px">
84   - <p class="text-center grey">Ser du ikke noe som likner?</p>
  98 + <p class="text-center subText">Ser du ikke noe som likner?</p>
85 99 </div>
86 100 </div>
87 101 <div class="row">
88 102 <div class="col-md-12" style="padding-bottom: 15px">
89   - <button class="center" id="btBuild"><span>Bygg din egen</span></button>
  103 + <button class="center" id="btDraw"><span>Tegn din egen</span></button>
90 104 </div>
91 105 </div>
92 106 </div>
93 107  
94   - <div id="measurements">
  108 + <!-- Measurement input -->
  109 + <div id="measurements" class="hide">
95 110 <div class="row">
96 111 <div class="col-md-12">
97 112 <h1 class="text-center headline">Legg inn mål for din terrasse</h1>
98 113 </div>
99 114 </div>
100 115 <div class="row">
101   - <div class="col-lg-7">
  116 +
  117 + <!-- Layout preview -->
  118 + <div class="col-lg-8">
102 119 <img class="img-fluid float-right" id="layoutPreview" src="">
103 120 </div>
104   - <div class="col-lg-5">
  121 +
  122 + <!-- Layout input fields -->
  123 + <div class="col-lg-4">
105 124 <form id="lengths">
106 125 <div class="form-group" id="formA">
107 126 <label for="sideA">Side A</label>
... ... @@ -111,26 +130,31 @@
111 130 <label for="sideB">Side B</label>
112 131 <input type="text" class="form-control" id="sideB" placeholder="Lengde i mm"/>
113 132 </div>
114   - <div class="form-group" id="formC">
  133 + <div class="form-group hide" id="formC">
115 134 <label for="sideC">Side C</label>
116 135 <input type="text" class="form-control" id="sideC" placeholder="Lengde i mm"/>
  136 + <p class="error hide" id="errorC">Side C kan ikke være lengre enn side A</p>
117 137 </div>
118   - <div class="form-group" id="formD">
119   - <label for="sideD">Side D</label>
  138 + <div class="form-group hide" id="formD">
  139 + <label for="sideD" style="padding-top:15px">Side D</label>
120 140 <input type="text" class="form-control" id="sideD" placeholder="Lengde i mm"/>
  141 + <p class="error hide" id="errorD">Side D kan ikke være lengre enn side B</p>
121 142 </div>
122 143 </form>
123 144 </div>
  145 +
124 146 </div>
  147 +
  148 + <!-- Nav buttons -->
125 149 <div class="row">
126 150 <div class="col-lg-12">
127   - <button class="float-left" id="btBack"><span>Forrige</span></button>
  151 + <button class="float-left" id="btPrevious"><span>Forrige</span></button>
128 152 <button class="float-right" id="btNext"><span>Neste</span></button>
129 153 </div>
130 154 </div>
131   - <!-- Button trigger modal -->
132   - <button id="triggerModal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"></button>
133   - <!-- Modal -->
  155 +
  156 + <!-- Modal w/ trigger -->
  157 + <button id="triggerModal" type="button" class="btn hide" data-toggle="modal" data-target="#exampleModal"></button>
134 158 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
135 159 <div class="modal-dialog" role="document">
136 160 <div class="modal-content">
... ... @@ -141,7 +165,7 @@
141 165 </button>
142 166 </div>
143 167 <div class="modal-body">
144   - Vennligst oppgi numeriske verdier
  168 + Vennligst oppgi positive numeriske verdier
145 169 </div>
146 170 <div class="modal-footer">
147 171 <button type="button" class="btn btn-secondary" data-dismiss="modal">Lukk</button>
... ... @@ -149,13 +173,94 @@
149 173 </div>
150 174 </div>
151 175 </div>
  176 + </div>
  177 +
  178 + </div>
  179 + </div>
  180 + </div>
  181 +
  182 + </div>
  183 +
  184 + <!-- Testing -->
  185 + <div class="test-wrapper hide" id="testWrapper">
  186 +
  187 + <!-- Custom terrace GUI -->
  188 + <div id="customTerraceGUI" class="center hide">
  189 + <div class="row">
  190 + <div class="col-md-12">
  191 + <!-- GUI sidepanel -->
  192 + <div id="customTerraceSidePanel">
  193 +
  194 + <div id="angle-headline">
  195 + <p>Velg retning</p>
  196 + </div>
  197 +
  198 + <!-- Angle buttons -->
  199 + <div class="angleButtons">
  200 + <div class="row angleRow">
  201 + <div class="col-sm-6">
  202 + <img src="images/menu_angle_225.png" id="bt45_1" class="img-fluid btAngle">
  203 + </div>
  204 + <div class="col-sm-6">
  205 + <img src="images/menu_angle_135.png" id="bt45_2" class="img-fluid btAngle">
  206 + </div>
  207 + </div>
  208 + <div class="row angleRow">
  209 + <div class="col-sm-6">
  210 + <img src="images/menu_angle_270.png" id="bt90_1" class="img-fluid btAngle">
  211 + </div>
  212 +
  213 + <div class="col-sm-6">
  214 + <img src="images/menu_angle_90.png" id="bt90_2" class="img-fluid btAngle">
  215 + </div>
  216 + </div>
  217 + <div class="row">
  218 + <div class="col-sm-6 offset-3">
  219 + <img src="images/menu_angle_180.png" id="bt180" class="img-fluid btAngle">
  220 + </div>
  221 + </div>
  222 + </div>
152 223  
  224 + <div id="angle-length">
  225 + <p>Angi lengde</p>
  226 + </div>
  227 +
  228 + <!-- Length input -->
  229 + <div class="row angleRow">
  230 + <div class="col-sm-8 offset-2">
  231 + <input type="text" class="form-control" id="sideLength" placeholder="Lengde i mm"/>
  232 + </div>
  233 +
  234 + </div>
  235 +
  236 + <!-- Add/remove side buttons -->
  237 + <div class="row">
  238 + <div class="col-sm-6 offset-3" style="margin-bottom: 10px">
  239 + <button class="btn scaleOnClick" id="addLength">Legg til</button>
  240 + </div>
  241 + </div>
  242 + <div class="row angleRow">
  243 + <div class="col-sm-6 offset-3">
  244 + <button class="btn scaleOnClick" id="deleteLength" style="margin-bottom: 65px">Slett forrige</button>
  245 + </div>
  246 + </div>
  247 + </div>
  248 +
  249 + <!-- Nav buttons -->
  250 + <div id="bottomRow" class="row">
  251 + <div class="col-sm-12">
  252 + <button class="float-right" id="btNext2"><span>Neste</span></button>
  253 + <button class="float-right" id="btPrevious2"><span>Forrige</span></button>
  254 + </div>
153 255 </div>
154 256 </div>
155 257 </div>
156 258 </div>
  259 +
157 260 </div>
158 261  
  262 +
  263 + <!-- Main GUI -->
159 264 <div class="main" id="main">
160 265 <div id="gui">
161 266 <input id="moduleMenuToggleButton" type="image" src="images/menu_toggle_arrows.png" title="Skjul menyen" onclick="toggleMenuVisibility()" ondragstart="return false;" />
... ... @@ -216,7 +321,13 @@
216 321 <input id="helpLinesButton" type="image" src="images/ruler.png" onclick="toggleHelplines()" ondragstart="return false;" />
217 322 </div>
218 323  
219   - <button id="totalCostButton" onclick="displayItemList()">0 kr</button>
  324 +
  325 + <!-- Shopping cart -->
  326 + <div id="shoppingCart" onclick="displayItemList()">
  327 + <img src="images/icons/shoppingCart.png" id="imgCart">
  328 + <div id="subtotal">0 kr</div>
  329 + </div>
  330 +
220 331  
221 332 <div id="itemList">
222 333 <div id="itemListHeader">
... ...
js/HTMLGUI.js
... ... @@ -136,27 +136,29 @@ function toggleHelplines() {
136 136 }
137 137  
138 138 function updateTotalCost() {
139   - document.getElementById("totalCostButton").innerHTML = PDF.NumToStr(totalCost);
  139 + document.getElementById("subtotal").innerHTML = PDF.NumToStr(totalCost);
140 140 }
141 141  
142 142 function displayItemList() {
143 143 document.getElementById("itemList").style.display = "block";
144 144  
145   - document.getElementById("itemTable").removeChild(document.getElementById("itemTableBody"));
  145 + if (shoppingCart.length > 0) {
  146 + document.getElementById("itemTable").removeChild(document.getElementById("itemTableBody"));
146 147  
147   - var tableBody = document.createElement("tbody");
148   - tableBody.id = "itemTableBody";
149   - document.getElementById("itemTable").appendChild(tableBody);
  148 + var tableBody = document.createElement("tbody");
  149 + tableBody.id = "itemTableBody";
  150 + document.getElementById("itemTable").appendChild(tableBody);
150 151  
151   - for(let i = 0; i < shoppingCart.length; i++) {
152   - tableBody.appendChild(createItemListRow(shoppingCart[i], i, tableBody));
153   - }
154   - tableBody.children[shoppingCart.length - 1].style.borderBottom = "1px solid black";
  152 + for (let i = 0; i < shoppingCart.length; i++) {
  153 + tableBody.appendChild(createItemListRow(shoppingCart[i], i, tableBody));
  154 + }
  155 + tableBody.children[shoppingCart.length - 1].style.borderBottom = "1px solid black";
155 156  
156