-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (119 loc) · 4.81 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LVRedditCorpus</title>
<style>
.post{
border: 1px solid #aaa;
padding: 10px 10px 10px 25px;
margin: 10px;
}
.comment{
border: 1px solid #aaa;
padding: 5px 5px 5px 25px;
}
</style>
<script>
let curOffset = 0;
let curLimit = 10;
function genTechnicalInfo(data) {
let technicalInfo = document.createElement('div');
let lang_confidences_str = '{';
for (let lang in data.lang_confidences) {
lang_confidences_str += `${lang}: ${data.lang_confidences[lang]}, `;
}
lang_confidences_str += '}';
let sentimentExplanation = '';
for(let key in data.sentiment_detailed) {
sentimentExplanation += `> ${key}: ${data.sentiment_detailed[key]}<br/>`;
}
technicalInfo.innerHTML = `
<p style="color: #888">
Score: ${data.score}<br/>
Detected language: ${data.lang} (${lang_confidences_str})<br/>
Sentiment: ${data.sentiment}<br/>
${sentimentExplanation}
Link: <a href="https://www.reddit.com${data.permalink}" target="_blank" style="color: #aaaaaa">https://www.reddit.com${data.permalink}</a>
</p>`;
return technicalInfo;
}
function genCommentTree(comments) {
let commentTree = document.createElement('div');
for (let i = 0; i < comments.length; i++) {
let comment = comments[i];
let commentDiv = document.createElement('div');
commentDiv.className = 'comment';
commentDiv.innerHTML = `<p>${comment.body}</p>`;
commentDiv.appendChild(genTechnicalInfo(comment));
commentTree.appendChild(commentDiv);
if (comment.replies.length > 0) {
commentDiv.appendChild(genCommentTree(comment.replies));
}
}
return commentTree;
}
let gettingData = false;
function getStats(offset, limit) {
if (gettingData) {
return;
}
gettingData = true;
fetch(
`/data?offset=${offset}&limit=${limit}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
}
).then(response => response.json())
.then(data => {
gettingData = false;
curOffset = offset;
curLimit = limit;
let posts = document.getElementById('posts');
posts.innerHTML = '';
let postsData = data.posts;
for (let i = 0; i < postsData.length; i++) {
let post = postsData[i];
let postDiv = document.createElement('div');
postDiv.className = 'post';
let crosspost = '';
if (post.crosspost_parent_list.length > 0) {
crosspost = `<p>Crosspost from <a href="https://www.reddit.com${post.crosspost_parent_list[0].permalink}" target="_blank">https://www.reddit.com${post.crosspost_parent_list[0].permalink}</a></p>`;
}
let poll = '';
if (post.poll_data != null) {
poll = `<p>Poll: ${post.poll_data.options.map(option => option.text).join(', ')}</p>`;
}
postDiv.innerHTML = `
<h3>${post.title}</h3>
<p>${post.body != '[removed]'? post.body : post.original_body}</p>
${crosspost}
${poll}
`;
postDiv.appendChild(genTechnicalInfo(post));
postDiv.appendChild(genCommentTree(post.replies));
posts.appendChild(postDiv);
}
let statsDiv = document.getElementById('stats');
statsDiv.innerHTML = `
<p>Showing ${offset + 1} - ${offset + postsData.length} of ${data.stats_all.posts}</p>
`;
})
}
getStats(curOffset, curLimit);
</script>
</head>
<body>
<div id="stats">
</div>
<div>
<button onclick="getStats(Math.max(curOffset - curLimit, 0), curLimit)">Prev</button>
<button onclick="getStats(curOffset + curLimit, curLimit)">Next</button>
</div>
<div id="posts">
</div>
</body>
</html>