#4.2.10

- Feature: Abo Modul überarbeitet (Abos je Produkt / Vorverlängerungsaktionen)
- Feature: Mehrzeilige Produktvariablen
- Feature: Mehrere Tempaltes für Downloadplus PDF Anpassungen
- Feature: Zentrale Dokumente für Downloadplus
- Feature: Template je Variante für Downloadplus anpassbar
- Feature: parallele Erstellung eines Dokumentes ohne Vorlage (Briefbogenfunktion)

git-svn-id: https://[internal]/wordpress/plugins/wpsg4@7824 0d5edaf7-2b12-4e95-93f4-047927463d4b

1 files changed, 343 insertions, 0 deletions

diff --git a/views/mods/mod_downloadplus/settings_edit_templates.phtml b/views/mods/mod_downloadplus/settings_edit_templates.phtml
new file mode 100644
index 0000000..498aed4
--- /dev/null
+++ b/views/mods/mod_downloadplus/settings_edit_templates.phtml
@@ -0,0 +1,343 @@
+<?php

+

+	namespace wpsg;

+

+	$arTemplates = array_values($this->callMod('wpsg_mod_downloadplus', 'getTemplate'));

+

+	$arFontVue = [];

+	foreach ($this->view['wpsg_mod_downloadplus']['arFonts'] as $font_code => $font_label) {

+

+	    $arFontVue[] = ['code' => $font_code, 'label' => $font_label];

+

+    }

+

+?>

+

+<div id="wpsg_dp_templates_app">

+

+	<div class="head">

+

+        <a href="#" @click.prevent="addTemplate" title="<?php echo __('Neues Template anlegen', 'wpsg'); ?>">

+            <span class="wpsg-glyphicon glyphicon glyphicon-plus"></span>

+        </a>

+

+		<div v-if="arTemplates.length > 0">

+

+			<select v-model="template">

+				<option :value="null"><?php echo __('Bitte auswählen', 'wpsg'); ?></option>

+				<option v-for="(template, index) in arTemplates" :value="template">

+                    {{template.name}} ({{template.arField.length}} <?php echo __('Felder', 'wpsg'); ?><template v-if="template.defaulttemplate">, <?php echo __('Standard', 'wpsg'); ?></template>)

+                </option>

+			</select>

+

+		</div>

+		<div v-else>

+

+			<?php echo __('Keine Templates vorhanden', 'wpsg'); ?>

+

+		</div>

+

+        <a v-if="template" href="#" @click.prevent="removeTemplate" title="<?php echo __('Template löschen', 'wpsg'); ?>">

+            <span class="wpsg-glyphicon glyphicon glyphicon-trash"></span>

+        </a>

+

+	</div>

+

+	<div v-if="template" class="template">

+

+		<div class="form-group form-group-sm has-feedback">

+			<label class="col-sm-6 control-label" for="wpsg_mod_downloadplus_filename"><?php echo __('Name des Templates', 'wpsg'); ?></label>

+			<div class="col-sm-6">

+				<div class="wpsg_field_wrap wpsg_field_wrap_template_name">

+					<input type="text" v-model="template.name" />

+                    <div>

+                        <label class="control-label"><?php echo __('Standard: ', 'wpsg'); ?></label>

+                        <input type="checkbox" :checked="template.defaulttemplate" @click="setDefaultTemplate" />

+                    </div>

+				</div>

+			</div>

+			<div class="clearfix wpsg_clear"></div>

+		</div>

+

+		<table class="table table-body-striped wpsg_mod_downloadplus_fieldtable">

+            <thead>

+                <tr>

+                    <th class="col_bezeichnung">

+                        <a href="#" @click.prevent="addField" title="<?php echo __('Neues Feld', 'wpsg'); ?>">

+                            <span class="wpsg-glyphicon glyphicon glyphicon-plus"></span>

+                        </a>

+                    </th>

+                    <th class="col_x"><?php echo __('X', 'wpsg'); ?></th>

+                    <th class="col_y"><?php echo __('Y', 'wpsg'); ?></th>

+                    <th class="col_align"><?php echo __('Zentriert', 'wpsg'); ?></th>

+                    <th class="col_bg"><?php echo __('Hintergrund', 'wpsg'); ?></th>

+                    <th class="col_color"><?php echo __('Farbe', 'wpsg'); ?></th>

+                    <th class="col_alpha"><?php echo __('Deckkraft', 'wpsg'); ?></th>

+                    <th class="col_angle"><?php echo __('Winkel', 'wpsg'); ?></th>

+                    <th class="col_groesse"><?php echo __('Größe', 'wpsg'); ?></th>

+                    <th class="col_action"></th>

+                </tr>

+            </thead>

+			<tbody v-for="(field, field_index) in template.arField">

+                <tr>

+                    <td>#{{field_index + 1}}</td>

+                    <td>

+                        <input type="text" style="width:50px;" v-model="field.x" />

+                    </td>

+                    <td>

+                        <input type="text" style="width:50px;" v-model="field.y" />

+                    </td>

+                    <td class="col_align">

+                        <input class="wpsg_hideBarcode" type="checkbox" v-model="field.align" />

+                    </td>

+                    <td class="col_bg">

+                        <input class="wpsg_hideBarcode" type="checkbox" v-model="field.bg" />

+                    </td>

+                    <td class="col_color">

+                        <input class="wpsg_hideBarcode" type="text" style="width:75px;" v-model="field.color" />

+                    </td>

+                    <td class="col_alpha">

+                        <input class="wpsg_hideBarcode" type="text" style="width:50px;" v-model="field.alpha" />

+                    </td>

+                    <td>

+                        <input class="wpsg_hideBarcode" type="text" style="width:50px;" v-model="field.angle" />

+                    </td>

+                    <td>

+                        <select v-model="field.fontsize" style="width:100%;">

+                            <option v-for="size in [4,5,6,7,8,9,10,11,12,13,14,16,18,20,22,24,26,28,30,32,34]" :value="size">{{size}}</option>

+                        </select>

+                    </td>

+                    <td>

+                        <input type="checkbox" title="<?php echo __('Hier können Sie die Zeile deaktivieren/aktivieren.', 'wpsg'); ?>" value="1" v-model="field.aktiv" />

+                    </td>

+                </tr>

+                <tr>

+                    <td>

+                        <a href="#" @click.prevent="addField(field_index)" title="<?php echo __('Neues Feld davor einfügen', 'wpsg'); ?>">

+                            <span class="wpsg-glyphicon glyphicon glyphicon-plus"></span>

+                        </a>

+                    </td>

+                    <td class="col_freitext_label"><?php echo __('Freitext', 'wpsg'); ?>:</td>

+                    <td colspan="5" class="col_freitext">

+                        <input type="text" style="width:100%;" v-model="field.text" />

+                    </td>

+                    <td colspan="2">

+                        <select class="fontselect" v-model="field.font" style="width:100%;">

+                            <option v-for="(font, index_font) in arFont" :value="font.code">{{font.label}}</option>

+                        </select>

+                    </td>

+                    <td>

+                        <a href="#" @click.prevent="removeField(field_index)" title="<?php echo __('Feld löschen', 'wpsg'); ?>">

+                            <span class="wpsg-glyphicon glyphicon glyphicon-trash"></span>

+                        </a>

+                    </td>

+                </tr>

+            </tbody>

+		</table>

+

+        <div class="file_wrap">

+

+            <div class="uploadstate">

+                <template v-if="uploadstate.run">

+                    <img src="<?php echo WPSG_URL; ?>views/gfx/ajax-loader.gif" alt="<?php echo __('Bitte warten ...', 'wpsg'); ?>" />

+                    <span><?php echo __('Bitte warten', 'wpsg'); ?> ... <template v-if="uploadstate.proz">{{uploadstate.proz}} %</template></span>

+                </template>

+                <input v-else type="file" v-on:change="upload" />

+            </div>

+

+            <div v-if="template.file" class="file">

+                <span>{{template.file}}</span>

+                <a href="#" @click.prevent="removeFile" title="<?php echo __('Datei löschen', 'wpsg'); ?>">

+                    <span class="wpsg-glyphicon glyphicon glyphicon-trash"></span>

+                </a>

+            </div>

+

+        </div>

+

+	</div>

+

+    <textarea style="display:none;" name="template">{{arTemplates}}</textarea>

+

+	<br />

+

+</div>

+

+<style>

+

+	#wpsg_dp_templates_app .head { width:100%; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #DDDDDD; margin-bottom:1rem; padding-bottom:1rem; }

+	#wpsg_dp_templates_app .head select { width:300px; }

+    #wpsg_dp_templates_app .head div { flex-grow:1;  }

+    #wpsg_dp_templates_app .wpsg_field_wrap_template_name { display:flex; justify-content:space-between; align-items:center; padding-right:10px !important; }

+    #wpsg_dp_templates_app .wpsg_field_wrap_template_name > div { gap:1rem; display:flex; justify-content:flex-start; align-items:center; }

+    #wpsg_dp_templates_app .template td.col_bg,

+    #wpsg_dp_templates_app .template td.col_align { width:50px; text-align:center; }

+    #wpsg_dp_templates_app .template tr td { vertical-align:middle; }

+    #wpsg_dp_templates_app .template tr td:last-child { text-align:right; }

+    #wpsg_dp_templates_app .template tr td:last-child .wpsg-glyphicon { margin-right:0; }

+    #wpsg_dp_templates_app .uploadstate { display:flex; justify-content:flex-start; align-items:center; }

+    #wpsg_dp_templates_app .uploadstate > img { margin-right:1rem; }

+    #wpsg_dp_templates_app .file_wrap { display:flex; justify-content:space-between; align-items:center; }

+    #wpsg_dp_templates_app .file_wrap .file { display:flex; gap:1rem; justify-content:flex-end; align-items:center; }

+    #wpsg_dp_templates_app .file_wrap .file .wpsg-glyphicon { margin-right:8px; }

+

+</style>

+

+<script src="<?php echo WPSG_URL_CONTENT.'plugins/'.WPSG_FOLDERNAME.'/views/js/vue3.js'; ?>"></script>

+<script>

+

+	const Counter = {

+        data() {

+            return {

+            	arFont: <?php echo json_encode($arFontVue); ?>,

+                arTemplates: <?php echo json_encode($arTemplates); ?>,

+	            template: null,

+                uploadstate: {

+	                run: false,

+                    proz: null

+                }

+            }

+        },

+		methods: {

+

+        	addTemplate: function() {

+

+        		let new_template = {

+			        id: 0,

+					name: '<?php echo __('Template', 'wpsg'); ?>' + (this.arTemplates.length + 1),

+			        arField: [

+				        {

+				        	id: 0, x: 0, y:0, align:false, bg:false, color:'000000', alpha:1, angle:0, fontsize:22, aktiv:true,

+                            text: '', font: '', defaulttemplate: false, file: null, file_data: null

+				        }

+			        ],

+                    file: null,

+                    file_delete: false,

+                    file_data: false

+		        };

+

+        		this.arTemplates.push(new_template);

+        		this.template = new_template;

+

+	        },

+

+            removeTemplate: function() {

+

+        		if (!confirm('<?php echo __('Sind Sie sich sicher? Das ganze Template und alle Felder werden gelöscht.', 'wpsg'); ?>')) return;

+

+        		for (let i = 0; i < this.arTemplates.length; i ++) {

+

+        			if (this.arTemplates[i] === this.template) {

+

+        				this.arTemplates.splice(i, 1);

+

+                    }

+

+                }

+

+        		if (this.arTemplates.length > 0) this.template = this.arTemplates[0];

+        		else this.template = null;

+

+            },

+

+	        addField: function(field_index) {

+

+        		if (field_index === undefined) field_index = this.template.arField.length;

+

+        		this.template.arField.splice(field_index, 0,  {

+                    id: 0, x: 0, y:0, align:false, bg:false, color:'000000', alpha:1, angle:0, fontsize:22, aktiv:true,

+                    text: '', font: ''

+                })

+

+            },

+

+            removeField: function(field_index) {

+

+        		if (!confirm('<?php echo __('Sind Sie sich sicher, dass sie das Feld löschen möchten?', 'wpsg'); ?>')) return;

+

+        		this.template.arField.splice(field_index, 1);

+

+            },

+

+            setDefaultTemplate: function() {

+

+        		for (let i = 0; i < this.arTemplates.length; i ++) {

+

+        			this.arTemplates[i].defaulttemplate = false;

+

+                }

+

+        		this.template.defaulttemplate = true;

+

+            },

+

+            removeFile: function() {

+

+        		if (!confirm('<?php echo __('Sind Sie sich sicher?', 'wpsg'); ?>')) return;

+

+        		this.template.file_data = null;

+        		this.template.file = null;

+        		this.template.file_delete = true;

+

+            },

+

+            upload: function(e) {

+

+        		const files = e.target.files || e.dataTransfer.files;

+                if (!files.length) return;

+

+                if (files[0].type !== 'application/pdf') {

+

+                	alert('<?php echo __('Ungültier Dateityp', 'wpsg'); ?>');

+                	return;

+

+                }

+

+                this.uploadstate.run = true;

+                this.uploadstate.proz = null;

+

+                const reader = new FileReader();

+

+				reader.addEventListener("load", () => {

+

+					this.template.file = files[0].name

+                    this.template.file_data = reader.result;

+					this.template.file_delete = false;

+

+					this.uploadstate.run = false;

+

+					e.target.value = '';

+

+				}, false);

+

+				reader.addEventListener('progress', (event) => {

+

+                    if (event.lengthComputable) this.uploadstate.proz = Math.round((event.loaded / event.total) * 100);

+

+                });

+

+				reader.readAsDataURL(files[0]);

+

+            }

+

+		},

+        mounted() {

+

+        	for (let i = 0; i < this.arTemplates.length; i ++) {

+

+        		if (this.arTemplates[i].defaulttemplate === true) this.template = this.arTemplates[i];

+

+            }

+

+        },

+        watch: {

+        	'template.file': function(newValue, oldValue) {

+

+        		console.log(newValue);

+

+	        }

+        }

+	}

+

+	Vue.createApp(Counter).mount('#wpsg_dp_templates_app');

+

+</script>