From 3cf42832f5ba257bd554006d2525b3699643b1c3 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 24 Sep 2019 12:03:24 +0200
Subject: [PATCH] Add additional options to ocr form.

---
 app/templates/services/ocr.html.j2 | 110 +++++++++++++++++++++--------
 1 file changed, 81 insertions(+), 29 deletions(-)

diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index ee6b3906..d0125c36 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -113,40 +113,92 @@
             </div>
           </div>
           <div class="col s12"><p>&nbsp;</p></div>
-          <div class="col s8 m3">
-            <span class="card-title">Binarization</span>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
-          </div>
-          <div class="col s4 m1">
-            <div class="switch">
-              <label>
-                {{ new_ocr_job_form.binarization() }}
-                <span class="lever"></span>
-              </label>
+          <div class="col s12 m4">
+            <div class="row">
+              <div class="col s9">
+                <span class="card-title">Page range (N.a.)</span>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
+                <div class="row valign-wrapper">
+                  <div class="col s5">
+                    <div class="input-field">
+                      <input id="first-page" type="text" class="validate" value="0">
+                      <label for="first-page">From start</label>
+                    </div>
+                  </div>
+                  <div class="col s2">
+                    <p>&ndash;</p>
+                  </div>
+                  <div class="col s5">
+                    <div class="input-field">
+                      <input id="last-page" type="text" class="validate" value="0">
+                      <label for="last-page">Before end</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col s3">
+                <div class="switch">
+                  <label>
+                    <input type="checkbox" disabled>
+                    <span class="lever"></span>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="col s8 m3">
-            <span class="card-title">Page split (N.a.)</span>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
-          </div>
-          <div class="col s4 m1">
-            <div class="switch">
-              <label>
-                <input type="checkbox" disabled>
-                <span class="lever"></span>
-              </label>
+          <div class="col s12 m4">
+            <div class="row">
+              <div class="col s9">
+                <span class="card-title">Page split (N.a.)</span>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
+                <p class="range-field">
+                  <input type="range" id="page-split" min="30" max="70" value="0">
+                </p>
+              </div>
+              <div class="col s3">
+                <div class="switch">
+                  <label>
+                    <input type="checkbox" disabled>
+                    <span class="lever"></span>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="col s8 m3">
-            <span class="card-title">Page rotation (N.a.)</span>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
+          <div class="col s12 m4">
+            <div class="row">
+              <div class="col s9">
+                <span class="card-title">Page rotation (N.a.)</span>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
+                <p class="range-field">
+                  <input type="range" id="page-split" min="0" max="360" value="0">
+                </p>
+              </div>
+              <div class="col s3">
+                <div class="switch">
+                  <label>
+                    <input type="checkbox" disabled>
+                    <span class="lever"></span>
+                  </label>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="col s4 m1">
-            <div class="switch">
-              <label>
-                <input type="checkbox" disabled>
-                <span class="lever"></span>
-              </label>
+          <div class="col s12"></div>
+          <div class="col s12 m4">
+            <div class="row">
+              <div class="col s9">
+                <span class="card-title">Binarization</span>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempora invidunt ut</p>
+              </div>
+              <div class="col s3">
+                <div class="switch">
+                  <label>
+                    {{ new_ocr_job_form.binarization() }}
+                    <span class="lever"></span>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
         </div>