Rev 7824 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<?phpnamespace 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 label-copy" for="wpsg_mod_downloadplus_filename"><a href="#" title="<?php echo __('Template kopieren', 'wpsg'); ?>" @click="copyTemplate()"><span class="wpsg-glyphicon glyphicon glyphicon-copy"></span></a><span><?php echo __('Name des Templates', 'wpsg'); ?></span></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; }#wpsg_dp_templates_app .label-copy { display:flex; justify-content:space-between; }#wpsg_dp_templates_app .label-copy .glyphicon { font-size:14px; }</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;},copyTemplate: function() {if (!confirm('<?php echo __('Sind Sie sich sicher, dass sie das Template kopieren möchten?', 'wpsg'); ?>')) return false;let new_template = JSON.parse(JSON.stringify(this.template));new_template.name += ' (Kopie)';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].namethis.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>