Improved Lab view page: show current room selected

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

 $(function () {
     $('select').on('change', function () {
-        var roomId = this.value;
+        updateRoomInfo(this.value);
+    });
+});
+
+function updateRoomInfo(roomId) {
     $.ajax({
         method: 'get',
         url: '/room/' + roomId,
@@ -9,14 +13,15 @@ $(function () {
                 var image = $('<img class="img-fluid"></img>');
                 image.attr('src', '/' + response.path);
                 $('#image-holder').show().html(image);
-                    $('#labelComment').html("Where are you located?")
+                $('#labelComment').html("Where are you located?");
                 $('#comment').show();
+                $('#inputLocation').prop("disabled", false);
             } else {
                 $('#image-holder').hide();
                 $('#comment').hide();
-                    $('#labelComment').html("Comment")
+                $('#labelComment').html("Comment");
+                $('#inputLocation').prop("disabled", true);
             }
         }
     });
-    });
-});
\ No newline at end of file
+}
\ No newline at end of file

src/main/resources/templates/lab/view.html

@@ -51,15 +51,17 @@
                               th:action="@{/request/{id}/update-room/(id=${request.getId()})}">
                             <div class="form-group">
                                 <select class="custom-select custom-select-md" name="room">
-                                <option selected="selected">Update your room</option>
-                                <option th:each="room : ${lab.getFilteredRooms()}" th:value="${room.getId()}">
+                                    <option>Update your room</option>
+                                    <option th:each="room : ${lab.getFilteredRooms()}" th:value="${room.getId()}"
+                                            th:selected="${request.room.equals(room)}">
                                         [[${room}]]
                                     </option>
                                 </select>
                             </div>
                             <div class="form-group" id="comment" style="display:none;">
                                 <label>Where are you located?</label>
-                            <input type="text" class="form-control" name="comment" placeholder="Cubicle 1..." />
+                                <input type="text" class="form-control" id="inputLocation" name="comment"
+                                       placeholder="Cubicle 1..." th:value="${request.comment}"/>
                             </div>
 
                             <div class="form-group">
@@ -227,6 +229,11 @@
     </div>
 
     <script src="/js/map_loader.js"></script>
+    <script type="text/javascript">
+        $(function() {
+            updateRoomInfo($('select').val());
+        });
+    </script>
 </section>
 </body>
 </html>