website/src/views/Updates.vue at 2b23c729206764d710459d09dc0d0de70e06f3e2 · Vanilla-OS/website · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<template>
    <div class="container">
        <div class="flexList">
            <div v-for="(dayData, index) in displayedDays" :key="index">
                <div class="text text--rich">
                    <h2>{{ dayData.bugs.length + dayData.enhancements.length }} updates on {{ formatDate(dayData.day) }}
                    </h2>
                    <p>Here are the updates for the date {{ formatDate(dayData.day) }}.</p>
                </div>
                <div class="flexGrid flexGrid--2">
                    <div class="flexGrid-item" v-if="dayData.bugs.length">
                        <h3>Bugs</h3>
                        <div class="flexList">
                            <div v-for="bug in dayData.bugs" :key="bug.title">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>{{ bug.title }}</h4>
                                    </div>
                                    <div class="card-content text text--rich text--sm">
                                        <p v-if="bug.description">{{ bug.description }}</p>
                                        <div class="divider"></div>
                                        <p v-if="bug.affected"><b>Afflicts:</b> {{ bug.affected }}</p>
                                        <p v-if="bug.version"><b>Affected Version:</b> {{ bug.version }}</p>
                                        <p v-if="bug.fixed"><b>Fixed Version:</b> {{ bug.fixed }}</p>
                                    </div>
                                    <div class="card-footer">
                                        <a v-if="bug.link" :href="bug.link" target="_blank" class="btn">More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flexGrid-item" v-if="dayData.enhancements.length">
                        <h3>Enhancements</h3>
                        <div class="flexList">
                            <div v-for="enhancement in dayData.enhancements" :key="enhancement.title">
                                <div class="card">
                                    <div class="card-header">
                                        <h4>{{ enhancement.title }}</h4>
                                    </div>
                                    <div class="card-content text text--rich text--sm">
                                        <p v-if="enhancement.description">{{ enhancement.description }}</p>
                                        <div class="divider" v-if="enhancement.version"></div>
                                        <p v-if="enhancement.version"><b>New Version:</b> {{ enhancement.version }}</p>
                                    </div>
                                    <div class="card-footer" v-if="enhancement.link">
                                        <a :href="enhancement.link" target="_blank" class="btn">More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="spacer spacer--lg"></div>
            </div>
        </div>

        <div class="spacer spacer--lg"></div>
        <p class="text--center">
            <button @click="handleLoadMoreDays" class="btn btn--primary">
                {{ buttonText }}
            </button>
        </p>
        <div class="spacer spacer--lg"></div>
        <div class="card card--hz card--type-adv card--type-adv--hz card--purple">
            <div class="card-header">
                <h4>Don't miss the latest updates!</h4>
                <h2>Subscribe to the Feed</h2>
                <a class="btn btn--primary" href="https://info.vanillaos.org/updates-feed.xml">
                    <span class="material-symbols-outlined">newspaper</span>
                    <span>Subscribe now</span>
                </a>
            </div>
            <div class="card-content">
                <div class="flexList">
                    <div class="card-image">
                        <img src="/assets/images/components/feed.svg" alt="Subscribe to the Newsletter" />
                    </div>
                </div>
            </div>
        </div>
        <div class="spacer"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface Day {
    day: string;
    bugs: Item[];
    enhancements: Item[];
}

interface Item {
    title: string;
    description: string;
    affected: string;
    version: string;
    fixed: string;
    link: string;
}

export default defineComponent({
    name: 'updates',
    data() {
        return {
            days: [] as Day[],
            displayedDays: [] as Day[],
            loadIndex: 0,
            loadIncrement: 15,
            buttonText: 'Load More',
        };
    },
    methods: {
        loadMoreDays() {
            this.loadIndex += this.loadIncrement;
            this.displayedDays = this.days.slice(0, this.loadIndex);
        },
        handleLoadMoreDays() {
            const button = document.querySelector('.btn.btn--primary');
            if (this.loadIndex >= this.days.length) {
                this.buttonText = 'Nothing more found';
                if (button) button.setAttribute('disabled', 'true');
                setTimeout(() => {
                    this.buttonText = 'Load More';
                    if (button) button.removeAttribute('disabled');
                }, 1000);
            } else {
                this.loadMoreDays();
            }
        },
        formatDate(dateString: string): string {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
        },
    },
    mounted() {
        fetch('https://raw.githubusercontent.com/Vanilla-OS/info/main/updates/_index.json')
            .then((response) => response.json())
            .then((data) => {
                this.days = Object.keys(data).map((date) => ({
                    day: date,
                    bugs: data[date].bugs,
                    enhancements: data[date].enhancements,
                }));
                this.loadIndex = this.loadIncrement;
                this.displayedDays = this.days.slice(0, this.loadIndex);
            });
    },
});
</script>