# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1734439015 -3600
# Node ID d2e9b09fa717baac5329641f2a1b34fe46ee2bf7
# Parent  900e29a3d93692d4b4cd112277fd9257efa4099e
upgraded to Bootstrap 5.3.3

diff -r 900e29a3d936 -r d2e9b09fa717 NEWS
--- a/NEWS	Tue Dec 17 12:49:13 2024 +0100
+++ b/NEWS	Tue Dec 17 13:36:55 2024 +0100
@@ -11,6 +11,7 @@
 * Added support for Orthanc running in "ReadOnly" mode
 * Fix handling of revisions for cached data
 * Removed dependency on bootstrap-vue
+* Upgraded to Bootstrap 5.3.3
 
 
 Version 1.17 (2024-06-05)
diff -r 900e29a3d936 -r d2e9b09fa717 Resources/CMake/JavaScriptLibraries.cmake
--- a/Resources/CMake/JavaScriptLibraries.cmake	Tue Dec 17 12:49:13 2024 +0100
+++ b/Resources/CMake/JavaScriptLibraries.cmake	Tue Dec 17 13:36:55 2024 +0100
@@ -21,14 +21,10 @@
 
 set(BASE_URL "https://orthanc.uclouvain.be/downloads/third-party-downloads")
 
-DownloadFile(
-  "2c872dbe60f4ba70fb85356113d8b35e"
-  "${BASE_URL}/jquery-3.7.1.min.js")
-
 DownloadPackage(
-  "da0189f7c33bf9f652ea65401e0a3dc9"
-  "${BASE_URL}/dicom-web/bootstrap-4.3.1.zip"
-  "${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1")
+  "102a4386a022f26a3b604e3852fffba8"
+  "${BASE_URL}/bootstrap-5.3.3.zip"
+  "${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3")
 
 DownloadPackage(
   "8242afdc5bd44105d9dc9e6535315484"
@@ -81,17 +77,16 @@
   ${BABEL_POLYFILL_SOURCES_DIR}/polyfill.min.js
   ${CMAKE_CURRENT_BINARY_DIR}/axios-0.19.0/dist/axios.min.js
   ${CMAKE_CURRENT_BINARY_DIR}/axios-0.19.0/dist/axios.min.map
-  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/js/bootstrap.min.js
+  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/js/bootstrap.min.js
   ${CMAKE_CURRENT_BINARY_DIR}/vue-2.6.10/dist/vue.min.js
-  ${CMAKE_SOURCE_DIR}/ThirdPartyDownloads/jquery-3.7.1.min.js
   DESTINATION
   ${JAVASCRIPT_LIBS_DIR}/js
   )
 
 file(COPY
   ${CMAKE_CURRENT_BINARY_DIR}/Font-Awesome-4.7.0/css/font-awesome.min.css
-  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/css/bootstrap.min.css
-  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/css/bootstrap.min.css.map
+  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/css/bootstrap.min.css
+  ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/css/bootstrap.min.css.map
   DESTINATION
   ${JAVASCRIPT_LIBS_DIR}/css
   )
diff -r 900e29a3d936 -r d2e9b09fa717 WebApplication/app.js
--- a/WebApplication/app.js	Tue Dec 17 12:49:13 2024 +0100
+++ b/WebApplication/app.js	Tue Dec 17 13:36:55 2024 +0100
@@ -109,7 +109,7 @@
       window.scrollTo(0, element.offsetTop);
     },
     ShowErrorModal: function() {
-      $(app.$refs['modal-error']).modal();
+      bootstrap.Modal.getOrCreateInstance('#modal-error').show();
     },
     RefreshJobDetails: function() {
       axios
@@ -201,8 +201,8 @@
         item['Tag'] = i;
         return item;
       });
-      
-      $(app.$refs['study-details']).modal();
+
+      bootstrap.Modal.getOrCreateInstance('#study-details').show();
     },
     RetrieveStudy: function(study) {
       var base = '../../servers/';
@@ -214,13 +214,13 @@
           app.jobLevel = 'study';
           app.jobId = response.data.ID;
           app.jobUri = base + response.data.Path;
-          $(app.$refs['retrieve-job']).modal();
+          bootstrap.Modal.getOrCreateInstance('#retrieve-job').show();
           app.RefreshJobDetails();
         });
     },
     ConfirmDeleteStudy: function(study) {
       app.studyToDelete = study;
-      $(app.$refs['study-delete-confirm']).modal();
+      bootstrap.Modal.getOrCreateInstance('#study-delete-confirm').show();
     },
     ExecuteDeleteStudy: function(study) {
       axios
@@ -266,7 +266,7 @@
         return item;
       });
       
-      $(app.$refs['series-details']).modal();
+      bootstrap.Modal.getOrCreateInstance('#series-details').show();
     },
     RetrieveSeries: function(series) {
       var base = '../../servers/';
@@ -279,7 +279,7 @@
           app.jobLevel = 'series';
           app.jobId = response.data.ID;
           app.jobUri = base + response.data.Path;
-          $(app.$refs['retrieve-job']).modal();
+          bootstrap.Modal.getOrCreateInstance('#retrieve-job').show();
           app.RefreshJobDetails();
         });
     },
@@ -313,13 +313,13 @@
               app.previewFailure = true;
             })
               .finally(function() {
-                $(app.$refs['series-preview']).modal();
+                bootstrap.Modal.getOrCreateInstance('#series-preview').show();
               })
         })
     },
     ConfirmDeleteSeries: function(series) {
       app.seriesToDelete = series;
-      $(app.$refs['series-delete-confirm']).modal();
+      bootstrap.Modal.getOrCreateInstance('#series-delete-confirm').show();
     },
     ExecuteDeleteSeries: function(series) {
       axios
diff -r 900e29a3d936 -r d2e9b09fa717 WebApplication/index.html
--- a/WebApplication/index.html	Tue Dec 17 12:49:13 2024 +0100
+++ b/WebApplication/index.html	Tue Dec 17 13:36:55 2024 +0100
@@ -30,7 +30,7 @@
     <div class="container" id="app">
       <p style="height:1em"></p>
 
-      <div class="jumbotron">
+      <div class="bg-light mb-4 rounded-2 py-5 px-3">
         <div class="row">
           <div class="col-sm-8">
             <h1 class="display-4">DICOMweb client</h1>
@@ -62,14 +62,12 @@
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="modal-error">
+      <div class="modal" tabindex="-1" id="modal-error">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Connection error</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <p>
@@ -77,7 +75,7 @@
               </p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
           </div>
         </div>
@@ -91,33 +89,33 @@
           No DICOMweb server is configured!
         </div>
         <form style="width:100%;padding:5px;">
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-form-label col-sm-3 cols-lg-3">DICOMweb server:</label>
             <div class="col-sm-9 cols-lg-9">
-              <select class="form-control" v-model="lookup.server">
+              <select class="form-select" v-model="lookup.server">
                 <option v-for="option in servers">{{ option }}</option>
               </select>
             </div>
           </div>
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-form-label col-sm-3 cols-lg-3">Patient ID:</label>
             <div class="col-sm-9 cols-lg-9">
               <input type="text" class="form-control" v-model="lookup.patientID"></input>
             </div>
           </div>
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-form-label col-sm-3 cols-lg-3">Patient name:</label>
             <div class="col-sm-9 cols-lg-9">
               <input type="text" class="form-control" v-model="lookup.patientName"></input>
             </div>
           </div>
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-form-label col-sm-3 cols-lg-3">Accession number:</label>
             <div class="col-sm-9 cols-lg-9">
               <input type="text" class="form-control" v-model="lookup.accessionNumber"></input>
             </div>
           </div>
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label class="col-form-label col-sm-3 cols-lg-3">Study date:</label>
             <div class="col-sm-9 cols-lg-9">
               <input type="text" class="form-control" v-model="lookup.studyDate"></input>
@@ -174,14 +172,12 @@
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="study-details">
+      <div class="modal" tabindex="-1" id="study-details">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Details of study</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <table class="table table-striped">
@@ -202,21 +198,19 @@
               </table>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
           </div>
         </div>
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="study-delete-confirm">
+      <div class="modal" tabindex="-1" id="study-delete-confirm">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Confirm deletion</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <p>
@@ -227,8 +221,8 @@
               </p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" data-dismiss="modal" @click="ExecuteDeleteStudy">Confirm</button>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="ExecuteDeleteStudy">Confirm</button>
             </div>
           </div>
         </div>
@@ -273,14 +267,12 @@
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="series-preview">
+      <div class="modal" tabindex="-1" id="series-preview">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Preview of series</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <div class="alert alert-danger alert-dismissible" v-if="previewFailure">
@@ -291,21 +283,19 @@
               </div>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
           </div>
         </div>
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="series-details">
+      <div class="modal" tabindex="-1" id="series-details">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Details of series</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <table class="table table-striped">
@@ -326,21 +316,19 @@
               </table>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
           </div>
         </div>
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="series-delete-confirm">
+      <div class="modal" tabindex="-1" id="series-delete-confirm">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Confirm deletion</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <p>
@@ -351,22 +339,20 @@
               </p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-              <button type="button" class="btn btn-primary" data-dismiss="modal" @click="ExecuteDeleteSeries">Confirm</button>
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="ExecuteDeleteSeries">Confirm</button>
             </div>
           </div>
         </div>
       </div>
 
 
-      <div class="modal" tabindex="-1" ref="retrieve-job">
+      <div class="modal" tabindex="-1" id="retrieve-job">
         <div class="modal-dialog modal-xl">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Retrieving {{ jobLevel }}</h5>
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-              </button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
               <p>
@@ -386,7 +372,7 @@
               </p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
             </div>
           </div>
         </div>
@@ -396,7 +382,6 @@
       <p style="height:5em"></p>
     </div>
 
-    <script src="../libs/js/jquery-3.7.1.min.js"></script>  <!-- Necessary for Bootstrap -->
     <script src="../libs/js/bootstrap.min.js"></script>
     <script src="../libs/js/vue.min.js"></script>
     <script src="../libs/js/axios.min.js"></script>