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"/>
  </head>

  <body>
    <div id="app" class="container-fluid p-0">
      <span style="display:none" id="info">${INFO}</span>

      <form method="POST" id="lti-return" v-bind:action="info['return-url']" style="display:none">
        <input type="text" name="JWT" v-model="jwt" />
      </form>

      <div class="py-4 text-center">
        <a href="https://orthanc.uclouvain.be/" target="_blank">
          <img class="d-block mx-auto mb-3" src="../static/img/orthanc.png" alt="" height="72">
        </a>
        <h2>Create link to a DICOM resource</h2>
      </div>

      <div class="row mx-3 mb-3">
        <div class="alert alert-danger" role="alert" v-if="viewers.length <= 0">
          Error: No Web viewer is configured in Orthanc!
        </div>
      </div>

      <form>
        <div class="row mx-3 mb-3">
          <label for="project_name" class="col-sm-4 col-form-label">Project in education plugin:</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" v-model="project_name" id="project_name" disabled>
          </div>
        </div>

        <div class="row mx-3 mb-3">
          <div class="d-grid">
            <button class="btn btn-success" type="button" @click="linkProjectContent()">
              <i class="fa fa-sitemap me-2"></i> Create link to the project content
            </button>
          </div>
        </div>

        <div class="row mx-3 mb-3">
          <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="selected_viewer">
              <option v-for="(item, index) in viewers"
                      :value="item.id"
                      :selected="item.id == item.selected_viewer">
                {{item.description}}
              </option>
            </select>
          </div>
        </div>

        <div class="row mx-3 mb-3">
          <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-4 mt-3 mb-3 table-responsive">
        <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 resources" v-if="hasSubstring(resource.title, filter)">
              <td><img class="img-fluid" style="max-width:64px; max-height:64px;" :src="downloads[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="Test the DICOM viewer"
                        @click="openViewer(resource)">
                  <i class="fa fa-eye"></i>
                </button>
                <button type="button" class="btn btn-success"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Create link to this DICOM resource"
                        @click="linkResource(resource)">
                  <i class="fa fa-link"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </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="../app/toolbox.js"></script>
  <script src="deep.js"></script>
</html>
author	Sebastien Jodogne <s.jodogne@gmail.com>
date	Wed, 08 Oct 2025 22:54:47 +0200
parents
children