Resolve "Enqueue Room image disappears"

What does this mr do?

This merge request solves the issue that if someone switches either from submission to question or chooses a different question, the map associated with the currently selected room disappears.

The bug happened by whenever a select option got changed, it took the index of the recently changed to select an image. E.g. option 1 = Submission, option 2 = Question. You switched from submission to question, the map of room with index 2 would be shown, regardless which one was selected. If only the first room had a map, the map would disappear if any option with another index of 1 was chosen.

Actions taken to fix bug

Changed map_loader.js by checking the currently selected room instead of the most recently changed select option. Also introduced an error function such that there is a fallback if the get request doesn't return anything. Finally did some minor 6refactoring in the lab/enqueue.html such that there is consistency when selecting any of the options.

Does this MR meet the acceptance criteria?

• I have added a changelog entry to reflect the significant changes I made and the bug I fixed.
• A test was created to test the bug.
• I have updated the documentation accordingly.
• I adhere to the style guide.

src/main/resources/static/js/map_loader.js

@@ -16,8 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 $(function () {
-    $('select').on('change', function () {
-        updateRoomInfo(this.value);
+    $('select#inputRoom').on('change', function () {
+        // Get the room ID of the currently selected room.
+        const roomId = $("#inputRoom").find(":selected").attr("value");
+        updateRoomInfo(roomId);
     });
 });
 
@@ -26,19 +28,21 @@ function updateRoomInfo(roomId) {
         method: 'get',
         url: '/room/' + roomId,
         success: function (response) {
-            if (response.path !== undefined) {
-                var image = $('<img class="img-fluid" alt="Room map">');
-                image.attr('src', '/' + response.path);
-                $('#image-holder').show().html(image);
-                $('#labelComment').html("Where are you located?");
-                $('#comment').show();
-                $('#inputLocation').prop("disabled", false);
-            } else {
-                $('#image-holder').hide();
-                $('#comment').hide();
-                $('#labelComment').html("Comment");
-                $('#inputLocation').prop("disabled", true);
+            if (response.path === undefined) {
+                this.error();
+                return;
             }
+            const image = $('<img class="img-fluid" alt="Room map">');
+            image.attr('src', '/' + response.path);
+
+            $('#image-holder').show().html(image);
+            $('#comment').show();
+            $('#inputLocation').prop("disabled", false);
+        },
+        error: function() {
+            $('#image-holder').hide();
+            $('#comment').hide();
+            $('#inputLocation').prop("disabled", true);
         }
     });
-}
\ No newline at end of file
+}