Board preview feature

19 files changed, 120 insertions, 7 deletions

diff --git a/http/api/api.py b/http/api/api.py
index 1c1cb0f..be2635f 100644
--- a/http/api/api.py
+++ b/http/api/api.py
@@ -63,6 +63,22 @@ def handle_upload(response, request):
         input_file.close()
         if not len(dealset):
             raise RuntimeError('Dealset is empty')
+        if params['display_deals']:
+            preview_obj = []
+            for board in dealset:
+                deal_preview = {
+                    'number': board.number,
+                    'conditions': 'nesw'[board.dealer],
+                    'hands': []
+                }
+                for pair in ['ns', 'ew']:
+                    if board.vulnerable[pair.upper()]:
+                        deal_preview['conditions'] += '-' + pair
+                deal_preview['hands'] = board.hands
+                preview_obj.append(deal_preview)
+            return_obj['preview'] = preview_obj
+        else:
+            return_obj['preview'] = None
     except RuntimeError as e:
         return_obj['error'] = unicode(e)
         return _print_response(response, return_obj)
diff --git a/http/dealconvert.js b/http/dealconvert.js
index ff25444..e038b58 100644
--- a/http/dealconvert.js
+++ b/http/dealconvert.js
@@ -52,9 +52,9 @@ $(document).ready(function() {
                                 var warningTemplate = $('template#file-output-warning');
                                 var errorTemplate = $('template#file-output-error');
                                 var fileTemplate = $('template#file-output');
-                                var inputHeader = outputGroup.find('.card-header');
+                                var inputHeader = outputGroup.find('.file-header');
                                 inputHeader.text(data.name);
-                                var groupBody = outputGroup.find('.card-body');
+                                var groupBody = outputGroup.find('.file-body');
                                 if (data.error) {
                                     inputHeader.addClass('bg-danger');
                                     groupBody.append(errorTemplate.clone().contents().unwrap().text(data.error));
@@ -94,6 +94,24 @@ $(document).ready(function() {
                                             );
                                         }
                                     }
+                                    if (data.preview) {
+                                        var boardTemplate = $('#board-preview');
+                                        var hands = ['north', 'east', 'south', 'west'];
+                                        var suits = ['spades', 'hearts', 'diamonds', 'clubs'];
+                                        for (var b = 0; b < data.preview.length; b++) {
+                                            var board = boardTemplate.clone().contents().unwrap();
+                                            board.find('.board-number').text(data.preview[b].number);
+                                            board.find('.board-conditions').attr('src', 'img/' + data.preview[b].conditions + '.png');
+                                            for (var h = 0; h < hands.length; h++) {
+                                                for (var s = 0; s < suits.length; s++) {
+                                                    board.find('.board-' + hands[h] + '-' + suits[s]).text(data.preview[b].hands[h][s].join(''));
+                                                }
+                                            }
+                                            outputGroup.find('.file-boards-panel .board-body').append(board);
+                                        }
+                                    } else {
+                                        outputGroup.find('.file-boards-panel').remove();
+                                    }
                                 }
                                 $('body').append(outputGroup);
                                 completed += 1;
diff --git a/http/img/e-ew.png b/http/img/e-ew.png
new file mode 100644
index 0000000..bbf899f
--- /dev/null
+++ b/http/img/e-ew.png
diff --git a/http/img/e-ns-ew.png b/http/img/e-ns-ew.png
new file mode 100644
index 0000000..05a3b6c
--- /dev/null
+++ b/http/img/e-ns-ew.png
diff --git a/http/img/e-ns.png b/http/img/e-ns.png
new file mode 100644
index 0000000..2e94563
--- /dev/null
+++ b/http/img/e-ns.png
diff --git a/http/img/e.png b/http/img/e.png
new file mode 100644
index 0000000..0d9304b
--- /dev/null
+++ b/http/img/e.png
diff --git a/http/img/n-ew.png b/http/img/n-ew.png
new file mode 100644
index 0000000..8cc1807
--- /dev/null
+++ b/http/img/n-ew.png
diff --git a/http/img/n-ns-ew.png b/http/img/n-ns-ew.png
new file mode 100644
index 0000000..d45ef7e
--- /dev/null
+++ b/http/img/n-ns-ew.png
diff --git a/http/img/n-ns.png b/http/img/n-ns.png
new file mode 100644
index 0000000..a94eb42
--- /dev/null
+++ b/http/img/n-ns.png
diff --git a/http/img/n.png b/http/img/n.png
new file mode 100644
index 0000000..cb079c4
--- /dev/null
+++ b/http/img/n.png
diff --git a/http/img/s-ew.png b/http/img/s-ew.png
new file mode 100644
index 0000000..44c3e71
--- /dev/null
+++ b/http/img/s-ew.png
diff --git a/http/img/s-ns-ew.png b/http/img/s-ns-ew.png
new file mode 100644
index 0000000..8cff6f8
--- /dev/null
+++ b/http/img/s-ns-ew.png
diff --git a/http/img/s-ns.png b/http/img/s-ns.png
new file mode 100644
index 0000000..36fe441
--- /dev/null
+++ b/http/img/s-ns.png
diff --git a/http/img/s.png b/http/img/s.png
new file mode 100644
index 0000000..a0611ac
--- /dev/null
+++ b/http/img/s.png
diff --git a/http/img/w-ew.png b/http/img/w-ew.png
new file mode 100644
index 0000000..b66f4f9
--- /dev/null
+++ b/http/img/w-ew.png
diff --git a/http/img/w-ns-ew.png b/http/img/w-ns-ew.png
new file mode 100644
index 0000000..448abf2
--- /dev/null
+++ b/http/img/w-ns-ew.png
diff --git a/http/img/w-ns.png b/http/img/w-ns.png
new file mode 100644
index 0000000..623a641
--- /dev/null
+++ b/http/img/w-ns.png
diff --git a/http/img/w.png b/http/img/w.png
new file mode 100644
index 0000000..6a995ad
--- /dev/null
+++ b/http/img/w.png
diff --git a/http/index.html b/http/index.html
index fb97c5e..82c3dc8 100644
--- a/http/index.html
+++ b/http/index.html
@@ -9,7 +9,7 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <script src="dealconvert.js"></script>
   </head>
-  <body>
+  <body style="overflow-y: scroll">
     <div class="container">
       <div class="page-header">
         <a href="#" class="faq-btn btn btn-info float-right" data-toggle="collapse" data-trigger="hover" data-content="FAQ" data-placement="bottom" data-target="#faq">ⓘ</a>
@@ -141,20 +141,27 @@
         </div>
         <div class="form-group">
           <button type="submit" class="btn btn-primary" id="submit-btn" disabled="disabled">Konwertuj</button>
-          <!--
           <div class="form-check-inline">
             <input class="form-check-input" type="checkbox" name="display" value="yes" id="display-boards" />
             <label class="form-check-label" for="display-boards">Wyświetl podgląd rozkładów</label>
           </div>
-          -->
         </div>
       </form>
     </div>
     <template id="file-output-group">
       <div class="container output-group mb-1">
         <div class="card">
-          <div class="card-header"></div>
-          <div class="card-body"></div>
+          <div class="card-header file-header"></div>
+          <div class="card-body file-body">
+            <div class="card file-boards-panel mb-2">
+              <button class="btn card-header bg-primary text-white text-left" data-toggle="collapse" role="button" data-target="#boards-panel-body">
+                Podgląd rozkładów
+              </button>
+              <div id="boards-panel-body" class="collapse collapsed card-body">
+                <div class="board-body d-flex" style="flex-flow: row wrap; align-content: flex-start; justify-content: space-around"></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </template>
@@ -171,5 +178,77 @@
     <template id="file-output-error">
       <div class="alert alert-danger"></div>
     </template>
+    <template id="board-preview">
+      <div class="card m-2" style="width: 20rem;">
+        <div class="card-header">
+          <h5 class="card-title">Rozdanie <span class="board-number"></span></h5>
+        </div>
+        <div class="card-body">
+          <table class="table table-sm table-borderless m-auto">
+            <tr>
+              <td rowspan="4" colspan="2"></td>
+              <td><b>♠</b></td>
+              <td class="board-north-spades"></td>
+              <td rowspan="4" colspan="2"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♥</b></td>
+              <td class="board-north-hearts"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♦</b></td>
+              <td class="board-north-diamonds"></td>
+            </tr>
+            <tr>
+              <td><b>♣</b></td>
+              <td class="board-north-clubs"></td>
+            </tr>
+            <tr>
+              <td><b>♠</b></td>
+              <td class="board-west-spades"></td>
+              <td rowspan="4" colspan="2" class="text-center align-middle"><img class="board-conditions" /></td>
+              <td><b>♠</b></td>
+              <td class="board-east-spades"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♥</b></td>
+              <td class="board-west-hearts"></td>
+              <td><b class="text-danger">♥</b></td>
+              <td class="board-east-hearts"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♦</b></td>
+              <td class="board-west-diamonds"></td>
+              <td><b class="text-danger">♦</b></td>
+              <td class="board-east-diamonds"></td>
+            </tr>
+            <tr>
+              <td><b>♣</b></td>
+              <td class="board-west-clubs"></td>
+              <td><b>♣</b></td>
+              <td class="board-east-clubs"></td>
+            </tr>
+            <tr>
+              <td rowspan="4" colspan="2"></td>
+              <td><b>♠</b></td>
+              <td class="board-south-spades"></td>
+              <td rowspan="4" colspan="2"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♥</b></td>
+              <td class="board-south-hearts"></td>
+            </tr>
+            <tr>
+              <td><b class="text-danger">♦</b></td>
+              <td class="board-south-diamonds"></td>
+            </tr>
+            <tr>
+              <td><b>♣</b></td>
+              <td class="board-south-clubs"></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </template>
   </body>
 </html>