Skip to content

Merged connectionFail page into index.html #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Robert35-dll merged 1 commit into from
Jul 14, 2025
Merged

Merged connectionFail page into index.html #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 165 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<style>
html,
body {
background-color: #f8f9fa;
height: 100%;
margin: 0;
}
Expand All @@ -18,10 +19,12 @@
}

nav.navbar {
display: flex;
flex-shrink: 0;
}

#jsmind_container {
display: block;
flex-grow: 1;
overflow: auto;
}
Expand All @@ -31,12 +34,52 @@
font-size: 0.9em;
margin-left: 1rem;
}

.error-container {
height: 100vh;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 20px;
}

.error-icon {
font-size: 4rem;
color: #dc3545;
}

.accordion {
width: 400px;
text-align: left;
}

.accordion-button::after {
margin-left: auto;
margin-left: 5;
}

.accordion-collapse {
transition: height 0.4s ease, opacity 0.4s ease;
overflow: hidden;
}

.accordion-body {
transition: opacity 0.4s ease;
opacity: 0;
}

.accordion-collapse.show .accordion-body {
opacity: 1;
}

</style>
</head>

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

<!--Editor buttons-->
<div class="d-flex justify-content-center" style="flex-basis: 33%; max-width: 33%;">
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
<!--Undo Button-->
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
<i class="bi bi-arrow-counterclockwise"></i>
</button>
<!--Redo Button-->
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
<i class="bi bi-arrow-clockwise"></i>
</button>
<!--New Topic (sibling node) Button-->
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New sibling node">
<i class="bi bi-node-plus-fill"></i>
</button>
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="New child node">
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
</button>
<!--Button class explanation: class = "btn color theme margin to the right (me-2)"-->
<!--Undo Button-->
<button id="undoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Undo">
<i class="bi bi-arrow-counterclockwise"></i>
</button>
<!--Redo Button-->
<button id="redoBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip" title="Redo">
<i class="bi bi-arrow-clockwise"></i>
</button>
<!--New Topic (sibling node) Button-->
<button id="newSiblingBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip"
title="New sibling node">
<i class="bi bi-node-plus-fill"></i>
</button>
<!--New Subtopic (child node) Button (icon rotated 90 degrees)-->
<button id="newChildBtn" class="btn btn-secondary me-2" type="button" data-bs-toggle="tooltip"
title="New child node">
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"></i>
</button>

<!--Tags Dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle me-2" type="button" id="tagsDropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-tags"></i>
<!--Tags Dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle me-2" type="button" id="tagsDropdownMenuButton"
data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="bi bi-tags"></i>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Icons for nodes</h6>
<button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
<span>Cycle</span><span class="shortcut">Ctrl + 1</span>
</button>
<button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
<span>Star</span><span class="shortcut">Ctrl + 2</span>
</button>
<button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
<span>Question</span><span class="shortcut">Ctrl + 3</span>
</button>
<button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
<span>Warning</span><span class="shortcut">Ctrl + 6</span>
</button>
<button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
<span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
</button>
<button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
<span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
</button>
<button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
<span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Icons for nodes</h6>
<button id="iconCycleBtn" class="dropdown-item d-flex justify-content-between">
<span>Cycle</span><span class="shortcut">Ctrl + 1</span>
</button>
<button id="iconStarBtn" class="dropdown-item d-flex justify-content-between">
<span>Star</span><span class="shortcut">Ctrl + 2</span>
</button>
<button id="iconQuestionBtn" class="dropdown-item d-flex justify-content-between">
<span>Question</span><span class="shortcut">Ctrl + 3</span>
</button>
<button id="iconWarningBtn" class="dropdown-item d-flex justify-content-between">
<span>Warning</span><span class="shortcut">Ctrl + 6</span>
</button>
<button id="iconLightbulbBtn" class="dropdown-item d-flex justify-content-between">
<span>Lightbulb</span><span class="shortcut">Ctrl + 7</span>
</button>
<button id="iconGreenFlagBtn" class="dropdown-item d-flex justify-content-between">
<span>Green Flag</span><span class="shortcut">Ctrl + 8</span>
</button>
<button id="iconRedFlagBtn" class="dropdown-item d-flex justify-content-between">
<span>Red Flag</span><span class="shortcut">Ctrl + 9</span>
</button>
</div>
</div>
</div>

<!--BibEntry nodes Dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle me-2" id="BibEntryDropdownMenuButton" data-bs-toggle="dropdown">
<i class="bi bi-file-earmark-text"></i>
<!--BibEntry nodes Dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle me-2" id="BibEntryDropdownMenuButton"
data-bs-toggle="dropdown">
<i class="bi bi-file-earmark-text"></i>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">New BibTeX node</h6>
<button id="addBibEntryAsSiblingBtn" class="btn dropdown-item">
<i class="bi bi-node-plus-fill"> </i> As sibling node
</button>
<button id="addBibEntryAsChildBtn" class="btn dropdown-item">
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"> </i> As child
node
<span class="shortcut">Ctrl + B</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">New BibTex node</h6>
<button id="addBibEntryAsSiblingBtn" class="btn dropdown-item">
<i class="bi bi-node-plus-fill"> </i> As sibling node
</button>
<button id="addBibEntryAsChildBtn" class="btn dropdown-item">
<i class="bi bi-diagram-2-fill" style="transform: rotate(-90deg); display: inline-block;"> </i> As child node
<span class="shortcut">Ctrl + B</span>
</button>
</div>
</div>
</div>

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

<!--A 'connection failed' page-->
<div class="error-container" id="noConnectionBlock">
<div class="error-icon">⚠️</div>
<h1 class="mt-4">Server Connection Failed</h1>
<p class="text-muted">Your JabMap couldn’t connect to the server. Here are a few things you can try:</p>

<div class="accordion" id="tipsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tip2"
aria-expanded="false" aria-controls="tip2">
🤖 Ensure JabRef server is running
</button>
</h2>
<div id="tip2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#tipsAccordion">
<div class="accordion-body">
<ol class="list-group list-group-flush list-group-numbered">
<li class="list-group-item">Start your JabRef</li>
<li class="list-group-item">Go to File -> Preferences</li>
<li class="list-group-item">Check the "Http Server"</li>
</ol>
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tip3"
aria-expanded="false" aria-controls="tip3">
👾 Verify installation
</button>
</h2>
<div id="tip3" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#tipsAccordion">
<div class="accordion-body">
<ol class="list-group list-group-flush list-group-numbered">
<li class="list-group-item">
Ensure you followed
<a
href="https://github.com/JabRef/jabmap/tree/finishing-sprint-3?tab=readme-ov-file#running-it-locally">
running it locally</a>
step of the documentation.
</li>
<li class="list-group-item">
Then use the <code>gg.cmd</code> as guided in
<a href="https://github.com/JabRef/jabmap/tree/finishing-sprint-3?tab=readme-ov-file#using-ggcmd">
the following step</a>.
</li>
</ol>
</div>
</div>
</div>
</div>

<button id="tryAgainBtn" class="btn btn-primary mt-4">Try Again</button>
</div>

<script type="module" src="/src/main.js"></script>
</body>

Expand Down
15 changes: 13 additions & 2 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,23 @@ let httpClient = new HTTPClient();
* If not connected, loads the fail page.
*/
async function checkConnection() {
let mainDisplayValue = 'flex';
let failDisplayValue = 'none';

let isConnected = await httpClient.isConnected();

if (!isConnected) {
window.location.href = './src/pages/connectionFailed.html';
}
jm.select_clear();
mainDisplayValue = 'none';
failDisplayValue = 'flex';
}

topNavBar.style.display = mainDisplayValue;
jsmind_container.style.display = mainDisplayValue;
noConnectionBlock.style.display = failDisplayValue;
}
checkConnection();
tryAgainBtn.onclick = checkConnection;

// "load" initial mind map data
let mind = DefaultMap;
Expand Down
Loading