Subversion Repositories wpShopGermany4

Rev

Rev 7824 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<?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 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].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>