Skip to content

Commit 90c72ff

Browse files
kRxZykRxZykRxZykRxZy
authored
Update Wiki.html
1 parent 97ae4d4 commit 90c72ff

File tree

1 file changed

+94
-77
lines changed

1 file changed

+94
-77
lines changed

‎Wiki/Wiki.html

Lines changed: 94 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -32,130 +32,147 @@
3232
border-radius: 5px;
3333
font-size: 16px;
3434
transition: background-color 0.3s;
35+
margin-right: 5px;
3536
}
3637
.button:hover {
3738
background-color: #45a049;
3839
}
39-
.form-container {
40-
display: none;
41-
margin-top: 20px;
42-
background-color: #ffffff;
43-
border: 1px solid #ccc;
44-
border-radius: 8px;
45-
padding: 20px;
46-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
47-
}
48-
.form-container input,
49-
.form-container textarea {
40+
.edit-area {
5041
width: 100%;
51-
padding: 10px;
42+
height: 100px;
5243
margin-top: 10px;
44+
padding: 10px;
45+
font-size: 16px;
5346
border: 1px solid #ccc;
5447
border-radius: 5px;
55-
font-size: 16px;
56-
}
57-
.form-container textarea {
58-
height: 150px;
5948
}
6049
</style>
6150
</head>
6251
<body>
6352
<h1>Global Wiki</h1>
6453
<div id="wiki"></div>
6554

66-
<button class="button" onclick="toggleForm()">Create New Wiki Page</button>
55+
<button class="button" onclick="showCreateForm()">Create New Wiki Page</button>
6756

68-
<div class="form-container" id="form-container">
57+
<div class="form-container" id="form-container" style="display:none;">
6958
<h2>Create New Page</h2>
70-
<input id="new-title" placeholder="Page Title" /><br>
71-
<textarea id="new-content" placeholder="Page Content"></textarea><br>
72-
<button class="button" onclick="addPage()">Add Page</button>
59+
<input id="page-title" placeholder="Page Title" /><br>
60+
<textarea id="page-content" placeholder="Page Content"></textarea><br>
61+
<button class="button" onclick="savePage()">Save Page</button>
62+
<button class="button" style="background-color: #ccc;" onclick="closeForm()">Cancel</button>
7363
</div>
7464

7565
<script>
7666
const JSON_BIN_READ_URL = 'https://api.jsonbin.io/v3/b/67c73db1e41b4d34e4a0bfb1/latest';
7767
const JSON_BIN_WRITE_URL = 'https://api.jsonbin.io/v3/b/67c73db1e41b4d34e4a0bfb1';
7868

79-
function toggleForm() {
80-
const formContainer = document.getElementById('form-container');
81-
formContainer.style.display = formContainer.style.display === 'none' || formContainer.style.display === '' ? 'block' : 'none';
82-
}
69+
let pages = [];
8370

8471
async function fetchWiki() {
8572
try {
8673
const res = await fetch(JSON_BIN_READ_URL);
8774
const data = await res.json();
88-
const pages = data.record;
89-
document.getElementById('wiki').innerHTML = pages.map((page, index) => `
90-
<div class="page">
91-
<h3>${page.title}</h3>
92-
<p>${page.content}</p>
93-
<button class="button" onclick="editPage(${index})">Edit</button>
94-
<button class="button" onclick="deletePage(${index})">Delete</button>
95-
</div>
96-
`).join('');
75+
pages = data.record;
76+
renderWiki();
9777
} catch (error) {
9878
console.error('Error fetching wiki:', error);
9979
}
10080
}
10181

102-
async function updateWiki(pages) {
103-
try {
104-
const res = await fetch(JSON_BIN_WRITE_URL, {
105-
method: 'PUT',
106-
headers: { 'Content-Type': 'application/json' },
107-
body: JSON.stringify({ record: pages })
108-
});
109-
fetchWiki();
110-
} catch (error) {
111-
console.error('Error updating wiki:', error);
112-
}
82+
function renderWiki() {
83+
document.getElementById('wiki').innerHTML = pages.map((page, index) => `
84+
<div class="page" id="page-${index}">
85+
<h3>${page.title}</h3>
86+
<p id="content-${index}">${page.content}</p>
87+
<button class="button" onclick="showEditArea(${index})">Edit</button>
88+
<button class="button" style="background-color: #e74c3c;" onclick="deletePage(${index})">Delete</button>
89+
</div>
90+
`).join('');
91+
}
92+
93+
function showCreateForm() {
94+
document.getElementById('form-container').style.display = 'block';
95+
document.getElementById('page-title').value = '';
96+
document.getElementById('page-content').value = '';
11397
}
11498

115-
async function addPage() {
116-
const title = document.getElementById('new-title').value;
117-
const content = document.getElementById('new-content').value;
99+
function closeForm() {
100+
document.getElementById('form-container').style.display = 'none';
101+
}
102+
103+
async function savePage() {
104+
const title = document.getElementById('page-title').value;
105+
const content = document.getElementById('page-content').value;
106+
118107
if (!title || !content) {
119108
alert('Title and content cannot be empty.');
120109
return;
121110
}
122-
try {
123-
const res = await fetch(JSON_BIN_READ_URL);
124-
const data = await res.json();
125-
const pages = data.record;
126-
pages.push({ title, content });
127-
updateWiki(pages);
128-
} catch (error) {
129-
console.error('Error adding page:', error);
111+
112+
pages.push({ title, content });
113+
await updateWiki();
114+
closeForm();
115+
}
116+
117+
function showEditArea(index) {
118+
const contentElement = document.getElementById(`content-${index}`);
119+
const pageElement = document.getElementById(`page-${index}`);
120+
121+
// Only create an edit area if one isn't already there
122+
if (!document.getElementById(`edit-area-${index}`)) {
123+
const currentContent = pages[index].content;
124+
125+
const editArea = document.createElement('textarea');
126+
editArea.id = `edit-area-${index}`;
127+
editArea.className = 'edit-area';
128+
editArea.value = currentContent;
129+
130+
const saveButton = document.createElement('button');
131+
saveButton.className = 'button';
132+
saveButton.innerText = 'Save Changes';
133+
saveButton.onclick = () => saveEdit(index);
134+
135+
const cancelButton = document.createElement('button');
136+
cancelButton.className = 'button';
137+
cancelButton.style.backgroundColor = '#ccc';
138+
cancelButton.innerText = 'Cancel';
139+
cancelButton.onclick = () => renderWiki(); // Rerender to remove edit area
140+
141+
contentElement.style.display = 'none'; // Hide the original content
142+
pageElement.appendChild(editArea);
143+
pageElement.appendChild(saveButton);
144+
pageElement.appendChild(cancelButton);
130145
}
131146
}
132147

133-
async function editPage(index) {
134-
const newContent = prompt('Edit page content:');
135-
if (newContent !== null) {
136-
try {
137-
const res = await fetch(JSON_BIN_READ_URL);
138-
const data = await res.json();
139-
const pages = data.record;
140-
pages[index].content = newContent;
141-
updateWiki(pages);
142-
} catch (error) {
143-
console.error('Error editing page:', error);
144-
}
148+
async function saveEdit(index) {
149+
const newContent = document.getElementById(`edit-area-${index}`).value;
150+
if (newContent.trim() === '') {
151+
alert('Content cannot be empty.');
152+
return;
145153
}
154+
155+
pages[index].content = newContent;
156+
await updateWiki();
146157
}
147158

148159
async function deletePage(index) {
149160
if (confirm('Are you sure you want to delete this page?')) {
150-
try {
151-
const res = await fetch(JSON_BIN_READ_URL);
152-
const data = await res.json();
153-
const pages = data.record;
154-
pages.splice(index, 1);
155-
updateWiki(pages);
156-
} catch (error) {
157-
console.error('Error deleting page:', error);
158-
}
161+
pages.splice(index, 1);
162+
await updateWiki();
163+
}
164+
}
165+
166+
async function updateWiki() {
167+
try {
168+
await fetch(JSON_BIN_WRITE_URL, {
169+
method: 'PUT',
170+
headers: { 'Content-Type': 'application/json' },
171+
body: JSON.stringify({ record: pages })
172+
});
173+
fetchWiki();
174+
} catch (error) {
175+
console.error('Error updating wiki:', error);
159176
}
160177
}
161178

0 commit comments

Comments
 (0)