Skip to content

Commit e0206fa

Browse files
jacksayshijacksayshi
authored
Merge pull request #115 from oss-slu/OneHundredThirteen
Modularize Script in boneset.html
2 parents 9605356 + 8a8748f commit e0206fa

File tree

7 files changed

+156
-138
lines changed

7 files changed

+156
-138
lines changed

‎templates/boneset.html‎

Lines changed: 1 addition & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
</div>
2323

2424
<div id="sidebar-container"></div>
25-
<script src="sidebar.js"></script>
2625

2726
<div id="editor-view">
2827
<div class="container">
@@ -56,114 +55,7 @@ <h3>Description</h3>
5655
</div>
5756
</div>
5857

59-
<script>
60-
const API_URL = 'http://127.0.0.1:8000/combined-data';
61-
const GITHUB_RAW_URL = 'https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/DataPelvis/descriptions/';
62-
63-
let combinedData = { bonesets: [], bones: [], subbones: [] };
64-
65-
async function fetchCombinedData() {
66-
try {
67-
const response = await fetch(API_URL);
68-
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
69-
return await response.json();
70-
} catch (error) {
71-
console.error("Error fetching data:", error);
72-
alert("Failed to load data.");
73-
return { bonesets: [], bones: [], subbones: [] };
74-
}
75-
}
76-
77-
function populateDropdowns() {
78-
const bonesetSelect = document.getElementById('boneset-select');
79-
bonesetSelect.innerHTML = '<option value="">--Please select a Boneset--</option>';
80-
combinedData.bonesets.forEach(set => {
81-
const option = document.createElement('option');
82-
option.value = set.id;
83-
option.textContent = set.name;
84-
bonesetSelect.appendChild(option);
85-
});
86-
}
87-
88-
document.getElementById('boneset-select').addEventListener('change', (e) => {
89-
const selectedBonesetId = e.target.value;
90-
const boneSelect = document.getElementById('bone-select');
91-
const subboneSelect = document.getElementById('subbone-select');
92-
93-
boneSelect.innerHTML = '<option value="">--Please select a Bone--</option>';
94-
subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
95-
subboneSelect.disabled = true;
96-
97-
const relatedBones = combinedData.bones.filter(b => b.boneset === selectedBonesetId);
98-
relatedBones.forEach(bone => {
99-
const option = document.createElement('option');
100-
option.value = bone.id;
101-
option.textContent = bone.name;
102-
boneSelect.appendChild(option);
103-
});
104-
105-
boneSelect.disabled = false;
106-
loadDescription(selectedBonesetId);
107-
});
108-
109-
document.getElementById('bone-select').addEventListener('change', (e) => {
110-
const selectedBoneId = e.target.value;
111-
const subboneSelect = document.getElementById('subbone-select');
112-
113-
subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
114-
const relatedSubbones = combinedData.subbones.filter(sb => sb.bone === selectedBoneId);
115-
relatedSubbones.forEach(sb => {
116-
const option = document.createElement('option');
117-
option.value = sb.id;
118-
option.textContent = sb.name;
119-
subboneSelect.appendChild(option);
120-
});
121-
122-
subboneSelect.disabled = relatedSubbones.length === 0;
123-
loadDescription(selectedBoneId);
124-
});
125-
126-
document.getElementById('subbone-select').addEventListener('change', (e) => {
127-
const selectedSubboneId = e.target.value;
128-
if (selectedSubboneId) loadDescription(selectedSubboneId);
129-
});
130-
131-
async function loadDescription(id) {
132-
const container = document.getElementById('description-Container');
133-
container.innerHTML = "";
134-
const descUrl = `${GITHUB_RAW_URL}${id}_description.json`;
135-
136-
try {
137-
const response = await fetch(descUrl);
138-
const data = await response.json();
139-
140-
const nameItem = document.createElement('li');
141-
nameItem.innerHTML = `<strong>${data.name}</strong>`;
142-
container.appendChild(nameItem);
143-
144-
data.description.forEach(point => {
145-
const li = document.createElement('li');
146-
li.textContent = point;
147-
container.appendChild(li);
148-
});
149-
} catch (error) {
150-
container.innerHTML = "<li>Error loading description.</li>";
151-
console.error("Failed to fetch description:", error);
152-
}
153-
}
154-
155-
document.addEventListener('DOMContentLoaded', async () => {
156-
combinedData = await fetchCombinedData();
157-
populateDropdowns();
158-
159-
const boneset = combinedData.bonesets[0];
160-
if (boneset) {
161-
document.getElementById('boneset-select').value = boneset.id;
162-
const event = new Event('change');
163-
document.getElementById('boneset-select').dispatchEvent(event);
164-
}
165-
});
166-
</script>
58+
<script type="module" src="js/main.js"></script>
16759
</body>
16860

16961
</html>

‎templates/js/api.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// js/api.js
2+
export async function fetchCombinedData() {
3+
const API_URL = 'http://127.0.0.1:8000/combined-data';
4+
5+
try {
6+
const response = await fetch(API_URL);
7+
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
8+
return await response.json();
9+
} catch (error) {
10+
console.error("Error fetching combined data:", error);
11+
alert("Failed to load data.");
12+
return { bonesets: [], bones: [], subbones: [] };
13+
}
14+
}

‎templates/js/description.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// js/description.js
2+
const GITHUB_RAW_URL = 'https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/DataPelvis/descriptions/';
3+
4+
export async function loadDescription(id) {
5+
const container = document.getElementById('description-Container');
6+
container.innerHTML = "";
7+
const descUrl = `${GITHUB_RAW_URL}${id}_description.json`;
8+
9+
try {
10+
const response = await fetch(descUrl);
11+
const data = await response.json();
12+
13+
const nameItem = document.createElement('li');
14+
nameItem.innerHTML = `<strong>${data.name}</strong>`;
15+
container.appendChild(nameItem);
16+
17+
data.description.forEach(point => {
18+
const li = document.createElement('li');
19+
li.textContent = point;
20+
container.appendChild(li);
21+
});
22+
} catch (error) {
23+
container.innerHTML = "<li>Error loading description.</li>";
24+
console.error("Failed to fetch description:", error);
25+
}
26+
}

‎templates/js/dropdowns.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// js/dropdowns.js
2+
import { loadDescription } from './description.js';
3+
4+
export function populateBonesetDropdown(bonesets) {
5+
const bonesetSelect = document.getElementById('boneset-select');
6+
bonesetSelect.innerHTML = '<option value="">--Please select a Boneset--</option>';
7+
8+
bonesets.forEach(set => {
9+
const option = document.createElement('option');
10+
option.value = set.id;
11+
option.textContent = set.name;
12+
bonesetSelect.appendChild(option);
13+
});
14+
}
15+
16+
export function setupDropdownListeners(combinedData) {
17+
const bonesetSelect = document.getElementById('boneset-select');
18+
const boneSelect = document.getElementById('bone-select');
19+
const subboneSelect = document.getElementById('subbone-select');
20+
21+
bonesetSelect.addEventListener('change', (e) => {
22+
const selectedBonesetId = e.target.value;
23+
24+
boneSelect.innerHTML = '<option value="">--Please select a Bone--</option>';
25+
subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
26+
subboneSelect.disabled = true;
27+
28+
const relatedBones = combinedData.bones.filter(b => b.boneset === selectedBonesetId);
29+
relatedBones.forEach(bone => {
30+
const option = document.createElement('option');
31+
option.value = bone.id;
32+
option.textContent = bone.name;
33+
boneSelect.appendChild(option);
34+
});
35+
36+
boneSelect.disabled = relatedBones.length === 0;
37+
if (selectedBonesetId) loadDescription(selectedBonesetId);
38+
});
39+
40+
boneSelect.addEventListener('change', (e) => {
41+
const selectedBoneId = e.target.value;
42+
43+
subboneSelect.innerHTML = '<option value="">--Please choose a Sub-Bone--</option>';
44+
const relatedSubbones = combinedData.subbones.filter(sb => sb.bone === selectedBoneId);
45+
relatedSubbones.forEach(sb => {
46+
const option = document.createElement('option');
47+
option.value = sb.id;
48+
option.textContent = sb.name;
49+
subboneSelect.appendChild(option);
50+
});
51+
52+
subboneSelect.disabled = relatedSubbones.length === 0;
53+
if (selectedBoneId) loadDescription(selectedBoneId);
54+
});
55+
56+
subboneSelect.addEventListener('change', (e) => {
57+
const selectedSubboneId = e.target.value;
58+
if (selectedSubboneId) loadDescription(selectedSubboneId);
59+
});
60+
}

‎templates/js/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// js/main.js
2+
import { fetchCombinedData } from './api.js';
3+
import { populateBonesetDropdown, setupDropdownListeners } from './dropdowns.js';
4+
import { initializeSidebar } from './sidebar.js';
5+
6+
let combinedData = { bonesets: [], bones: [], subbones: [] };
7+
8+
document.addEventListener('DOMContentLoaded', async () => {
9+
// Initialize sidebar toggle behavior
10+
initializeSidebar();
11+
12+
// Fetch and render bone data
13+
combinedData = await fetchCombinedData();
14+
populateBonesetDropdown(combinedData.bonesets);
15+
setupDropdownListeners(combinedData);
16+
17+
const boneset = combinedData.bonesets[0];
18+
if (boneset) {
19+
document.getElementById('boneset-select').value = boneset.id;
20+
const event = new Event('change');
21+
document.getElementById('boneset-select').dispatchEvent(event);
22+
}
23+
});

‎templates/js/sidebar.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// js/sidebar.js
2+
export function initializeSidebar() {
3+
const toggleButton = document.getElementById('toggle-sidebar');
4+
const sidebarContainer = document.getElementById('sidebar-container');
5+
6+
async function loadSidebar() {
7+
if (!sidebarContainer.innerHTML) {
8+
try {
9+
const response = await fetch('sidebar.html');
10+
const sidebarHTML = await response.text();
11+
sidebarContainer.innerHTML = sidebarHTML;
12+
} catch (error) {
13+
console.error('Error loading sidebar:', error);
14+
}
15+
}
16+
}
17+
18+
if (toggleButton) {
19+
toggleButton.addEventListener('click', async () => {
20+
await loadSidebar(); // Ensure the sidebar is loaded
21+
const sidebarElement = document.getElementById('sidebar');
22+
23+
if (sidebarElement) {
24+
if (sidebarElement.style.left === '0px') {
25+
sidebarElement.style.left = '-250px'; // Close sidebar
26+
} else {
27+
sidebarElement.style.left = '0px'; // Open sidebar
28+
}
29+
}
30+
});
31+
}
32+
}

‎templates/sidebar.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

0 commit comments

Comments
 (0)