Skip to content

Commit 6e4f290

Browse files
AvidGameFanAvidGameFan
committed
Initial release
Initial release of viewer for forum files
1 parent 5def35d commit 6e4f290

File tree

3 files changed

+149
-1
lines changed

3 files changed

+149
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.jpg
2+
*.json

‎README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,19 @@
11
# dp-display
2-
Tools to allow reading of data from closing of DPReview.com forums
2+
Tools to allow reading of data from closing of DPReview.com forums
3+
4+
Dp-display.html is a local web page that allows you to drag-and-drop your DPReview message dump (if you requested your data from DPR) and present the messages in a more human-readable format.
5+
6+
At the present, more work is needed to correctly format the data.
7+
8+
## How to use:
9+
10+
- Drag and drop your forum-posts.json file into the box
11+
- From the list of displayed topics, choose which batch of messages you want displayed
12+
(It may take several seconds for it to unpack the data)
13+
- Scroll down or use the search to see your messages and quoted info.
14+
15+
## Limitations:
16+
17+
- Currently, I don't clear out the previous data, so if you keep clicking on topics, it just appends to the bottom of
18+
the document, which will get very large. For now, refresh the web page to start over with a clean page.
19+
- There's not enough formatting. Quoted data is not indented or colored, and the whole page is not styled.

‎dp-display.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<!--
3+
DP-Display
4+
5+
By Gary Wolfe
6+
Version: 1.0
7+
Last edit: 4/1/2023
8+
Original creation date: 4/1/2023
9+
License: Free to use by former users of DPReview.com to view their data. No guarantee of accuracy or suitability is given.
10+
11+
This local web page allows you to drag-and-drop your DPReview message dump (if you requested your data from DPR)
12+
and present the messages in a more human-readable format.
13+
14+
At the present, more work is needed to correctly format the data.
15+
16+
How to use:
17+
18+
- Drag and drop your forum-posts.json file into the box
19+
- From the list of displayed topics, choose which batch of messages you want displayed
20+
(It may take several seconds for it to unpack the data)
21+
- Scroll down or use the search to see your messages and quoted info.
22+
23+
Limitations:
24+
25+
- Currently, I don't clear out the previous data, so if you keep clicking on topics, it just appends to the bottom of
26+
the document, which will get very large.
27+
- There's not enough formatting. Quoted data is not indented or colored, and the whole page is not styled.
28+
29+
-->
30+
<head>
31+
<title>DP-Display</title>
32+
<style>
33+
#drop-area {
34+
border: 5px dashed rgb(0, 225, 255);
35+
width: 440px;
36+
height: 272px;
37+
}
38+
</style>
39+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
40+
</head>
41+
42+
<body>
43+
<h1>DP-Display</h1>
44+
Drag-and-drop your forums-posts.json file here!
45+
<div id="drop-area"></div>
46+
<script>
47+
48+
const dropArea = document.getElementById('drop-area');
49+
50+
//For info on how to drag-and-drop and load files: https://web.dev/read-files/
51+
52+
dropArea.addEventListener('dragover', (event) => {
53+
event.stopPropagation();
54+
event.preventDefault();
55+
56+
event.dataTransfer.dropEffect = 'copy';
57+
});
58+
59+
dropArea.addEventListener('drop', (event) => {
60+
event.stopPropagation();
61+
event.preventDefault();
62+
const fileList = event.dataTransfer.files;
63+
console.log(fileList);
64+
65+
const file=fileList[0]
66+
const reader = new FileReader();
67+
reader.addEventListener('load', event => {
68+
processFile(event.target.result);
69+
});
70+
reader.readAsText(file);
71+
});
72+
73+
74+
var data;
75+
var distinctValues;
76+
77+
function processFile(fileContents) {
78+
79+
data = JSON.parse(fileContents);
80+
let list = data.forumPosts;
81+
82+
const distinctValues = [...new Set(list.map(item => item.forum))];
83+
//TODO: if #topicList exists, remove? Or, perhaps after loading, remove #drop-area.
84+
const myDiv = document.createElement('div');
85+
myDiv.setAttribute('id','topicList');
86+
const htmlList = document.createElement('ul');
87+
myDiv.appendChild(htmlList);
88+
var index=0;
89+
distinctValues.forEach(key => {
90+
const li = document.createElement('li');
91+
li.setAttribute("id", "topic_"+index++);
92+
const link = document.createElement('a');
93+
link.textContent = key;
94+
link.setAttribute("href","#");
95+
li.appendChild(link);
96+
htmlList.appendChild(li);
97+
});
98+
99+
document.body.appendChild(myDiv);
100+
101+
$(function() {
102+
$("#topicList ul li").click(function() {
103+
//alert(this.id);
104+
//TODO: clear out contents of previous list
105+
106+
const myDiv = document.createElement('div');
107+
let list = data.forumPosts;
108+
let index = this.id.substring("topic_".length);
109+
const subHeader = document.createElement('h2');
110+
subHeader.innerText = distinctValues[index];
111+
myDiv.appendChild(subHeader);
112+
list.filter(p => p.forum==distinctValues[index]).forEach(post => printPost(post, myDiv));
113+
document.body.appendChild(myDiv);
114+
}
115+
116+
);
117+
function printPost(post, outerDiv) {
118+
const myDiv = document.createElement('div');
119+
//Setting innerHTML isn't standard, but should work in most browsers anyway.
120+
myDiv.innerHTML = '<hr/>' +post.subject + '<br/>' + post.postDate + '<br/>' + post.messageTextHtml;
121+
outerDiv.appendChild(myDiv);
122+
}
123+
});
124+
}
125+
126+
</script>
127+
128+
129+
</body>

0 commit comments

Comments
 (0)