<commit_before><template>
  <form class="wrapper-height100" @submit.prevent>
    <div class="wrapper-above-save">
      <div class="cal-img top-right" :class="'layer-'+cal.layer"></div>

      <!-- First calendar is always weekly -->
      <div v-if="!cal.layer">
        <h3>Stel de openingsuren in voor {{ $parent.$parent.routeService.label }}. Op welke dagen is deze dienst normaal open?</h3>
        <p class="text-muted">Uitzonderingen kan je later instellen.</p>

        <event-editor v-for="(e, i) in cal.events" :parent="cal.events" :prop="i" @add-event="addEvent(i, e)" @rm="rmEvent(i)"></event-editor>
      </div>

      <!-- Other calendars must be renamed -->
      <div v-else-if="cal.label=='Uitzondering'">
        <h3>Stel de uitzondering in.</h3>
        <div class="form-group">
          <label>Naam uitzondering</label>
          <input type="text" class="form-control" v-model="calLabel" placeholder="Brugdagen, collectieve sluitingsdagen, ...">
          <div class="help-block">Kies een specifieke naam die deze uitzondering beschrijft.</div>
        </div>
      </div>

      <!-- Other calendars have more options -->
      <div v-else>
        <h3>{{ cal.label }}</h3>
        <label>
          <input type="checkbox" :checked="cal.closinghours" @change="toggleClosing"> Sluitingsuren
        </label>
        <br v-else>

        <event-editor v-for="(e, i) in cal.events" :parent="cal.events" :prop="i" @add-event="addEvent(i, e)" @rm="rmEvent(i)"></event-editor>

        <p>
          <button @click="pushEvent" class="btn btn-link">+ Voeg nieuwe periode of dag toe</button>
        </p>
      </div>
    </div>

    <div class="wrapper-save-btn">
      <div class="col-xs-12 text-right">
        <button type="button" class="btn btn-default pull-left" @click="rmCalendar()">Verwijder</button>
        <button type="button" class="btn btn-default" @click="toVersion()">Annuleer</button>
        <button type="submit" class="btn btn-primary" @click="saveLabel" v-if="cal.label=='Uitzondering'">Volgende stap</button>
        <button type="submit" class="btn btn-primary" @click="save" v-else>Sla op</button>
      </div>
    </div>

<!-- 
    <pre>{{ cal }}</pre>
    <pre class="cal-render" style="margin-top:10em">{{ events }}</pre> -->
  </form>
</template>

<script>
import EventEditor from '../components/EventEditor.vue'
import { createEvent } from '../defaults.js'
import { cleanEmpty, Hub } from '../lib.js'

const fullDays = ['maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag', 'zondag']

export default {
  name: 'calendar-editor',
  props: ['cal', 'layer'],
  data () {
    return {
      // options: {}
      calLabel: '',
      days: ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'],
      fullDays
    }
  },
  computed: {
    events () {
      return this.cal.events
    }
  },
  methods: {
    toggleClosing () {
      this.$set(this.cal, 'closinghours', !this.cal.closinghours)
    },
    pushEvent (index, event) {
      this.cal.events.push(createEvent(this.cal.events.length + 1))
    },
    addEvent (index, event) {
      console.log('add yes', index, event)
      event = Object.assign({}, event)
      this.cal.events.splice(index, 0, event)
    },
    rmEvent (index) {
      this.cal.events.splice(index, 1)
    },
    save () {
      Hub.$emit('createCalendar', this.cal, true)
    },
    saveLabel () {
      if (!this.calLabel || this.calLabel === 'Uitzondering') {
        return console.warn('Expected calendar name')
      }
      this.cal.label = this.calLabel
      Hub.$emit('createCalendar', this.cal)
    },
    rmCalendar () {
      Hub.$emit('deleteCalendar', this.cal)
    }
  },
  created () {
    this.RRule = RRule || {}
  },
  mounted () {
    this.$set(this.cal, 'closinghours', !!this.cal.closinghours)
    if (!this.cal.events) {
      this.$set(this.cal, 'events', [])
    }<commit_msg>Fix #3 add link to create first event<commit_after><template>
  <form class="wrapper-height100" @submit.prevent>
    <div class="wrapper-above-save">
      <div class="cal-img top-right" :class="'layer-'+cal.layer"></div>

      <!-- First calendar is always weekly -->
      <div v-if="!cal.layer">
        <h3>Stel de openingsuren in voor {{ $parent.$parent.routeService.label }}. Op welke dagen is deze dienst normaal open?</h3>
        <p class="text-muted">Uitzonderingen kan je later instellen.</p>

        <event-editor v-for="(e, i) in cal.events" :parent="cal.events" :prop="i" @add-event="addEvent(i, e)" @rm="rmEvent(i)"></event-editor>

        <p v-if="!cal.events.length">
          <button @click="pushFirstEvent" class="btn btn-link">+ Voeg weekschema toe</button>
        </p>
      </div>

      <!-- Other calendars must be renamed -->
      <div v-else-if="cal.label=='Uitzondering'">
        <h3>Stel de uitzondering in.</h3>
        <div class="form-group">
          <label>Naam uitzondering</label>
          <input type="text" class="form-control" v-model="calLabel" placeholder="Brugdagen, collectieve sluitingsdagen, ...">
          <div class="help-block">Kies een specifieke naam die deze uitzondering beschrijft.</div>
        </div>
      </div>

      <!-- Other calendars have more options -->
      <div v-else>
        <h3>{{ cal.label }}</h3>
        <label>
          <input type="checkbox" :checked="cal.closinghours" @change="toggleClosing"> Sluitingsuren
        </label>
        <br v-else>

        <event-editor v-for="(e, i) in cal.events" :parent="cal.events" :prop="i" @add-event="addEvent(i, e)" @rm="rmEvent(i)"></event-editor>

        <p>
          <button @click="pushEvent" class="btn btn-link">+ Voeg nieuwe periode of dag toe</button>
        </p>
      </div>
    </div>

    <div class="wrapper-save-btn">
      <div class="col-xs-12 text-right">
        <button type="button" class="btn btn-default pull-left" @click="rmCalendar()">Verwijder</button>
        <button type="button" class="btn btn-default" @click="toVersion()">Annuleer</button>
        <button type="submit" class="btn btn-primary" @click="saveLabel" v-if="cal.label=='Uitzondering'">Volgende stap</button>
        <button type="submit" class="btn btn-primary" @click="save" v-else>Sla op</button>
      </div>
    </div>

<!-- 
    <pre>{{ cal }}</pre>
    <pre class="cal-render" style="margin-top:10em">{{ events }}</pre> -->
  </form>
</template>

<script>
import EventEditor from '../components/EventEditor.vue'
import { createEvent, createFirstEvent } from '../defaults.js'
import { cleanEmpty, Hub } from '../lib.js'

const fullDays = ['maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag', 'zondag']

export default {
  name: 'calendar-editor',
  props: ['cal', 'layer'],
  data () {
    return {
      // options: {}
      calLabel: '',
      days: ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'],
      fullDays
    }
  },
  computed: {
    events () {
      return this.cal.events
    }
  },
  methods: {
    toggleClosing () {
      this.$set(this.cal, 'closinghours', !this.cal.closinghours)
    },
    pushEvent () {
      this.cal.events.push(createEvent(this.cal.events.length + 1))
    },
    pushFirstEvent () {
      this.cal.events.push(createFirstEvent())
    },
    addEvent (index, event) {
      console.log('add yes', index, event)
      event = Object.assign({}, event)
      this.cal.events.splice(index, 0, event)
    },
    rmEvent (index) {
      this.cal.events.splice(index, 1)
    },
    save () {
      Hub.$emit('createCalendar', this.cal, true)
    },
    saveLabel () {
      if (!this.calLabel || this.calLabel === 'Uitzondering') {
        return console.warn('Expected calendar name')
      }
      this.cal.label = this.calLabel
      Hub.$emit('createCalendar', this.cal)
    },
    rmCalendar () {
      Hub.$emit('deleteCalendar', this.cal)
    }
  },
  created () {
    this.RRule = RRule || {}
  },
  mounted () {
    this.$set(this.cal, 'closinghours', !!this.cal.closinghours)
    if (!this.cal.events) {
      this.$set(this.cal, 'events', [])
    }
{'fraction_non_alphanumeric': 0.18863920099875156, 'fraction_numerical': 0.004119850187265918, 'mean_word_length': 2.7841284837033538, 'pattern_counts': {'":': 0, '<': 131, '<?xml version=': 0, '>': 131, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '365178', 'n_tokens_mistral': 2755, 'n_tokens_neox': 2683, 'n_words': 560}