From c5cc3d0394c6583f6ebb459ea781900e1006dbb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Fri, 21 Aug 2015 10:50:33 +0200
Subject: [PATCH] DRY - let's use some snippets in the webcam settings

Makes the dialog components reusable for our wizard. Should probably
be done throughout...
---
 .../templates/corewizard_webcam_wizard.jinja2 |  5 +-
 .../settings/webcam/ffmpegBitrate.jinja2      |  9 +++
 .../settings/webcam/ffmpegPath.jinja2}        |  0
 .../settings/webcam/ffmpegThreads.jinja2}     |  0
 .../settings/webcam/watermark.jinja2          |  7 ++
 .../settings/webcam/webcamOrientation.jinja2  | 17 ++++
 .../settings/webcam/webcamSnapshotUrl.jinja2} |  9 ---
 .../settings/webcam/webcamStreamUrl.jinja2    |  9 +++
 .../templates/dialogs/settings/webcam.jinja2  | 80 ++-----------------
 9 files changed, 52 insertions(+), 84 deletions(-)
 create mode 100644 src/octoprint/templates/_snippets/settings/webcam/ffmpegBitrate.jinja2
 rename src/octoprint/templates/{dialogs/_snippets/configureffmpeg.jinja2 => _snippets/settings/webcam/ffmpegPath.jinja2} (100%)
 rename src/octoprint/templates/{dialogs/_snippets/changepassword.jinja2 => _snippets/settings/webcam/ffmpegThreads.jinja2} (100%)
 create mode 100644 src/octoprint/templates/_snippets/settings/webcam/watermark.jinja2
 create mode 100644 src/octoprint/templates/_snippets/settings/webcam/webcamOrientation.jinja2
 rename src/octoprint/templates/{dialogs/_snippets/configurewebcamurls.jinja2 => _snippets/settings/webcam/webcamSnapshotUrl.jinja2} (50%)
 create mode 100644 src/octoprint/templates/_snippets/settings/webcam/webcamStreamUrl.jinja2

diff --git a/src/octoprint/plugins/corewizard/templates/corewizard_webcam_wizard.jinja2 b/src/octoprint/plugins/corewizard/templates/corewizard_webcam_wizard.jinja2
index 006d0938..aa5a8cf7 100644
--- a/src/octoprint/plugins/corewizard/templates/corewizard_webcam_wizard.jinja2
+++ b/src/octoprint/plugins/corewizard/templates/corewizard_webcam_wizard.jinja2
@@ -26,7 +26,8 @@
 </p>{% endtrans %}
 
 <form class="form-horizontal" data-bind="with: settingsViewModel">
-    {% include "dialogs/_snippets/configurewebcamurls.jinja2" %}
+    {% include "_snippets/settings/webcam/webcamStreamUrl.jinja2" %}
+    {% include "_snippets/settings/webcam/webcamSnapshotUrl.jinja2" %}
 </form>
 
 <h4>{{ _('Timelapse Recordings') }}</h4>
@@ -37,5 +38,5 @@
 </p>{% endtrans %}
 
 <form class="form-horizontal" data-bind="with: settingsViewModel">
-    {% include "dialogs/_snippets/configureffmpeg.jinja2" %}
+    {% include "_snippets/settings/webcam/ffmpegPath.jinja2" %}
 </form>
diff --git a/src/octoprint/templates/_snippets/settings/webcam/ffmpegBitrate.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/ffmpegBitrate.jinja2
new file mode 100644
index 00000000..4b97d7ef
--- /dev/null
+++ b/src/octoprint/templates/_snippets/settings/webcam/ffmpegBitrate.jinja2
@@ -0,0 +1,9 @@
+<div class="control-group" title="{{ _('Bitrate to use for encoding the timelapse video') }}">
+    <label class="control-label" for="settings-webcamBitrate">{{ _('Timelapse bitrate') }}</label>
+    <div class="controls">
+        <div class="input-append">
+            <input type="text" class="input-mini text-right" data-bind="value: webcam_bitrate" id="settings-webcamBitrate">
+            <span class="add-on">bit/s</span>
+        </div>
+    </div>
+</div>
diff --git a/src/octoprint/templates/dialogs/_snippets/configureffmpeg.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/ffmpegPath.jinja2
similarity index 100%
rename from src/octoprint/templates/dialogs/_snippets/configureffmpeg.jinja2
rename to src/octoprint/templates/_snippets/settings/webcam/ffmpegPath.jinja2
diff --git a/src/octoprint/templates/dialogs/_snippets/changepassword.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/ffmpegThreads.jinja2
similarity index 100%
rename from src/octoprint/templates/dialogs/_snippets/changepassword.jinja2
rename to src/octoprint/templates/_snippets/settings/webcam/ffmpegThreads.jinja2
diff --git a/src/octoprint/templates/_snippets/settings/webcam/watermark.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/watermark.jinja2
new file mode 100644
index 00000000..30464366
--- /dev/null
+++ b/src/octoprint/templates/_snippets/settings/webcam/watermark.jinja2
@@ -0,0 +1,7 @@
+<div class="control-group">
+    <div class="controls">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="checked: webcam_watermark" id="settings-webcamWatermark"> {{ _('Enable OctoPrint watermark in timelapse movies') }}
+        </label>
+    </div>
+</div>
diff --git a/src/octoprint/templates/_snippets/settings/webcam/webcamOrientation.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/webcamOrientation.jinja2
new file mode 100644
index 00000000..7fccac19
--- /dev/null
+++ b/src/octoprint/templates/_snippets/settings/webcam/webcamOrientation.jinja2
@@ -0,0 +1,17 @@
+<div class="control-group">
+    <div class="controls">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="checked: webcam_flipH" id="settings-webcamFlipH"> {{ _('Flip webcam horizontally') }}
+        </label>
+    </div>
+    <div class="controls">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="checked: webcam_flipV" id="settings-webcamFlipV"> {{ _('Flip webcam vertically') }}
+        </label>
+    </div>
+    <div class="controls">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="checked: webcam_rotate90" id="settings-webcamRotate90"> {{ _('Rotate webcam 90 degrees counter clockwise') }}
+        </label>
+    </div>
+</div>
diff --git a/src/octoprint/templates/dialogs/_snippets/configurewebcamurls.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/webcamSnapshotUrl.jinja2
similarity index 50%
rename from src/octoprint/templates/dialogs/_snippets/configurewebcamurls.jinja2
rename to src/octoprint/templates/_snippets/settings/webcam/webcamSnapshotUrl.jinja2
index c2ca6c01..b0b7ae61 100644
--- a/src/octoprint/templates/dialogs/_snippets/configurewebcamurls.jinja2
+++ b/src/octoprint/templates/_snippets/settings/webcam/webcamSnapshotUrl.jinja2
@@ -1,12 +1,3 @@
-<div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
-    <label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
-    <div class="controls">
-        <div class="input-append">
-            <input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
-            <button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
-        </div>
-    </div>
-</div>
 <div class="control-group" title="{{ _('URL to use for retrieving webcam snapshot images for timelapse creation') }}">
     <label class="control-label" for="settings-webcamSnapshotUrl">{{ _('Snapshot URL') }}</label>
     <div class="controls">
diff --git a/src/octoprint/templates/_snippets/settings/webcam/webcamStreamUrl.jinja2 b/src/octoprint/templates/_snippets/settings/webcam/webcamStreamUrl.jinja2
new file mode 100644
index 00000000..cc359a1f
--- /dev/null
+++ b/src/octoprint/templates/_snippets/settings/webcam/webcamStreamUrl.jinja2
@@ -0,0 +1,9 @@
+<div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
+    <label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
+    <div class="controls">
+        <div class="input-append">
+            <input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
+            <button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
+        </div>
+    </div>
+</div>
diff --git a/src/octoprint/templates/dialogs/settings/webcam.jinja2 b/src/octoprint/templates/dialogs/settings/webcam.jinja2
index 3357690f..74ddf291 100644
--- a/src/octoprint/templates/dialogs/settings/webcam.jinja2
+++ b/src/octoprint/templates/dialogs/settings/webcam.jinja2
@@ -1,87 +1,21 @@
 <h3>{{ _('Webcam') }}</h3>
 
 <form class="form-horizontal">
-    <div class="control-group" title="{{ _('URL to embed into the UI for live viewing of the webcam stream') }}">
-        <label class="control-label" for="settings-webcamStreamUrl">{{ _('Stream URL') }}</label>
-        <div class="controls">
-            <div class="input-append">
-                <input type="text" class="input-block-level" data-bind="value: webcam_streamUrl, valueUpdate: 'afterkeydown'" id="settings-webcamStreamUrl">
-                <button class="btn" type="button" data-bind="click: testWebcamStreamUrl, enable: webcam_streamUrl(), css: {disabled: !webcam_streamUrl()}">{{ _('Test') }}</button>
-            </div>
-        </div>
-    </div>
-
-    <div class="control-group">
-        <div class="controls">
-            <label class="checkbox">
-                <input type="checkbox" data-bind="checked: webcam_flipH" id="settings-webcamFlipH"> {{ _('Flip webcam horizontally') }}
-            </label>
-        </div>
-        <div class="controls">
-            <label class="checkbox">
-                <input type="checkbox" data-bind="checked: webcam_flipV" id="settings-webcamFlipV"> {{ _('Flip webcam vertically') }}
-            </label>
-        </div>
-        <div class="controls">
-            <label class="checkbox">
-                <input type="checkbox" data-bind="checked: webcam_rotate90" id="settings-webcamRotate90"> {{ _('Rotate webcam 90 degrees counter clockwise') }}
-            </label>
-        </div>
-    </div>
+    {% include "_snippets/settings/webcam/webcamStreamUrl.jinja2" %}
+    {% include "_snippets/settings/webcam/webcamOrientation.jinja2" %}
 </form>
 
 <h3>{{ _('Timelapse Recordings') }}</h3>
 
 <form class="form-horizontal">
-    <div class="control-group" title="{{ _('URL to use for retrieving webcam snapshot images for timelapse creation') }}">
-        <label class="control-label" for="settings-webcamSnapshotUrl">{{ _('Snapshot URL') }}</label>
-        <div class="controls">
-            <div class="input-append">
-                <input type="text" class="input-block-level" data-bind="value: webcam_snapshotUrl, valueUpdate: 'afterkeydown'" id="settings-webcamSnapshotUrl">
-                <button class="btn" type="button" data-bind="click: testWebcamSnapshotUrl, enable: webcam_snapshotUrl(), css: {disabled: !webcam_snapshotUrl()}">{{ _('Test') }}</button>
-            </div>
-        </div>
-    </div>
-
-    <div class="control-group" title="{{ _('Full path to the FFMPEG binary') }}" data-bind="css: {error: webcam_ffmpegPathBroken, success: webcam_ffmpegPathOk}">
-        <label class="control-label" for="settings-webcamFfmpegPath">{{ _('Path to FFMPEG') }}</label>
-        <div class="controls">
-            <div class="input-append">
-                <input type="text" class="input-block-level" data-bind="value: webcam_ffmpegPath, valueUpdate: 'afterkeydown'" id="settings-webcamFfmpegPath">
-                <button class="btn" type="button" data-bind="click: testWebcamFfmpegPath, enable: webcam_ffmpegPath(), css: {disabled: !webcam_ffmpegPath()}">{{ _('Test') }}</button>
-            </div>
-            <span class="help-block" data-bind="visible: webcam_ffmpegPathBroken() || webcam_ffmpegPathOk(), text: webcam_ffmpegPathText"></span>
-        </div>
-    </div>
-
-    <div class="control-group">
-        <div class="controls">
-            <label class="checkbox">
-                <input type="checkbox" data-bind="checked: webcam_watermark" id="settings-webcamWatermark"> {{ _('Enable OctoPrint watermark in timelapse movies') }}
-            </label>
-        </div>
-    </div>
-
+    {% include "_snippets/settings/webcam/webcamSnapshotUrl.jinja2" %}
+    {% include "_snippets/settings/webcam/ffmpegPath.jinja2" %}
+    {% include "_snippets/settings/webcam/watermark.jinja2" %}
     <div>
         <div><small><a href="#" class="muted" onclick="$(this).children().toggleClass('icon-caret-right icon-caret-down').parent().parent().parent().next().slideToggle('fast')"><i class="icon-caret-right"></i> {{ _('Advanced options') }}</a></small></div>
         <div class="hide">
-            <div class="control-group" title="{{ _('Bitrate to use for encoding the timelapse video') }}">
-                <label class="control-label" for="settings-webcamBitrate">{{ _('Timelapse bitrate') }}</label>
-                <div class="controls">
-                    <div class="input-append">
-                        <input type="text" class="input-mini text-right" data-bind="value: webcam_bitrate" id="settings-webcamBitrate">
-                        <span class="add-on">bit/s</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="control-group" title="{{ _('Number of FFMPEG encoding threads') }}">
-                <label class="control-label" for="settings-webcam_ffmpegThreads">{{ _('FFMPEG threads') }}</label>
-                <div class="controls">
-                    <input class="input-mini" data-bind="value: webcam_ffmpegThreads" id="settings-webcamFfmpegThreads" type="number" step="1" min="1">
-                </div>
-            </div>
+            {% include "_snippets/settings/webcam/ffmpegBitrate.jinja2" %}
+            {% include "_snippets/settings/webcam/ffmpegThreads.jinja2" %}
         </div>
     </div>
-
 </form>