Mercurial > hg > orthanc-education

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orthanc for Education</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/font-awesome.min.css"/>

    <style>
      .hidden {
          display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" class="container p-0 hidden">

      <div class="py-4 text-center">
        <a href="https://www.uclouvain.be/facultes/epl" target="_blank">
          <img src="../static/img/uclouvain.png" alt="" class="d-block mx-auto mb-3 img-fluid" style="max-height:72px">
        </a> <br/>
        <a href="https://orthanc.uclouvain.be/" target="_blank">
          <img src="../static/img/orthanc.png" alt="" class="d-block mx-auto mb-3 img-fluid" style="max-height:72px">
        </a> <br/>
        <h2>View medical images using Orthanc for Education</h2>
      </div>

      <form action="javascript:void(0);">
        <div class="row mb-3">
          <div class="col-sm-8 offset-sm-4">
            You are logged as: <span class="badge bg-secondary me-4"><tt>{{username}}</tt></span>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-sm-8 offset-sm-4">
            <button type="button" class="btn btn-secondary" @click="logout()">
              <i class="fa fa-sign-out"></i> Logout to refresh granted projects
            </button>
          </div>
        </div>

        <div class="row mb-3">
          <label for="selectedProject" class="col-sm-4 col-form-label">Select project:</label>
          <div class="col-sm-8">
            <select class="form-select" id="selectedProject" v-model="selectedProjectId" >
              <option v-if="Object.keys(projects).length === 0" value="" disabled selected>No project is available</option>
              <option v-for="(project, projectId) in projects" :value="projectId">{{project.name}}</option>
            </select>
          </div>
        </div>

        <div class="alert alert-danger col-sm-8 offset-sm-4" role="alert" v-if="!isProjectAccessible">
          You do not have access to the selected project, or it has been removed.
        </div>

        <div class="row mb-3" v-if="isProjectSelected">
          <label class="col-sm-4 col-form-label">Project description:</label>
          <div class="col-sm-8">
            <textarea class="form-control" v-model="projectDescription" disabled></textarea>
          </div>
        </div>

        <div class="row mb-3" v-if="isInstructorOfSelectedProject">
          <label class="col-sm-4 col-form-label">Project policy:</label>
          <div class="col-sm-8">
            <h4>
              <span class="badge bg-secondary" v-if="projectPolicy === 'hidden'">hidden</span>
              <span class="badge bg-success" v-if="projectPolicy === 'active'">active</span>
              <span class="badge bg-danger" v-if="projectPolicy === 'public'">public</span>
            </h4>
          </div>
        </div>

        <div class="row mb-3" v-if="isInstructorOfSelectedProject">
          <div class="col-sm-8 offset-sm-4">
            <div class="d-grid">
              <button type="button" class="btn btn-danger" @click="openProjectParameters">
                <i class="fa fa-cogs"></i> Edit the project parameters as instructor
              </button>
            </div>
          </div>
        </div>

        <div class="row mb-3" v-if="isProjectSelected">
          <label for="viewer" class="col-sm-4 col-form-label">Viewer to be used:</label>
          <div class="col-sm-8">
            <select class="form-select" id="viewer" v-model="selectedViewer">
              <option v-for="(item, index) in projectViewers"
                      :value="item.id">
                {{item.description}}
              </option>
            </select>
          </div>
        </div>

        <div class="row mb-3" v-if="isProjectSelected">
          <label for="filter" class="col-sm-4 col-form-label">Filter on description:</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="filter" id="filter">
          </div>
        </div>
      </form>

      <div class="row mx-2 mt-3 mb-3 table-responsive" v-if="isProjectSelected">
        <table class="table align-middle">
          <thead>
            <tr>
              <th scope="col">Preview</th>
              <th scope="col">Level</th>
              <th scope="col">Description</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="resource in projectResources" v-if="hasSubstring(resource.title, filter)">
              <td><img class="img-fluid" style="max-width:96px; max-height:96px;" :src="resource.preview_url"></td>
              <td>{{resource.level}}</td>
              <td>{{resource.title}}</td>
              <td style="white-space:nowrap;" class="text-end">
                <button type="button" class="btn btn-primary"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Copy link to the DICOM viewer into the clipboard"
                        @click="copyViewerToClipboard(resource)">
                  <i class="fa fa-clipboard clipboard-icon" :id="getClipboardIconId(resource)"></i>
                </button>
                <button type="button" class="btn btn-success"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Open the DICOM viewer"
                        @click="openViewer(selectedViewer, resource)">
                  <i class="fa fa-eye"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>


      <div id="modalProjectParameters" class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Parameters of the project</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form action="javascript:void(0);">
                <div class="row mb-3">
                  <label for="projectPolicy" class="col-sm-4 col-form-label">Project access policy:</label>
                  <div class="col-sm-8">
                    <select class="form-select" id="projectPolicy"
                            v-model="modalProjectParametersPolicy"
                            @change="changeProjectPolicy">
                      <option value="hidden">Hidden (only accessible to the instructors of the project)</option>
                      <option value="active">Active (only accessible to registered learners)</option>
                      <option value="public">Public (for MOOC with guest accounts)</option>
                    </select>
                  </div>
                </div>

                <hr>

                <div class="row mb-3">
                  <label for="projectPrimaryViewer" class="col-sm-4 col-form-label">Primary viewer:</label>
                  <div class="col-sm-8">
                    <select class="form-select" id="projectPrimaryViewer"
                            v-model="modalProjectParametersPrimaryViewer"
                            @change="changeProjectPrimaryViewer">
                      <option v-for="viewer in config.viewers" :value="viewer.id">{{viewer.description}}</option>
                    </select>
                  </div>
                </div>

                <fieldset class="row mb-3">
                  <legend class="col-form-label col-sm-4 pt-0">Secondary viewers:</legend>
                  <div class="col-sm-8">
                    <div v-for="(viewer, index) in modalProjectParametersSecondaryViewers" class="form-check">
                      <input class="form-check-input" type="checkbox" :id="'projectViewers' + index"
                             :value="viewer.id"
                             v-model="viewer.checked"
                             @change="changeProjectSecondaryViewers">
                      <label class="form-check-label" :for="'projectViewers' + index">
                        {{viewer.description}}
                      </label>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


    </div>
  </body>

  <script src="../static/js/vue.min.js"></script>
  <script src="../static/js/axios.min.js"></script>
  <script src="../static/js/bootstrap.min.js"></script>
  <script src="toolbox.js"></script>
  <script src="list-projects.js"></script>
</html>
author	Sebastien Jodogne <s.jodogne@gmail.com>
date	Tue, 27 Jan 2026 17:05:03 +0100
parents	86c6ac51044a
children