inventur/app/js/App.vue

<template>
  <div>
    <NavigationBar
      :primary-color="primaryColor"
      @changed-tab="changeView"
    />
    <div class="container">
      <div
        v-if="!ready"
        class="valign-wrapper"
        style="height: 90vh"
      >
        <div class="progress">
          <div class="indeterminate" />
        </div>
      </div>
      <transition name="fade">
        <div
          v-if="ready && view == 'inventory'"
          id="inventory"
          class="col s12"
        >
          <InventoryTable
            ref="inventory"
            :articles="articles"
          />
        </div>
        <div
          v-if="ready && view == 'calc'"
          id="calc"
          class="col s12"
        >
          <Calculator :articles="articles" />
        </div>
        <div
          v-if="ready && view == 'article'"
          id="article"
          class="col s12"
        >
          <div
            v-for="(a, index) in articles"
            :key="'article_'+index"
            class="card"
          >
            <div class="card-content row">
              <span class="card-title">{{ a.name }}</span>
              <div class="input-field inline col s8">
                <input
                  :id="'a_name_'+index"
                  v-model="a.name"
                  placeholder="Artikelname"
                  class="validate"
                >
                <label
                  :for="'a_name_'+index"
                  class="active"
                >Name</label>
              </div>
              <div class="input-field inline col s4">
                <input
                  :id="'a_short_'+index"
                  v-model="a.short"
                  placeholder="Kurzname"
                  class="validate"
                >
                <label
                  :for="'a_short_'+index"
                  class="active"
                >Kürzel</label>
              </div>
              <div class="input-field col s8">
                <input
                  :id="'a_csize_'+index"
                  v-model.number="a.content.size"
                  placeholder="Gesamtinhalt"
                  type="number"
                  class="validate"
                  step="0.01"
                >
                <label
                  :for="'a_csize_'+index"
                  class="active"
                >Gesamtinhalt</label>
              </div>
              <div class="input-field col s4">
                <input
                  :id="'a_dim_'+index"
                  v-model="a.dimension"
                  placeholder="Dimension"
                  class="validate"
                  max="5"
                >
                <label
                  :for="'a_dim_'+index"
                  class="active"
                >Dimension</label>
                <span class="helper-text">z.B. Liter(l), Stück(Stk.)</span>
              </div>

              <div class="input-field col s4">
                <input
                  :id="'a_psize_'+index"
                  v-model.number="a.portion.size"
                  placeholder="Gesamtinhalt"
                  type="number"
                  class="validate"
                  step="0.01"
                  max="5"
                >
                <label
                  :for="'a_psize_'+index"
                  class="active"
                >Portionsinhalt</label>
              </div>
              <div class="input-field col s4">
                <input
                  :id="'a_ptype_'+index"
                  v-model="a.portion.type"
                  placeholder="Art"
                  class="validate"
                  max="5"
                >
                <label
                  :for="'a_ptype_'+index"
                  class="active"
                >Portionsbezeichnung</label>
              </div>
              <div class="input-field col s4">
                <input
                  :id="'a_pprice_'+index"
                  v-model.number="a.portion.price"
                  placeholder="Preis"
                  type="number"
                  step="0.01"
                  class="validate"
                >
                <label
                  :for="'a_pprice_'+index"
                  class="active"
                >Portionspreis in €</label>
              </div>

              <div class="col s12 right">
                <span class="right">Gesamtpreis {{ a.ContentPrice }}</span>
              </div>
            </div>
            <div class="card-action">
              <a
                class
                href="#"
              >Artikel löschen</a>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div
      ref="fab"
      class="fixed-action-btn"
    >
      <a
        class="btn-floating btn-large"
        :class="primaryColor"
      >
        <i class="large material-icons">more_vert</i>
      </a>
      <ul>
        <li v-show="view == 'article'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Artikelliste speichern"
            @click="storeArticles"
          >
            <i class="material-icons">save</i>
          </a>
        </li>
        <li v-show="view == 'article'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Artikel hinzufügen"
            @click="addArticle"
          >
            <i class="material-icons">add</i>
          </a>
        </li>
        <li v-show="view == 'inventory'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Inventur zurücksetzen"
            @click="$refs.inventory.$emit('reset-inventur')"
          >
            <i class="material-icons">clear_all</i>
          </a>
        </li>
        <li v-show="view == 'inventory'">
          <a
            href="#"
            class="btn-floating tooltipped"
            data-position="left"
            data-tooltip="Inventur exportieren"
            @click="$refs.inventory.$emit('export-inventur')"
          >
            <i class="material-icons">save</i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Calculator from './components/Calculator';
import InventoryTable from './components/InventoryTable';
import NavigationBar from './components/NavigationBar';
import {Article, thawArticle} from './model/article';

export default {
  name: "App",
  components: { InventoryTable, NavigationBar, Calculator },
  data() {
    return {
      articles: [],
      bon: [],
      ready: false,
      caretPosition: 0,
      fab: null,
      view: "inventory",
    };
  },
  computed: {
    primaryColor() {
      switch (this.view) {
      case "inventory":
        return "teal";
      case "calc":
        return "orange";
      case "article":
        return "blue";
      default:
        return "red";
      }
    }
  },
  created: function() {
    this.loadArticles();
  },
  mounted() {
    var fab = this.$refs.fab;
    this.fab = this.$M.FloatingActionButton.init(fab, {});
  },
  methods: {
    changeView(tabId) {
      this.view = tabId;
    },
    addArticle: function() {
      this.articles.push(new Article());
    },
    storeArticles: function() {
      this.$http
        .post(
          "/api/artikel",
          JSON.stringify(this.articles)
        )
        .then(response => {
          this.$M.toast({ html: response.body });
        });
    },
    loadArticles: function() {
      var app = this;
      this.$http
        .get("api/artikel/theater")
        .then(response => {
          return response.data;
        })
        .then(json => {
          console.log(json);
          json.forEach(element => {
            app.articles.push(thawArticle(element));
          });
        })
        .then(() => {
          this.$M.toast({ html: "Artikel wurden geladen." });
        })
        .then(() => {
          this.$M.updateTextFields();
          app.ready = true;
        });
    },
    exportInventur() {

    }
  }
};
</script>

<style>
</style>