OpenXE/www/lib/versandarten/content/versandarten_dhlversenden.tpl

<div class="container-fluid" id="sendcloudapp">
  <form action="" method="post" v-on:submit.prevent="submit">
    <div class="row">
      <div v-for="msg in messages" :class="msg.class">{{msg.text}}</div>
      <div>
        <h1>{|Paketmarken Drucker f&uuml;r|} SendCloud</h1>
      </div>
      <div class="col-md-4">
        <h2>{|Empf&auml;nger|}</h2>
        <table>
          <tr>
            <td>{|Name|}:</td>
            <td><input type="text" size="36" v-model="form.name"></td>
          </tr>
          <tr>
            <td>{|Name 2|}:</td>
            <td><input type="text" size="36" v-model="form.name2"></td>
          </tr>
          <tr>
            <td>{|Name 3|}:</td>
            <td><input type="text" size="36" v-model="form.name3"></td>
          </tr>
          <tr>
            <td>{|Strasse/Hausnummer|}:</td>
            <td>
              <input type="text" size="30" v-model="form.strasse">
              <input type="text" size="5" v-model="form.hausnummer">
            </td>
          </tr>
          <tr>
            <td>{|PLZ/Ort|}:</td>
            <td><input type="text" size="5" v-model="form.plz">
              <input type="text" size="30" v-model="form.ort">
            </td>
          </tr>
          <tr>
            <td>{|Bundesland|}:</td>
            <td><input type="text" size="36" v-model="form.bundesland"></td>
          </tr>
          <tr>
            <td>{|Land|}:</td>
            <td>
              <select v-model="form.land">
                <option v-for="(value, key) in countries" :value="key">{{value}}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{|E-Mail|}:</td>
            <td><input type="text" size="36" v-model="form.email"></td>
          </tr>
          <tr>
            <td>{|Telefon|}:</td>
            <td><input type="text" size="36" v-model="form.telefon"></td>
          </tr>

        </table>
      </div>
      <div class="col-md-4" v-once>
        <h2>vollst. Adresse</h2>
        <table>
          <tr>
            <td>{|Name|}</td>
            <td>{{form.name}}</td>
          </tr>
          <tr>
            <td>{|Ansprechpartner|}</td>
            <td>{{form.ansprechpartner}}</td>
          </tr>
          <tr>
            <td>{|Abteilung|}</td>
            <td>{{form.abteilung}}</td>
          </tr>
          <tr>
            <td>{|Unterabteilung|}</td>
            <td>{{form.unterabteilung}}</td>
          </tr>
          <tr>
            <td>{|Adresszusatz|}</td>
            <td>{{form.adresszusatz}}</td>
          </tr>
          <tr>
            <td>{|Strasse|}</td>
            <td>{{form.streetwithnumber}}</td>
          </tr>
          <tr>
            <td>{|PLZ/Ort|}</td>
            <td>{{form.plz}} {{form.ort}}</td>
          </tr>
          <tr>
            <td>{|Bundesland|}</td>
            <td>{{form.bundesland}}</td>
          </tr>
          <tr>
            <td>{|Land|}</td>
            <td>{{form.land}}</td>
          </tr>
        </table>
      </div>
      <div class="col-md-4">
        <h2>{|Paket|}</h2>
        <table>
          <tr>
            <td>{|Gewicht (in kg)|}:</td>
            <td><input type="text" v-model="form.weight"></td>
          </tr>
          <tr>
            <td>{|H&ouml;he (in cm)|}:</td>
            <td><input type="text" size="10" v-model="form.height"></td>
          </tr>
          <tr>
            <td>{|Breite (in cm)|}:</td>
            <td><input type="text" size="10" v-model="form.width"></td>
          </tr>
          <tr>
            <td>{|L&auml;nge (in cm)|}:</td>
            <td><input type="text" size="10" v-model="form.length"></td>
          </tr>
          <tr>
            <td>{|Produkt|}:</td>
            <td>
              <select v-model="form.method">
                <option v-for="(value, key, index) in methods" :value="key">{{value}}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{|Nachnahme|}:</td>
            <td><input type="checkbox" v-model="form.cashOnDelivery"> (Betrag: {{ form.codvalue }}</td>
          </tr>
          <tr>
            <td>{|Wunschtermin|}:</td>
            <td><input type="date" v-model="form.preferredDay"></td>
          </tr>
        </table>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-12">
        <h2>{|Bestellung|}</h2>
        <table>
          <tr>
            <td>{|Bestellnummer|}:</td>
            <td><input type="text" size="36" v-model="form.order_number"></td>
          </tr>
          <tr>
            <td>{|Rechnungsnummer|}:</td>
            <td><input type="text" size="36" v-model="form.invoice_number"></td>
          </tr>
          <tr>
            <td>{|Sendungsart|}:</td>
            <td>
              <select v-model="form.sendungsart">
                <option v-for="(value, key) in customs_shipment_types" :value="key">{{value}}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>{|Versicherungssumme|}:</td>
            <td><input type="text" size="10" v-model="form.total_insured_value"/></td>
          </tr>
        </table>
      </div>
      <div class="col-md-12">
        <table>
          <tr>
            <th>{|Bezeichnung|}</th>
            <th>{|Menge|}</th>
            <th>{|HSCode|}</th>
            <th>{|Herkunftsland|}</th>
            <th>{|Einzelwert|}</th>
            <th>{|Einzelgewicht|}</th>
            <th>{|Währung|}</th>
            <th>{|Gesamtwert|}</th>
            <th>{|Gesamtgewicht|}</th>
            <th><a v-on:click="addPosition"><img src="themes/new/images/add.png"></a></</th>
          </tr>
          <tr v-for="(pos, index) in form.positions">
            <td><input type="text" v-model="pos.bezeichnung" required></td>
            <td><input type="text" v-model="pos.menge" required></td>
            <td><input type="text" v-model="pos.zolltarifnummer" required></td>
            <td><input type="text" v-model="pos.herkunftsland" required></td>
            <td><input type="text" v-model="pos.zolleinzelwert" required></td>
            <td><input type="text" v-model="pos.zolleinzelgewicht" required></td>
            <td><input type="text" v-model="pos.zollwaehrung" required></td>
            <td>{{Number(pos.menge*pos.zolleinzelwert || 0).toFixed(2)}}</td>
            <td>{{Number(pos.menge*pos.zolleinzelgewicht || 0).toFixed(3)}}</td>
            <td><a v-on:click="deletePosition(index)"><img src="themes/new/images/delete.svg"></a></td>
          </tr>
          <tr>
            <td colspan="7"></td>
            <td>{{total_value.toFixed(2)}}</td>
            <td>{{total_weight.toFixed(3)}}</td>
          </tr>
        </table>
      </div>
      <div>
        <input class="btnGreen" type="submit" value="{|Paketmarke drucken|}" name="drucken">&nbsp;
        <input type="button" value="{|Andere Versandart auswählen|}" name="anders">&nbsp;
      </div>
    </div>
  </form>
</div>
<script type="text/javascript">
  const sendcloudApp = new Vue({
    el: '#sendcloudapp',
    data: {
      form: [JSON],
      countries: [JSON_COUNTRIES],
      methods: [JSON_METHODS],
      customs_shipment_types: [JSON_CUSTOMS_SHIPMENT_TYPES],
      messages: []
    },
    computed: {
      total_value() {
        let sum = 0;
        for(const pos of this.form.positions) {
          sum += pos.menge * pos.zolleinzelwert;
        }
        return sum;
      },
      total_weight() {
        let sum = 0;
        for(const pos of this.form.positions) {
          sum += pos.menge * pos.zolleinzelgewicht;
        }
        return sum;
      }
    },
    methods: {
      submit: function() {
        let app = this;
        let xhr = new XMLHttpRequest();
        xhr.open('POST', location.href, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = function () {
          let json = JSON.parse(this.response);
          app.messages = json.messages;
        }
        xhr.send(JSON.stringify($.extend({submit:'print'}, this.form)));
      },
      addPosition: function() {
        this.form.positions.push({ });
      },
      deletePosition: function(index) {
        this.form.positions.splice(index, 1);
      }
    }
  })
</script>