-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (85 loc) · 4.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CityFlow Community</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>CityFlow Community</h1>
<p>Explore and download community-created workflows</p>
<button id="upload-button"
onclick="window.open('https\://github.com/kekehurry/cityflow_community/issues', '_blank')">
Share your workflow
</button>
<div id="data-container"></div>
<div class="loader">Loading...</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const baseURL = '/';
const loader = document.querySelector('.loader');
fetch(baseURL + 'community_workflows.json')
.then(response => response.json())
.then(filesData => {
loadData(filesData);
loader.style.display = 'none';
})
.catch(error => {
console.error('Error loading data:', error);
loader.textContent = 'Failed to load data';
});
function loadData(filesData) {
const {featured, ...res} = filesData;
const reorderedData = {featured, ...res};
const container = document.getElementById('data-container');
Object.keys(reorderedData).forEach(category => {
const header = document.createElement('h2');
header.textContent = category ? category.toUpperCase() : 'OTHERS';
container.appendChild(header);
const list = document.createElement('ul');
reorderedData[category].forEach(filePath => {
const listItem = document.createElement('li');
const downloadLink = document.createElement('a');
downloadLink.href = filePath;
downloadLink.download = '';
fetch(filePath)
.then(response => response.json())
.then(flowData => {
const img = document.createElement('img');
img.src = flowData.screenShot;
img.width = 300;
img.height = 200;
const nameElement = document.createElement('h3');
nameElement.textContent = flowData.name;
const descriptionElement = document.createElement('p');
descriptionElement.textContent = flowData.description;
const authorElement = document.createElement('p');
authorElement.className = 'author';
authorElement.textContent = `@${flowData.author}`;
const infoContainer = document.createElement('div');
infoContainer.className = 'workflow-info';
infoContainer.appendChild(nameElement);
infoContainer.appendChild(descriptionElement);
infoContainer.appendChild(authorElement);
const contentContainer = document.createElement('div');
contentContainer.className = 'workflow-item';
contentContainer.appendChild(img);
contentContainer.appendChild(infoContainer);
downloadLink.appendChild(contentContainer);
listItem.appendChild(downloadLink);
list.appendChild(listItem);
})
.catch(error => {
console.error(`Error loading ${filePath}:`, error);
listItem.textContent = "Failed to load workflow";
list.appendChild(listItem);
});
});
container.appendChild(list);
});
}
});
</script>
</body>
</html>