Skip to content

Commit 90982bb

Browse files
LarsLindainLarsLindain
committed
2 parents fe32e94 + 9950290 commit 90982bb

File tree

1 file changed

+157
-50
lines changed

1 file changed

+157
-50
lines changed

‎navigation/history.md‎

Lines changed: 157 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,77 +12,184 @@ permalink: /binary_history/
1212
<title>Binary History</title>
1313
<style>
1414
body {
15+
background: linear-gradient(135deg, #964b00, #ff8c00, #ffa756); /* 180deg for top-to-bottom gradient */
16+
color: #ffffff;
1517
font-family: Arial, sans-serif;
18+
min-height: 100vh;
1619
margin: 20px;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
overflow-y: auto;
24+
}
25+
h2, h3 {
26+
color: rgb(0, 0, 0);
27+
border-bottom: 4px solid #000000;
28+
font-weight: bold; /* Bold text */
29+
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), /* White shadow */
30+
2px 2px 0 rgba(255, 255, 255, 0.6); /* Lighter shadow */
31+
border-radius: 10px; /* Rounded effect */
32+
padding: 10px; /* Space around the text */
33+
margin-bottom: 20px
1734
}
1835
.event {
1936
margin-bottom: 20px;
2037
padding: 10px;
21-
border: 1px solid #ccc;
38+
border: 1px solid #000000;
2239
border-radius: 5px;
2340
}
24-
.event h3 {
25-
margin: 0;
41+
p {
42+
color: white
43+
}
44+
table {
45+
width: 100%;
46+
text-align: center;
47+
border-collapse: separate;
48+
border-spacing: 10px;
49+
border: none; /* Remove any borders from the table */
50+
}
51+
td {
52+
background-color: transparent !important; /* Remove background color */
53+
padding: 0 !important; /* Remove padding */
54+
border: none !important; /* Remove borders from table cells */
55+
}
56+
div {
57+
margin: 20px 0;
58+
}
59+
textarea {
60+
height: 100px;
61+
width: 1000px;
62+
}
63+
.regularButton {
64+
all: unset; /* Removes all default styles */
65+
background-color: white !important;
66+
border: 2px solid #ccc;
67+
border-radius: 12px;
68+
padding: 10px 20px;
69+
font-size: 16px;
70+
cursor: pointer;
71+
transition: background-color 0.3s ease, transform 0.1s ease;
72+
font-weight: bold;
73+
color: black !important;
74+
}
75+
.regularButton:hover {
76+
background-color: lightgray !important; /* Light gray on hover */
77+
transform: scale(1.05);
78+
}
79+
.regularButton:active {
80+
background-color: grey !important; /* Slightly darker gray when clicked */
81+
transform: scale(0.95); /* Slight scale-down effect on click */
2682
}
2783
</style>
2884
</head>
2985
<body>
3086
<div id="binary-history"></div>
3187

88+
<h2>Add a Binary History Event</h2>
89+
<textarea placeholder="Enter the year" id="eventYear" style="height: 30px; width: 200px;"></textarea>
90+
<p></p>
91+
<textarea placeholder="Enter the event description here..." id="eventDescription"></textarea>
92+
<p></p>
93+
<button class="regularButton" onclick="addEvent()">Submit Event</button>
94+
3295
<script type = "module" defer>
33-
import { pythonURI, fetchOptions } from '../assets/js/api/config.js'
34-
async function fetchAndDisplayBinaryHistory() {
96+
import { pythonURI, fetchOptions } from '../assets/js/api/config.js'
97+
98+
async function fetchAndDisplayBinaryHistory() {
3599
try {
36-
fetch(pythonURI + "/api/binary-history",
37-
{
38-
method: "GET",
39-
headers: {
40-
"Content-Type": "application/json",
41-
},
42-
43-
})
44-
.then(response => {
45-
if (response.ok) {
46-
return response.json()
47-
}
48-
throw new Error("Network response failed")
49-
})
50-
.then(data => {
51-
52-
// Get the container where history will be displayed
53-
const historyContainer = document.getElementById('binary-history');
54-
55-
// Clear any previous content
56-
historyContainer.innerHTML = '';
57-
58-
// Display each event
59-
data.forEach((event) => {
60-
const eventDiv = document.createElement('div');
61-
eventDiv.classList.add('event');
62-
63-
const title = document.createElement('h3');
64-
title.textContent = event.event_year;
65-
66-
const description = document.createElement('p');
67-
description.textContent = event.event_description;
68-
69-
eventDiv.appendChild(title);
70-
eventDiv.appendChild(description);
71-
72-
historyContainer.appendChild(eventDiv);
100+
fetch(pythonURI + "/api/binary-history", // Fetch binary history from the given URI
101+
{
102+
method: "GET", // Use GET method
103+
headers: {
104+
"Content-Type": "application/json", // Set request headers
105+
}
106+
})
107+
.then(response => { // Handle the response
108+
if (response.ok) {
109+
return response.json() // Parse the JSON if the response is there
110+
}
111+
throw new Error("Network response failed") // Handle error if response is not there
112+
})
113+
.then(data => { // Process the received data
114+
115+
// Get the container where history will be displayed
116+
const historyContainer = document.getElementById('binary-history');
117+
118+
// Clear any previous content
119+
historyContainer.innerHTML = '';
120+
121+
// Display each event
122+
data.forEach((event) => { // Iterate through each event in the data
123+
const eventDiv = document.createElement('div'); // Create a div for each event
124+
eventDiv.classList.add('event'); // Add a class for styling
125+
126+
const title = document.createElement('h3'); // Create element for the year
127+
title.textContent = event["year"]; // Set the year as text content
128+
129+
const description = document.createElement('p'); // Create element for description
130+
description.textContent = event.description; // Set description as text content
131+
132+
eventDiv.appendChild(title); // Append title to the event div
133+
eventDiv.appendChild(description); // Append description to the event div
134+
135+
historyContainer.appendChild(eventDiv); // Append the event div to the container
136+
});
137+
})
138+
.catch(error => { // Handle any errors during fetch
139+
console.error("There was a problem with the fetch", error);
73140
});
74-
})
75-
.catch(error => {
76-
console.error("There was a problem with the fetch", error);
77-
});
78141

79-
} catch (error) {
142+
} catch (error) { // Handle any errors during the function execution
143+
console.error('Error fetching binary history:', error);
144+
}
145+
}
146+
147+
fetchAndDisplayBinaryHistory()
148+
149+
async function addEvent() { // Define an async function to add an event
150+
const year = document.getElementById('eventYear').value.trim(); // Get year value from input
151+
const description = document.getElementById('eventDescription').value.trim();
152+
// Get description value from input
153+
154+
if (!year || !description) {
155+
alert('Please fill in both the year and event description.'); // Alert if inputs are invalid
156+
return;
157+
}
158+
159+
const eventData = { // Create an object with the event data
160+
year: parseInt(year, 10), // Parse year as an integer
161+
description: description, // Add description
162+
};
163+
164+
try {
165+
fetch(pythonURI + "/api/binary-history", { // Send a POST request to add the event
166+
method: "POST", // Use POST method
167+
headers: {
168+
"Content-Type": "application/json", // Set request headers
169+
},
170+
body: JSON.stringify(eventData) // Send event data in the body of the request
171+
})
172+
.then(response => { // Handle the response
173+
if (response.ok) { // Check if the response is there
174+
return response.json(); // Parse the JSON if response is there
175+
}
176+
throw new Error("Network response failed"); // Handle error if response is not there
177+
})
178+
.then(data => { // Process the response data
179+
document.getElementById('eventYear').value = ''; // Clear the input fields
180+
document.getElementById('eventDescription').value = '';
181+
fetchAndDisplayBinaryHistory(); // Refresh the displayed history
182+
})
183+
.catch(error => { // Handle any errors during fetch
184+
console.error("There was a problem with the fetch", error);
185+
});
186+
187+
} catch (error) { // Handle any errors during the function execution
80188
console.error('Error fetching binary history:', error);
81189
}
82190
}
83-
fetchAndDisplayBinaryHistory()
84191

85-
// Call the function to display the history when the page loads
192+
window.addEvent = addEvent; // Assign the addEvent function to the global scope
86193
</script>
87194
</body>
88-
</html>
195+
</html>

0 commit comments

Comments
 (0)