Vuetify Basic

by rolence0515

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.0.5/cytoscape-cose-bilkent.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <v-card-title>
            <h2>進度條頁面</h2>
          </v-card-title>
          <v-card-text>
            <v-progress-linear v-model="habitProgress" background-color="#e0e0e0" height="20"></v-progress-linear>
          </v-card-text>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

CSS

#app {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      habitProgress: 0, // 習慣目標進度
      habitEvents: [ // 用戶執行習慣的事件列表
        { date: '2023-06-01', habit: '習慣1', executed: true },
        { date: '2023-06-05', habit: '習慣2', executed: false },
        { date: '2023-06-10', habit: '習慣1', executed: true },
        { date: '2023-06-15', habit: '習慣2', executed: true },
      ]
    };
  },
  computed: {
    calculateProgress() {
      const executedCount = this.habitEvents.filter(event => event.executed).length;
      const totalCount = this.habitEvents.length;
      return Math.floor((executedCount / totalCount) * 100);
    }
  },
  mounted() {
    this.habitProgress = this.calculateProgress;
  },
  methods: {
    updateProgress() {
      this.habitProgress = this.calculateProgress;
    }
  },
  components: {
    'v-card': VCard,
    'v-card-title': VCardTitle,
    'v-card-text': VCardText,
    'v-progress-linear': VProgressLinear,
  },
});