gradido/frontend/src/views/KontoOverview/GddAddWork.vue

<template>
  <div>
    <b-row>
      <b-col xl="12" md="12">
        <base-button icon type="info" size="lg" v-b-toggle.collapse-2>
          <span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>
          <span class="btn-inner--text">
            {{ $t('site.overview.add_work') }}
          </span>
        </base-button>
        <b-collapse id="collapse-2" class="mt-2">
          <b-card>
            <div class="card-text">
              <b-row>
                <b-col>
                  <h1>Neuer Beitrag</h1>
                  <h3>{ Name der Community }</h3>
                </b-col>
                <b-col>
                  <h3>Bitte trage jede arbeit einzeln ein.</h3>
                </b-col>
              </b-row>
              <hr />
              <b-form @submit="onSubmit" @reset="onReset" v-if="show">
                <b-row class="form-group">
                  <label
                    for="example-datetime-local-input"
                    class="col-md-2 col-form-label form-control-label form-control-lg"
                  >
                    von
                  </label>
                  <b-col md="10">
                    <base-input
                      type="datetime-local"
                      value="2018-11-23T10:30:00"
                      v-model="form.from"
                      @change="dateDiff"
                    />
                  </b-col>
                </b-row>
                <b-row class="form-group">
                  <label
                    for="example-datetime-local-input"
                    class="col-md-2 col-form-label form-control-label form-control-lg"
                  >
                    bis
                  </label>
                  <b-col md="10">
                    <base-input
                      type="datetime-local"
                      value="2018-11-23T10:30:00"
                      v-model="form.to"
                      @change="dateDiff"
                    />
                  </b-col>
                </b-row>
                <b-row class="form-group">
                  <label
                    for="example-datetime-local-input"
                    class="col-md-2 col-form-label form-control-label form-control-lg"
                  >
                    Stunden
                  </label>
                  <b-col md="10">
                    <base-input type="text" v-model="form.hours" disabled class="form-control-lg" />
                  </b-col>
                </b-row>
                <b-row class="form-group">
                  <label
                    for="example-datetime-local-input"
                    class="col-md-2 col-form-label form-control-label form-control-lg"
                  >
                    GDD Shöpfen
                  </label>
                  <b-col md="10">
                    <base-input
                      type="text"
                      :value="form.hours * 20"
                      disabled
                      class="form-control-lg"
                    />
                  </b-col>
                </b-row>
                <b-row class="form-group">
                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
                    Ort
                  </label>
                  <b-col md="10">
                    <base-input
                      placeholder="Berlin"
                      v-model="form.location"
                      class="form-control-lg"
                    ></base-input>
                  </b-col>
                </b-row>
                <b-row class="form-group">
                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
                    Kategorie
                  </label>
                  <b-col md="10">
                    <base-input>
                      <select class="form-control form-control-lg">
                        <option>Umwelt</option>
                        <option>Helfen</option>
                        <option>Verein</option>
                      </select>
                    </base-input>
                  </b-col>
                </b-row>

                <base-input label="Beitrag">
                  <textarea
                    class="form-control form-control-lg"
                    rows="3"
                    v-model="form.text"
                  ></textarea>
                </base-input>
                <b-row class="form-group">
                  <label class="col-md-2 col-form-label form-control-label form-control-lg">
                    Tätigkeit
                  </label>
                  <b-col md="8">
                    <base-input
                      placeholder="Tätigkeit"
                      v-model="form.location"
                      class="form-control-lg"
                    ></base-input>
                  </b-col>
                  <b-col md="2">
                    <base-input
                      placeholder="Stunden"
                      v-model="form.location"
                      class="form-control-lg"
                    ></base-input>
                  </b-col>
                </b-row>

                <br />

                <br />
                <b-button type="submit" variant="success">
                  jetzt einreichen
                  <small>{{ timestamp }}</small>
                </b-button>
                <b-button type="reset" variant="danger">Cancel</b-button>
                <br />
              </b-form>
            </div>
          </b-card>
        </b-collapse>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'GDDAddWork',
  data() {
    return {
      show: true,
      form: {
        from: '',
        to: '',
        hours: '',
        text: '',
        gdd: 0.0,
        location: '',
        text2: '',
        sendtime: '',
      },
      timestamp: '',
    }
  },
  created() {
    setInterval(this.getNow, 2000)
  },
  methods: {
    dateDiff() {
      this.form.hours = (this.$moment(this.form.to) - this.$moment(this.form.from)) / 1000 / 3600
    },
    getNow: function () {
      //const today = new Date()
      //const date = today.getDate()+'.'+(today.getMonth()+1)+'.'+ today.getFullYear();
      //const time = today.getHours() + ":" + today.getMinutes();
      //const dateTime = date +', '+ time;
      this.timestamp = new Date()
    },
    onSubmit(event) {
      event.preventDefault()
      //console.log('onSUBMIT this.form.from >>>>', this.form.from)
      //console.log('onSUBMIT this.form.from >>>>', this.$moment(this.form.from))
      //console.log('onSUBMIT this.form.to >>>>', this.form.to)
      // console.log("onSUBMIT >>>>", this.getHours(this.form.from, this.form.to))
      this.form.sendtime = new Date()
      alert(JSON.stringify(this.form))
    },
    onReset(event) {
      event.preventDefault()
      // Reset our form values

      // Trick to reset/clear native browser form validation state
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
  },
}
</script>