summaryrefslogtreecommitdiff
path: root/print/templates
diff options
context:
space:
mode:
Diffstat (limited to 'print/templates')
-rw-r--r--print/templates/color_swatch.html51
-rw-r--r--print/templates/footer.html7
-rw-r--r--print/templates/headline.html12
-rw-r--r--print/templates/index.html32
-rw-r--r--print/templates/operator_detailedview.html77
-rw-r--r--print/templates/operator_overview.html33
-rw-r--r--print/templates/print_detail.html28
-rw-r--r--print/templates/print_overview.html42
-rw-r--r--print/templates/ui.html33
9 files changed, 315 insertions, 0 deletions
diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html
new file mode 100644
index 00000000..21cc0c21
--- /dev/null
+++ b/print/templates/color_swatch.html
@@ -0,0 +1,51 @@
+
+ {% if printview != 'detailedview' %}
+ <div class="color-swatch">
+ <div class="swatch-info">
+ <svg width="100%" height="100%" class="color-swatch-svg" xmlns="http://www.w3.org/2000/svg">
+ <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" stroke-width="1px" width="100%" height="100%" />
+ <text fill="rgb{{ color_block.color.font_color }}">
+ <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: </tspan><tspan data-field-name="color-{{ color_block.color.hex_digits }}">{{ color_block.color.thread_name }}</tspan>
+ {# We don't want to see rgb if we have more than 7 colorSwatches #}
+ {% if color_blocks|length < 7 %}
+ <tspan dy="1.2em" x="2mm" class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>
+ {% endif %}
+ {# We don't want to see thread_used if we have more than 7 colorSwatches to show #}
+ {% if color_blocks|length < 7 %}
+ <tspan dy="1.2em" x="2mm" class="swatch-thread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan>
+ {% endif %}
+ {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #}
+ {% if color_blocks|length < 49 %}
+ <tspan dy="1.2em" x="2mm" class="swatch-stitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</tspan>
+ {% endif %}
+ {# We don't want to see stops and trims if we have more than 13 colorSwatches to show #}
+ {% if color_blocks|length < 13 %}
+ <tspan dy="1.2em" x="2mm" class="swatch-stops">{{ _('# stops') }}: {{ color_block.num_stops }}</tspan>
+ <tspan dy="1.2em" x="2mm" class="swatch-trims">{{ _('# trims') }}: {{ color_block.num_trims }}</tspan>
+ {% endif %}
+ </text>
+ </svg>
+ </div>
+ </div>
+
+ {% else %}
+
+ <div class="color-swatch">
+ <div class="swatch-info">
+ <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg">
+ <rect fill="rgb{{ color_block.color.rgb }}" stroke="rgb(192, 192, 192)" width="40mm" height="100%" />
+ </svg>
+ <div class="color-info">
+ <div>
+ <p><span class="color-name">{{ _('Color') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p>
+ <p><span class="color-rgb">{{ _('rgb') }}:</span><span>{{ color_block.color.rgb }}</span></p>
+ <p><span class="swatch-thread">{{ _('thread used') }}:</span><span>{{ color_block.color.thread_description }}</span></p>
+ <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span>{{ color_block.num_stitches }}</span></p>
+ <p><span class="swatch-stops">{{ _('# stops') }}:</span><span>{{ color_block.num_stops }}</span></p>
+ <p><span class="swatch-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {%endif %}
diff --git a/print/templates/footer.html b/print/templates/footer.html
new file mode 100644
index 00000000..0c043e2f
--- /dev/null
+++ b/print/templates/footer.html
@@ -0,0 +1,7 @@
+<footer>
+ <p class="num_pages">{{ _('Page') }} <span class="page-num"></span>/<span class="total-page-num"></span></p>
+ <p>Proudly generated with <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></p>
+</footer>
+
+
+
diff --git a/print/templates/headline.html b/print/templates/headline.html
new file mode 100644
index 00000000..649c02ea
--- /dev/null
+++ b/print/templates/headline.html
@@ -0,0 +1,12 @@
+<figure class="brandlogo">
+ <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}">
+</figure>
+<div class="headline">
+ <div class="pageTitle">
+ <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="job-title">{{ job.title }}</span></h1>
+ <p class="header-field" data-label="{{ _('CLIENT') }}:" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name">{{ client }}</p>
+ <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order">{{ purchase_order }}</p>
+ </div>
+
+ <div class="currentDate">{{ date|datetimeformat(_('%Y.%m.%d')) }}</div>
+</div>
diff --git a/print/templates/index.html b/print/templates/index.html
new file mode 100644
index 00000000..21ca74ab
--- /dev/null
+++ b/print/templates/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Ink/Stitch Print Preview</title>
+ <script src="resources/jquery-3.3.1.min.js"></script>
+ <script src="resources/inkstitch.js"></script>
+ <link rel="stylesheet" href="resources/style.css" />
+</head>
+<body>
+ {% include 'ui.html' %}
+
+{# client overview #}
+ <div class="page client-overview" style="display: {{ 'block' if view.client_overview else 'none' }}">{% include 'print_overview.html' %}</div>
+
+{# client detailedview #}
+ {% set printview = 'detailedview' %}
+ {% for color_block in color_blocks %}
+ {% set outer_loop = loop %}
+ <div class="page client-detailedview" style="display: {{ 'block' if view.client_detailedview else 'none' }}">{% include 'print_detail.html' %}</div>
+ {% endfor %}
+
+{# operator overview #}
+ <div class="page operator-overview" style="display: {{ 'block' if view.operator_overview else 'none' }}">{% include 'operator_overview.html' %}</div>
+
+{# operator detailed view #}
+ {% for color_block_part in color_blocks | batch(13) %}
+ {% set outer_loop = loop %}
+ <div class="page operator-detailedview" style="display: {{ 'block' if view.operator_detailedview else 'none' }}">{% include 'operator_detailedview.html' %}</div>
+ {% endfor %}
+
+</body>
+</html>
diff --git a/print/templates/operator_detailedview.html b/print/templates/operator_detailedview.html
new file mode 100644
index 00000000..633b9286
--- /dev/null
+++ b/print/templates/operator_detailedview.html
@@ -0,0 +1,77 @@
+ <header>
+ {% include 'headline.html' %}
+ </header>
+
+ <main>
+ <div class="operator-job-info">
+ <div class="job-headline">
+ <p class="operator-svg operator-colorswatch">{# svg color #}</p>
+ <p>{# svg preview #}</p>
+ <p>{{ _('Color') }}</p>
+ <p>{{ _('Thread Consumption') }}</p>
+ <p>{{ _('Stops and Trims') }}</p>
+ <p>{{ _('Estimated Time') }}</p>
+ </div>
+ {% if outer_loop.index == 1 %}
+ <div>
+ <p>
+ <span>##</span>
+ </p>
+ <p class="operator-svg operator-preview">
+ {{ svg_overview|safe }}
+ </p>
+ <p>
+ <span>{{ _('Unique Colors') }}: {{ job.num_colors }}</span>
+ <span>{{ _('Color Blocks') }}: {{ job.num_color_blocks }}</span>
+ </p>
+ <p>
+ <span>{{ _('Design box size') }}: {{ job.dimensions }}</span>
+ <span>{{ _('Total thread used') }}: {{job.estimated_thread }}</span>
+ <span>{{ _('Total stitch count') }}: {{job.num_stitches }}</span>
+ </p>
+ <p>
+ <span>{{ _('Total nr stops') }}: {{ job.num_stops }}</span>
+ <span>{{ _('Total nr trims') }}: {{ job.num_trims }}</span>
+ </p>
+ <p>
+ <span>{{ job.estimated_time }}</span>
+ </p>
+ </div>
+ {% endif %}
+ {% for color_block in color_block_part %}
+
+ <div style="display: table-row;">
+ <p class="operator-svg operator-colorswatch">
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <rect fill="rgb{{ color_block.color.rgb }}" width="15mm" height="100%" />
+ <text fill="rgb{{ color_block.color.font_color }}">
+ <tspan x="4mm" y="7.5mm" class="color-index">#{{ loop.index + outer_loop.index0 * 13 }}</tspan>
+ </text>
+ </svg>
+ </p>
+ <p class="operator-svg operator-preview">
+ {{ color_block.svg_preview|safe }}
+ </p>
+ <p>
+ <span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span>
+ <span>{{ color_block.color.rgb }}</span>
+ </p>
+ <p>
+ <span>{{ _('thread used') }}: {{ color_block.color.thread_description }}</span>
+ <span>{{ _('# stitches') }}: {{ color_block.num_stitches }}</span>
+ </p>
+ <p>
+ <span>{{ _('# stops') }}: {{ color_block.num_stops }}</span>
+ <span>{{ _('# trims') }}: {{ color_block.num_trims }}</span>
+ </p>
+ <p>
+ <span>{{ color_block.estimatedtime }}</span>
+ </p>
+ </div>
+ {% endfor %}
+ </div>
+ </main>
+
+ {% include 'footer.html' %}
+
+
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
new file mode 100644
index 00000000..25048ab7
--- /dev/null
+++ b/print/templates/operator_overview.html
@@ -0,0 +1,33 @@
+ <header>
+ {% include 'headline.html' %}
+ <div class="job-details">
+ <div>
+ <div class="table">
+ <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p>
+ <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p>
+ <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p>
+ <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p>
+ </div>
+ </div>
+ <div>
+ <div class="table">
+ <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p>
+ <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p>
+ <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p>
+ </div>
+ </div>
+ <div>
+ <div class="table">
+ <p><span>{{ _('Job estimated time') }}:</span></p>
+ <p><span>{{ job.estimated_time }}</span></p>
+ </div>
+ </div>
+ </div>
+ </header>
+ <main>
+ <figure class="inksimulation operator" style="height: 210mm;">
+ {{ svg_overview|safe }}
+ <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+ </figure>
+ </main>
+ {% include 'footer.html' %}
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
new file mode 100644
index 00000000..18a70bba
--- /dev/null
+++ b/print/templates/print_detail.html
@@ -0,0 +1,28 @@
+ <header>
+ {% include 'headline.html' %}
+ <div class="job-details">
+ <div>
+ <div class="table">
+ <p><span>{{ _('COLOR') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="Enter thread name...">{{ color_block.color.thread_name }}</span></p>
+ </div>
+ </div>
+ <div>
+ <div class="table">
+ <p><span>{{ _('Estimated time') }}:</span></p>
+ <p><span>{{ color_block.estimatedtime }}</span></p>
+ </div>
+ </div>
+ </div>
+ </header>
+ <main>
+ <figure class="inksimulation">
+ {{color_block.svg_preview|safe}}
+ <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+ </figure>
+
+ <div class="color-palette detailed">
+ {% include 'color_swatch.html' %}
+ </div>
+ </main>
+
+ {% include 'footer.html' %}
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
new file mode 100644
index 00000000..f5632ceb
--- /dev/null
+++ b/print/templates/print_overview.html
@@ -0,0 +1,42 @@
+ <header>
+ {% include 'headline.html' %}
+ <div class="job-details">
+ <div>
+ <div class="table">
+ <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p>
+ <p><span>{{ _('Color Blocks') }}:</span><span>{{ job.num_color_blocks }}</span></p>
+ <p><span>{{ _('Total nr stops') }}:</span><span>{{ job.num_stops }}</span></p>
+ <p><span>{{ _('Total nr trims') }}:</span><span>{{ job.num_trims }}</span></p>
+ </div>
+ </div>
+ <div>
+ <div class="table">
+ <p><span>{{ _('Design box size') }}:</span><span>{{ job.dimensions }}</span></p>
+ <p><span>{{ _('Total stitch count') }}:</span><span>{{job.num_stitches }}</span></p>
+ <p><span>{{ _('Total thread used') }}:</span><span>{{job.estimated_thread }}</span></p>
+ </div>
+ </div>
+ <div>
+ <div class="table">
+ <p><span>{{ _('Job estimated time') }}:</span></p>
+ <p><span>{{ job.estimated_time }}</span></p>
+ </div>
+ </div>
+ </div>
+ </header>
+ <main class="client-overview-main">
+ <figure class="inksimulation">
+ {{ svg_overview|safe }}
+ <figcaption>{{ _('Scale') }} <span>{{ svg_scale }}</span></figcaption>
+ </figure>
+
+ <div class="color-palette">
+ {% for color_block in color_blocks %}
+ {% include 'color_swatch.html' %}
+ {% endfor %}
+
+ </div>
+ <div class="signature">{{ _('Client Signature') }}</div>
+ </main>
+
+ {% include 'footer.html' %}
diff --git a/print/templates/ui.html b/print/templates/ui.html
new file mode 100644
index 00000000..078f1a4c
--- /dev/null
+++ b/print/templates/ui.html
@@ -0,0 +1,33 @@
+ <div class="ui">
+ <p class="header">{{ _('Ink/Stitch Print Preview') }}</p>
+ <div class="buttons">
+ <button class="print">{{ _('Print') }}</button>
+ <button class="settings">{{ _('Settings') }}</button>
+ <button class="close">{{ _('Close') }}</button>
+ </div>
+ <div id="errors">
+ {{ _('⚠ lost connection to Ink/Stitch') }}
+ </div>
+ </div>
+
+ <div id="settings-ui">
+ <p id="close-settings">X</p>
+ <h1>{{ _('Settings') }}</h1>
+ <div>
+ <p>{{ _('Printing Size') }}:
+ <select id="printing-size">
+ <option value="letter" selected="selected">Letter</option>
+ <option value="a4">A4</option>
+ </select>
+ </p>
+ </div>
+ <div>
+ <fieldset>
+ <legend>{{ ('Print Layouts') }}:</legend>
+ <p><input type="checkbox" id="client-overview" {{ 'checked' if view.client_overview else '' }}><label for="client-overview">Client Overview</label></p>
+ <p><input type="checkbox" id="client-detailedview" {{ 'checked' if view.client_detailedview else '' }}><label for="client-detailedview">Client Detailed View</label></p>
+ <p><input type="checkbox" id="operator-overview" {{ 'checked' if view.operator_overview else '' }}><label for="operator-overview">Operator Overview</label></p>
+ <p><input type="checkbox" id="operator-detailedview" {{ 'checked' if view.operator_detailedview else '' }}><label for="operator-overview">Operator Detailed View</label></p>
+ </fieldset>
+ </div>
+ </div>