web-demo/app.js at gh-pages · cat-stride/web-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{
  /* global buildRecords */
  const records = buildRecords()
  const initRecord = () => ({ sym: '?', content: '' })
  const Main = {
    data() {
      return {
        rawBullets: records.getLocalBullets(),
        editingBullet: initRecord(),
        today: moment().format('YYYY/M/D/dd'),
        dayRange: 2,
      }
    },
    computed: {
      bulletsInDays() {
        return this.rawBullets.reduce((prev, record) => {
          const day = moment.unix(record.date).format('YYYY/M/D/dd')
          prev[day] = prev[day] || []
          record.day = day
          prev[day].push(record)
          return prev
        }, {})
      },
      alldays() {
        const days = Object.keys(this.bulletsInDays).sort()
        if (days.indexOf(this.today) > -1) return days
        return days.concat(this.today)
      },
      days() {
        return this.alldays.slice(-this.dayRange)
      },
    },
    mounted() {
      setTimeout(() => {
        window.scroll(0, document.body.clientHeight)
      }, 300)
    },
    methods: {
      addBullet(record) {
        const updated = records.addBullet(record)
        this.rawBullets = updated
        this.editingBullet = initRecord()
        this.$nextTick(() => {
          window.scroll(0, document.body.clientHeight)
          this.$refs.editingInput.focus()
        })
      },
      setBullet(record) {
        const updated = records.setBullet(record)
        this.rawBullets = updated
      },
      removeBullet(record) {
        const updated = records.removeBullet(record)
        this.rawBullets = updated
      },
      showPrev() {
        this.dayRange += 1
      },
    },
    template: `
      <section class="container">
        <button class="prevbutton" v-if="dayRange < alldays.length" @click="showPrev">Prev</button>
        <transition-group name="slide-fade">
          <div v-for="day of days" :key="day">
            <h4>{{ day }}</h4>
            <bullet-input v-for="bullet of bulletsInDays[day]"
              :key="bullet.id"
              :bullet="bullet"
              @submit="setBullet"
              @delete="removeBullet"
              :readonly="bullet.day !== today"></bullet-input>
          </div>
        </transition-group>
        <h4 v-if="days.indexOf(today) < 0">{{ today }}</h4>
        <bullet-input ref="editingInput" :bullet="editingBullet" @submit="addBullet"></bullet-input>
      </section>
    `,
  }


  const Ctor = Vue.extend(Main)
  new Ctor().$mount('#app')
}