generated from BYU-CS-260-Winter-2020/vue-xkcd-browser
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
125 lines (119 loc) · 3.03 KB
/
script.js
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
Vue.component('star-rating', VueStarRating.default);
let app = new Vue({
el: '#app',
data: {
number: '',
max: '',
current: {
title: '',
img: '',
alt: ''
},
loading: true,
addedName: '',
addedComment: '',
addedDate:'',
comments: {},
ratings: {},
average:'',
displayAverage:''
},
created() {
this.xkcd();
},
computed: {
month() {
var month = new Array;
if (this.current.month === undefined)
return '';
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
return month[this.current.month - 1];
}
},
watch: {
number(value, oldvalue) {
if (oldvalue === '') {
this.max = value;
} else {
this.xkcd();
}
},
},
methods: {
async xkcd() {
try {
this.loading = true;
let url = 'https://xkcd.now.sh/?comic=';
if (this.number === '') {
url += 'latest';
} else {
url += this.number;
}
const response = await axios.get(url);
this.current = response.data;
this.loading = false;
this.number = response.data.num;
} catch (error) {
this.number = this.max;
}
},
previousComic() {
this.number = this.current.num - 1;
if (this.number < 1)
this.number = 1;
},
nextComic() {
this.number = this.current.num + 1;
if (this.number > this.max)
this.number = this.max
},
lastComic() {
this.number = this.max;
},
firstComic() {
this.number =1;
},
getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum and minimum are inclusive
},
randomComic() {
this.number = this.getRandom(1, this.max);
},
addComment() {
if (!(this.number in this.comments))
Vue.set(app.comments, this.number, new Array);
this.comments[this.number].push({
author: this.addedName,
text: this.addedComment,
date: new Date().toLocaleString(),
});
this.addedName = '';
this.addedComment = '';
this.addedDate = '';
},
setRating(rating){
if (!(this.number in this.ratings))
Vue.set(this.ratings, this.number, {
sum: 0,
total: 0,
});
this.ratings[this.number].sum += rating;
this.ratings[this.number].total += 1;
this.average = this.ratings[this.number].sum/this.ratings[this.number].total;
this.displayAverage = this.average.toFixed(1);
},
}
});