From d4e39d3d26ec6c975d7e02ac2ebae6549436d537 Mon Sep 17 00:00:00 2001
From: "Gerber, Mike" <mike.gerber@sbb.spk-berlin.de>
Date: Fri, 12 Jun 2020 13:46:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20dinglehopper:=20Display=20segmen?=
 =?UTF-8?q?t=20id=20in=20the=20corresponding=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 qurator/dinglehopper/cli.py                   | 4 ++--
 qurator/dinglehopper/templates/report.html.j2 | 6 +-----
 qurator/dinglehopper/templates/report.html.js | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/qurator/dinglehopper/cli.py b/qurator/dinglehopper/cli.py
index 8e18b26..2099c57 100644
--- a/qurator/dinglehopper/cli.py
+++ b/qurator/dinglehopper/cli.py
@@ -71,8 +71,8 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
     return \
         '''
         <div class="row">
-           <div class="col-md-6 gt">{}</div>
-           <div class="col-md-6 ocr">{}</div>
+           <div class="col-md-6 gt"><div class="status-box"></div>{}</div>
+           <div class="col-md-6 ocr"><div class="status-box"></div>{}</div>
         </div>
         '''.format(gtx, ocrx)
 
diff --git a/qurator/dinglehopper/templates/report.html.j2 b/qurator/dinglehopper/templates/report.html.j2
index f7b2efb..f829ef8 100644
--- a/qurator/dinglehopper/templates/report.html.j2
+++ b/qurator/dinglehopper/templates/report.html.j2
@@ -26,7 +26,7 @@
       border: 2px solid;
       border-radius: 5px;
     }
-   #status-box {
+   .status-box {
       position: fixed;
       background: grey;
       color: white;
@@ -39,10 +39,6 @@
 
 
 
-<div id="status-box"> foo</div>
-
-
-
 <div class="container">
 
 {{ gt }}<br>
diff --git a/qurator/dinglehopper/templates/report.html.js b/qurator/dinglehopper/templates/report.html.js
index 01f5323..0baaa30 100644
--- a/qurator/dinglehopper/templates/report.html.js
+++ b/qurator/dinglehopper/templates/report.html.js
@@ -8,12 +8,12 @@ $(document).ready(function() {
         $('.' + c).addClass('diff-highlight');
 
         segment_id = $(this).attr('data-segment-id');
-        $('#status-box').text(segment_id);
+        $(this).closest('div').find('.status-box').text(segment_id);
     });
     $('.diff').mouseout(function() {
         let c = find_diff_class($(this).attr('class'));
         $('.' + c).removeClass('diff-highlight');
 
-        $('#status-box').text('');
+        $(this).closest('div').find('.status-box').text('');
     });
 });