Skip to content

Saving loading maps#7

Merged
iloveskittles82 merged 16 commits intodevfrom
saving-loading-maps
May 31, 2025
Merged

Saving loading maps#7
iloveskittles82 merged 16 commits intodevfrom
saving-loading-maps

Conversation

@Robert35-dll
Copy link
Collaborator

@Robert35-dll Robert35-dll commented May 29, 2025

📝 Description

One of the basic functionalities of any editor is to save and load edited files. This is being achieved by JabMap via sending HTTP requests to the JabRef's server that performs actual file accessing (reading and writing).

✨ What's New

With this PR following functionalities will be introduced:

  • Making HTTP-Requests to JabRef's (local) server
  • Saving and loading current mind map via these requests
  • Retrieving a list of available / saved mind maps

All requests are performed by HTTPClient object. It's class is defined at ./http directory.

🤿 A Deeper Look

HTTPClient

The HTTPClient class provides functions to perform saving and loading requests however not to check the initial connection to the server (see Error Handling below). The processing of a request is subdivided into two steps.

Public (outer) Interface

It's public methods SaveMap(), LoadMap(), ListMaps() define their specific request's properties such as method, headers, body etc. These methods should be bound to the GUI through some additional JS logic due to following outputs:

  • PUT requests are considered to return the "No data received back." string upon success.
  • GET requests return their specific data (either an object or an array or whatsoever received from the server).

Private (inner) Interface

All public methods listed above share the same sending private method #performFetch() that performs the actual request and processes it's response with final logging into console.

Error Handling

Any request can fail due to several reasons. In this case the HTTPClient provides the error's and request's details by (again) logging them into console according to following scheme:

  1. If there's no connection to the server, {method} {url} Request failed is logged and an empty string "" is returned.
  2. If an error occurred (either on server's or client's side), a {response.status} code and provided request's {options} are logged additionally and an empty string "" is returned.

##📑 Open TODOs:

  • Simplify LoadMap() by setting the default path
  • Check naming of methods and variables
  • Add a global NULL_MAP constant

📋 Follow-up:

@Robert35-dll Robert35-dll self-assigned this May 29, 2025
@Robert35-dll Robert35-dll added the enhancement New feature or request label May 29, 2025
* Requests a list of stored mind maps saved on the server.
* @returns { object } - A list of available mind maps stored on the server.
*/
async ListMaps() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Method names start with a capital letter. I did not see that jn the JavaScript world. Is this a certain style guide you follow?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I used to program in C# last year. It's common convention there :3 Should I rename things according to one of JS?

* @param { map } mindMap - The mind map to save.
* @returns { string } - A string of the request's result.
*/
async SaveMap(mindMap) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Method parameters not consistent to LoadMap. 😅

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, my idea was to "calculate" the saving path (with a default root) according to provided map, therefore I didn't include the path as parameter.

@koppor
Copy link
Member

koppor commented May 29, 2025

I don't see test cases (which is OK, testing with two systems is hard; hint: maybe GitHub services with the JabRef docker image could work, but IDK)

There should be a README.md (or other developer documentation) how to start the server. A link might be enough.

@Robert35-dll Robert35-dll marked this pull request as draft May 29, 2025 17:33
@iloveskittles82 iloveskittles82 marked this pull request as ready for review May 31, 2025 16:45
@iloveskittles82 iloveskittles82 merged commit 8071952 into dev May 31, 2025
1 check passed
@iloveskittles82 iloveskittles82 deleted the saving-loading-maps branch May 31, 2025 16:45
Robert35-dll added a commit that referenced this pull request Jun 17, 2025
* Add gh-publish workflow

* Make files available

* Fix path

* # Added Bootstrap Navbar with Mock-Buttons

Integrated Bootstrap and added a Navbar with 5 useless buttons. More buttons are to follow in the upcoming sprints.
The 5 buttons will bring the following functionalities:
- undo
- redo
- add sibling node (topic)
- add child node (subtopic)
- add tags

The navbar currently collapses if the width of the site is too small. This gives a cleaner appearance on small window sizes.

* Code cleanup and comments.

* added tooltips for the buttons

* added save and open buttons to the right of "JabMap" (on the left hand side in the topbar)

* added save and open buttons to the right of "JabMap" (on the left hand side in the topbar) and a min. size for the mindmap container
the buttons have to be implemented still

* removed fixed size of the midnmap container
the page is now no longer accidentally scrollable which means the topbar will always stay where it is and the mindmap container will fill the rest of the window

* Local installation of dependencies/packages (#3)

for details see #3
commits: 
* preemptively added vite build output to gitignore

* created package.json with ```npm init -y```

* installed bootstrap, bootstrap icons and jsmind with npm
```npm install jsmind bootstrap bootstrap-icons```

* installed vite
ran ```npm install --save-dev vite```
response:
´´´
added 57 packages, and audited 62 packages in 4s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
´´´

* added main.js with basic mindmap example

* changed index.html to reference the src/main.js
by using vite, we can now import all important recources in the main.js file and only need to reference it in the index.html
also added vite helper functions in the package.json file

* quickly added comments

* moved drag-and-drop-nodes code to an extra file and added default options for creating a mindmap to main.js

* uninstalled jsmind, copied repo to src folder and modified import statements
I essentially reset parts of my "progress" with "npm uninstall jsmind". Nonetheless, i chose to import the code manually since it would allow us to more easily modify it in the future. it also circumvents the problem that the drag and drop functionality has caused before.
I hope this way doesn't cause any compatibility issues.

U can now run
```
npm install
npm run dev
```
to start the dev server. And
```
npm install
npm run build
npm run preview
```
to build and display the built application.

* deleted unused folders
the "js" and "css" folders were created with the project and contain bootstrap code. this was rendered useless with the npm installation of bootstrap.

* installed popperjs and did minor adjustments
installed popperjs dependency for bootstrap downdown menus, Changed licence to MIT and changed language in html to english

* tidy work

* fixed navbar alignment

* Refine check.yml (#4)

* Update NodeJS from 20 to 22

* Create vite.config.js (#5)

* moved "save" and "load" buttons out of dropdown and next to "Jabmap", centered the buttons

* added html ids to buttons, added clickhandlers for sibling and child-nodes

* added empty click handlers for all the buttons

* Created an ActionStack class to handle the undo/redo functionality and bound it to GUI (#8)

* Created an ActionStack class to handle the undo/redo functionality

* imported action stack and set up click handlers

* implemented undo & redo functionality with gui-buttons

* added shortcuts

---------

Co-authored-by: iloveskittles <40355179+iloveskittles82@users.noreply.github.com>

* Saving and loading maps (#7)

* Created a FileManager class to include file access

* Created a HTTP-client to handle basic save/load requests

* Reversed the default options dictionary to be assigned if passed one is null or undefined

* Added ListMap() for retrieving available maps and updated docstrings of HTTPClient

* Extended performFetch() to differ between GET and PUT requests as well as error handling to differ between connection and response failures

* Provided some minor comments to functions' parameters and URLs

* Removed FileManager class since it's functionality has been fully taken by HTTPClient class

* added shortcuts

* included a NULL_MAP as default return value for PUT and failed requests

* simplified default paths in save/loadMap()

* integrated http client into GUI

* fixed http client class export

* added comments and a POST function to create a file through the server

* add modal with placeholders

* add dialog with libraries to choose from

---------

Co-authored-by: iloveskittles <40355179+iloveskittles82@users.noreply.github.com>

* Update README.md

* Comments and README polishing

* Fixed a bug with double state saving after editing a node

* Small refactor of saving maps' states in jsMind class with some comments

* Updated comments in HTTPClient class

* Removed ActionStack's import and updated saving initial state of a mind map in main.js

* Updated and compressed comments in main.js

* Improved code readability of click handlers for "Open buttons"

* Cleaned jsMind's options' definition in main.js

* Fixed spacings and comments in index.html

* Removed second default value from preformFetch() and fixed docstrings in jsMind undo()/redo()

* Capitalized chapters and added one for installing the server

* Added alternative method to start the server and linked it's section in Try It Out chapter

* Improved formatting of the building guide

* change POST to PUT

* Icons for nodes (#14)

* Adding Icons and Tags Feature to MindMap

* Initial test for icons and tags feature in the mind map

* Add new tags and icons;test integration with additional node-text

* adding complete Mindmap icons and it's keyboard shortcuts

* Added Shalabi's index.html with tags

* adding icons list with its shortcuts in the icons list and solving node editing text problems

* Update request for initial Icons-and-Tags branch (#15)

* change POST to PUT

* experimenting with data-attribute

* trying to setup "enum" for icons and stuff

* Disabled standard browser's <Ctrl> + <number_key> shortcut in case a tag should be toggled

* Refactored toggling tags and highlights using jsMind shortcuts' handling

* Added a node extension method to include "icons" and "highlight" properties to all nodes

* Changed tags' button to a dropdown

* WIP set up shortcut handler and added sources for icons

* got the icons working with shortcuts
open todos:
 - [] Source manager to save nodes cleanly
 - [] functionality for buttons in dropdown
 - [] icons in dropdown
 - [] removing shortcuts for align,pdf and comment

* cleanup and comments

* Added a ResourceManager for unified / easier access to icons

* add debug button for printing out mindmap data to console

* add empty button handlers and a third, invisible div in the navbar to center the buttons in the middle while allowing the dropdown menu to function properly

* add clickhandlers

* renaming the ids for the buttons

* Removed doubled comments from jsmind.view_provider._default_node_render()

* Refactored ActionStack class to save maps' copies instead of objects

* adding shortcuts to buttons

* Fixed bugs with undefined icons' lists in new nodes

* Enabled standard shortcuts for editing nodes' topics

* Added check icons and implemented toggle cycles

---------

Co-authored-by: iloveskittles <40355179+iloveskittles82@users.noreply.github.com>

---------

Co-authored-by: Shalabi <Mohamed.Shalabi@Student.HTW-Berlin.de>
Co-authored-by: Robert Koch <Robert.Koch@Student.HTW-Berlin.de>

---------

Co-authored-by: Oliver Kopp <kopp.dev@gmail.com>
Co-authored-by: Robert Koch <Robert.Koch@Student.HTW-Berlin.de>
Co-authored-by: Shalabi <Mohamed.Shalabi@Student.HTW-Berlin.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants