Skip to content

Commit 5fb9510

Browse files
Robert35-dllRobert35-dll
authored
Merged connectionFail page into index.html (#40)
This allows to show it in Electron app Refers to #33
1 parent 00491de commit 5fb9510

File tree

3 files changed

+178
-187
lines changed

3 files changed

+178
-187
lines changed

‎index.html‎

Lines changed: 165 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<style>
99
html,
1010
body {
11+
background-color: #f8f9fa;
1112
height: 100%;
1213
margin: 0;
1314
}
@@ -18,10 +19,12 @@
1819
}
1920

2021
nav.navbar {
22+
display: flex;
2123
flex-shrink: 0;
2224
}
2325

2426
#jsmind_container {
27+
display: block;
2528
flex-grow: 1;
2629
overflow: auto;
2730
}
@@ -31,12 +34,52 @@
3134
font-size: 0.9em;
3235
margin-left: 1rem;
3336
}
37+
38+
.error-container {
39+
height: 100vh;
40+
display: none;
41+
align-items: center;
42+
justify-content: center;
43+
flex-direction: column;
44+
text-align: center;
45+
padding: 20px;
46+
}
47+
48+
.error-icon {
49+
font-size: 4rem;
50+
color: #dc3545;
51+
}
52+
53+
.accordion {
54+
width: 400px;
55+
text-align: left;
56+
}
57+
58+
.accordion-button::after {
59+
margin-left: auto;
60+
margin-left: 5;
61+
}
62+
63+
.accordion-collapse {
64+
transition: height 0.4s ease, opacity 0.4s ease;
65+
overflow: hidden;
66+
}
67+
68+
.accordion-body {
69+
transition: opacity 0.4s ease;
70+
opacity: 0;
71+
}
72+
73+
.accordion-collapse.show .accordion-body {
74+
opacity: 1;
75+
}
76+
3477
</style>
3578
</head>
3679

3780
<body>
3881
<!--Navbar with Buttons-->
39-
<nav class="navbar bg-body-tertiary">
82+
<nav class="navbar bg-body-tertiary" id="topNavBar">
4083
<div class="container-fluid">
4184
<div class="d-flex align-items-start" style="flex-basis: 33%; max-width: 33%;">
4285
<!--JabMap title-->
@@ -57,71 +100,76 @@
57100

58101
<!--Editor buttons-->
59102
<div class="d-flex justify-content-center" style="flex-basis: 33%; max-width: 33%;">
60-
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
61-
<!--Undo Button-->
62-
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
63-
<i class="bi bi-arrow-counterclockwise"></i>
64-
</button>
65-
<!--Redo Button-->
66-
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
67-
<i class="bi bi-arrow-clockwise"></i>
68-
</button>
69-
<!--New Topic (sibling node) Button-->
70-
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
71-
<i class="bi bi-node-plus-fill"></i>
72-
</button>
73-
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
74-
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
75-
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
76-
</button>
103+
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
104+
<!--Undo Button-->
105+
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
106+
<i class="bi bi-arrow-counterclockwise"></i>
107+
</button>
108+
<!--Redo Button-->
109+
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
110+
<i class="bi bi-arrow-clockwise"></i>
111+
</button>
112+
<!--New Topic (sibling node) Button-->
113+
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip"
114+
title="New sibling node">
115+
<i class="bi bi-node-plus-fill"></i>
116+
</button>
117+
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
118+
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip"
119+
title="New child node">
120+
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
121+
</button>
77122

78-
<!--Tags Dropdown-->
79-
<div class="dropdown">
80-
<button class="btn btn-secondary dropdown-toggle me-2" type="button" id="tagsDropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside">
81-
<i class="bi bi-tags"></i>
123+
<!--Tags Dropdown-->
124+
<div class="dropdown">
125+
<button class="btn btn-secondary dropdown-toggle me-2" type="button" id="tagsDropdownMenuButton"
126+
data-bs-toggle="dropdown" data-bs-auto-close="outside">
127+
<i class="bi bi-tags"></i>
128+
</button>
129+
<div class="dropdown-menu">
130+
<h6 class="dropdown-header">Icons for nodes</h6>
131+
<button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
132+
<span>Cycle</span><span class="shortcut">Ctrl + 1</span>
133+
</button>
134+
<button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
135+
<span>Star</span><span class="shortcut">Ctrl + 2</span>
136+
</button>
137+
<button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
138+
<span>Question</span><span class="shortcut">Ctrl + 3</span>
139+
</button>
140+
<button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
141+
<span>Warning</span><span class="shortcut">Ctrl + 6</span>
142+
</button>
143+
<button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
144+
<span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
145+
</button>
146+
<button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
147+
<span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
148+
</button>
149+
<button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
150+
<span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
82151
</button>
83-
<div class="dropdown-menu">
84-
<h6 class="dropdown-header">Icons for nodes</h6>
85-
<button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
86-
<span>Cycle</span><span class="shortcut">Ctrl + 1</span>
87-
</button>
88-
<button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
89-
<span>Star</span><span class="shortcut">Ctrl + 2</span>
90-
</button>
91-
<button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
92-
<span>Question</span><span class="shortcut">Ctrl + 3</span>
93-
</button>
94-
<button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
95-
<span>Warning</span><span class="shortcut">Ctrl + 6</span>
96-
</button>
97-
<button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
98-
<span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
99-
</button>
100-
<button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
101-
<span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
102-
</button>
103-
<button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
104-
<span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
105-
</button>
106-
</div>
107152
</div>
153+
</div>
108154

109-
<!--BibEntry nodes Dropdown-->
110-
<div class="dropdown">
111-
<button class="btn btn-secondary dropdown-toggle me-2" id="BibEntryDropdownMenuButton" data-bs-toggle="dropdown">
112-
<i class="bi bi-file-earmark-text"></i>
155+
<!--BibEntry nodes Dropdown-->
156+
<div class="dropdown">
157+
<button class="btn btn-secondary dropdown-toggle me-2" id="BibEntryDropdownMenuButton"
158+
data-bs-toggle="dropdown">
159+
<i class="bi bi-file-earmark-text"></i>
160+
</button>
161+
<div class="dropdown-menu">
162+
<h6 class="dropdown-header">New BibTeX node</h6>
163+
<button id="addBibEntryAsSiblingBtn" class="btn dropdown-item">
164+
<i class="bi bi-node-plus-fill"> </i> As sibling node
165+
</button>
166+
<button id="addBibEntryAsChildBtn" class="btn dropdown-item">
167+
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"> </i> As child
168+
node
169+
<span class="shortcut">Ctrl + B</span>
113170
</button>
114-
<div class="dropdown-menu">
115-
<h6 class="dropdown-header">New BibTex node</h6>
116-
<button id="addBibEntryAsSiblingBtn" class="btn dropdown-item">
117-
<i class="bi bi-node-plus-fill"> </i> As sibling node
118-
</button>
119-
<button id="addBibEntryAsChildBtn" class="btn dropdown-item">
120-
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"> </i> As child node
121-
<span class="shortcut">Ctrl + B</span>
122-
</button>
123-
</div>
124171
</div>
172+
</div>
125173

126174
<div class="dropdown">
127175
<button class="btn btn-secondary dropdown-toggle me-2" id="PDFDropDownMenuButton" data-bs-toggle="dropdown">
@@ -189,6 +237,63 @@ <h5 class="modal-title" id="SelectPDFModalLabel">Choose PDFs to add</h5>
189237
</div>
190238
</div>
191239

240+
<!--A 'connection failed' page-->
241+
<div class="error-container" id="noConnectionBlock">
242+
<div class="error-icon">⚠️</div>
243+
<h1 class="mt-4">Server Connection Failed</h1>
244+
<p class="text-muted">Your JabMap couldn’t connect to the server. Here are a few things you can try:</p>
245+
246+
<div class="accordion" id="tipsAccordion">
247+
<div class="accordion-item">
248+
<h2 class="accordion-header" id="headingTwo">
249+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tip2"
250+
aria-expanded="false" aria-controls="tip2">
251+
🤖 Ensure JabRef server is running
252+
</button>
253+
</h2>
254+
<div id="tip2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#tipsAccordion">
255+
<div class="accordion-body">
256+
<ol class="list-group list-group-flush list-group-numbered">
257+
<li class="list-group-item">Start your JabRef</li>
258+
<li class="list-group-item">Go to File -> Preferences</li>
259+
<li class="list-group-item">Check the "Http Server"</li>
260+
</ol>
261+
</div>
262+
</div>
263+
</div>
264+
265+
<div class="accordion-item">
266+
<h2 class="accordion-header" id="headingThree">
267+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tip3"
268+
aria-expanded="false" aria-controls="tip3">
269+
👾 Verify installation
270+
</button>
271+
</h2>
272+
<div id="tip3" class="accordion-collapse collapse" aria-labelledby="headingThree"
273+
data-bs-parent="#tipsAccordion">
274+
<div class="accordion-body">
275+
<ol class="list-group list-group-flush list-group-numbered">
276+
<li class="list-group-item">
277+
Ensure you followed
278+
<a
279+
href="https://github.com/JabRef/jabmap/tree/finishing-sprint-3?tab=readme-ov-file#running-it-locally">
280+
running it locally</a>
281+
step of the documentation.
282+
</li>
283+
<li class="list-group-item">
284+
Then use the <code>gg.cmd</code> as guided in
285+
<a href="https://github.com/JabRef/jabmap/tree/finishing-sprint-3?tab=readme-ov-file#using-ggcmd">
286+
the following step</a>.
287+
</li>
288+
</ol>
289+
</div>
290+
</div>
291+
</div>
292+
</div>
293+
294+
<button id="tryAgainBtn" class="btn btn-primary mt-4">Try Again</button>
295+
</div>
296+
192297
<script type="module" src="/src/main.js"></script>
193298
</body>
194299

‎src/main.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,23 @@ let httpClient = new HTTPClient();
2929
* If not connected, loads the fail page.
3030
*/
3131
async function checkConnection() {
32+
let mainDisplayValue = 'flex';
33+
let failDisplayValue = 'none';
34+
3235
let isConnected = await httpClient.isConnected();
36+
3337
if (!isConnected) {
34-
window.location.href = './src/pages/connectionFailed.html';
35-
}
38+
jm.select_clear();
39+
mainDisplayValue = 'none';
40+
failDisplayValue = 'flex';
41+
}
42+
43+
topNavBar.style.display = mainDisplayValue;
44+
jsmind_container.style.display = mainDisplayValue;
45+
noConnectionBlock.style.display = failDisplayValue;
3646
}
3747
checkConnection();
48+
tryAgainBtn.onclick = checkConnection;
3849

3950
// "load" initial mind map data
4051
let mind = DefaultMap;

0 commit comments

Comments
 (0)