mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-03 20:02:47 +00:00 
			
		
		
		
	Remove old resource lists
This commit is contained in:
		@@ -1,138 +0,0 @@
 | 
			
		||||
class RessourceList {
 | 
			
		||||
  /* A wrapper class for the list.js list.
 | 
			
		||||
   * This class is not meant to be used directly, instead it should be used as
 | 
			
		||||
   * a base class for concrete ressource list implementations.
 | 
			
		||||
   */
 | 
			
		||||
 | 
			
		||||
  static autoInit() {
 | 
			
		||||
    CorpusList.autoInit();
 | 
			
		||||
    CorpusFileList.autoInit();
 | 
			
		||||
    JobList.autoInit();
 | 
			
		||||
    JobInputList.autoInit();
 | 
			
		||||
    JobResultList.autoInit();
 | 
			
		||||
    PublicUserList.autoInit();
 | 
			
		||||
    SpaCyNLPPipelineModelList.autoInit();
 | 
			
		||||
    TesseractOCRPipelineModelList.autoInit();
 | 
			
		||||
    UserList.autoInit();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  static options = {
 | 
			
		||||
    listContainerInnerHTMLGenerator: null,
 | 
			
		||||
    ressourceMapper: null,
 | 
			
		||||
    sortParams: null,
 | 
			
		||||
    listjs: {
 | 
			
		||||
      page: 5,
 | 
			
		||||
      pagination: {
 | 
			
		||||
        innerWindow: 2,
 | 
			
		||||
        outerWindow: 2
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  constructor(listContainerElement, options={}) {
 | 
			
		||||
    let mergedOptions = _.merge({}, RessourceList.options, options);
 | 
			
		||||
    this.isInitialized = false;
 | 
			
		||||
    this.listContainerInnerHTMLGenerator = mergedOptions.listContainerInnerHTMLGenerator;
 | 
			
		||||
    this.ressourceMapper = mergedOptions.ressourceMapper;
 | 
			
		||||
    this.sortParams = mergedOptions.sortParams;
 | 
			
		||||
    this.userId = listContainerElement.dataset.userId;
 | 
			
		||||
    // #region Make sure listElement has an id
 | 
			
		||||
    if (!listContainerElement.hasAttribute('id')) {
 | 
			
		||||
      let i;
 | 
			
		||||
      for (i = 0; true; i++) {
 | 
			
		||||
        if (document.querySelector(`#ressource-list-${i}`)) {continue;}
 | 
			
		||||
        listContainerElement.id = `ressource-list-${i}`;
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
    // #endregion
 | 
			
		||||
    if (this.listContainerInnerHTMLGenerator !== null && listContainerElement.textContent.trim() === '') {
 | 
			
		||||
      this.listContainerInnerHTMLGenerator(listContainerElement);
 | 
			
		||||
    }
 | 
			
		||||
    this.listjs = new List(listContainerElement, mergedOptions.listjs);
 | 
			
		||||
    this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
 | 
			
		||||
    this.listjs.list.innerHTML = `
 | 
			
		||||
      <tr>
 | 
			
		||||
        <td colspan="100%">
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <div class="col s12"> </div>
 | 
			
		||||
            <div class="col s3 m2 xl1">
 | 
			
		||||
              <div class="preloader-wrapper active">
 | 
			
		||||
                <div class="spinner-layer spinner-green-only">
 | 
			
		||||
                  <div class="circle-clipper left">
 | 
			
		||||
                    <div class="circle"></div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="gap-patch">
 | 
			
		||||
                    <div class="circle"></div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                  <div class="circle-clipper right">
 | 
			
		||||
                    <div class="circle"></div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="col s9 m6 xl5">
 | 
			
		||||
              <span class="card-title">Waiting for data...</span>
 | 
			
		||||
              <p>This list is not initialized yet.</p>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </td>
 | 
			
		||||
      </tr>
 | 
			
		||||
    `.trim();
 | 
			
		||||
    if (this.userId) {
 | 
			
		||||
      app.subscribeUser(this.userId)
 | 
			
		||||
        .then((response) => {
 | 
			
		||||
          app.socket.on('PATCH', (patch) => {
 | 
			
		||||
            if (this.isInitialized) {this.onPatch(patch);}
 | 
			
		||||
          });
 | 
			
		||||
        });
 | 
			
		||||
      app.getUser(this.userId)
 | 
			
		||||
        .then((user) => {
 | 
			
		||||
          this.init(user);
 | 
			
		||||
          this.isInitialized = true;
 | 
			
		||||
        });
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  _init(ressources) {
 | 
			
		||||
    this.listjs.clear();
 | 
			
		||||
    this.add(Object.values(ressources));
 | 
			
		||||
    this.listjs.list.insertAdjacentHTML(
 | 
			
		||||
      'afterbegin',
 | 
			
		||||
      `
 | 
			
		||||
        <tr class="show-if-only-child">
 | 
			
		||||
          <td colspan="100%">
 | 
			
		||||
            <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
 | 
			
		||||
            <p>No ressource available.</p>
 | 
			
		||||
          </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
      `.trim()
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  init(user) {throw 'Not implemented';}
 | 
			
		||||
 | 
			
		||||
  onClick(event) {throw 'Not implemented';}
 | 
			
		||||
 | 
			
		||||
  onPatch(patch) {throw 'Not implemented';}
 | 
			
		||||
 | 
			
		||||
  add(ressources) {
 | 
			
		||||
    let values = Array.isArray(ressources) ? ressources : [ressources];
 | 
			
		||||
    if (this.ressourceMapper !== null) {
 | 
			
		||||
      values = values.map((value) => {return this.ressourceMapper(value);});
 | 
			
		||||
    }
 | 
			
		||||
    this.listjs.add(values, () => {
 | 
			
		||||
      if (this.sortParams !== null) {
 | 
			
		||||
        this.listjs.sort(...this.sortParams);
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  remove(id) {
 | 
			
		||||
    this.listjs.remove('id', id);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  replace(id, valueName, newValue) {
 | 
			
		||||
    this.listjs.get('id', id)[0].values({[valueName]: newValue});
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@@ -1,148 +0,0 @@
 | 
			
		||||
class TesseractOCRPipelineModelList extends RessourceList {
 | 
			
		||||
  static autoInit() {
 | 
			
		||||
    for (let tesseractOCRPipelineModelListElement of document.querySelectorAll('.tesseract-ocr-pipeline-model-list:not(.no-autoinit)')) {
 | 
			
		||||
      new TesseractOCRPipelineModelList(tesseractOCRPipelineModelListElement);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  static options = {
 | 
			
		||||
    listContainerInnerHTMLGenerator: (listContainerElement) => {
 | 
			
		||||
      listContainerElement.innerHTML = `
 | 
			
		||||
        <div class="input-field">
 | 
			
		||||
          <i class="material-icons prefix">search</i>
 | 
			
		||||
          <input id="${listContainerElement.id}-search" class="search" type="text"></input>
 | 
			
		||||
          <label for="${listContainerElement.id}-search">Search Tesseract OCR Pipeline Model</label>
 | 
			
		||||
        </div>
 | 
			
		||||
        <table>
 | 
			
		||||
          <thead>
 | 
			
		||||
            <tr>
 | 
			
		||||
              <th>Title and Description</th>
 | 
			
		||||
              <th>Publisher</th>
 | 
			
		||||
              <th></th>
 | 
			
		||||
            </tr>
 | 
			
		||||
          </thead>
 | 
			
		||||
          <tbody class="list"></tbody>
 | 
			
		||||
        </table>
 | 
			
		||||
        <ul class="pagination"></ul>
 | 
			
		||||
      `.trim();
 | 
			
		||||
    },
 | 
			
		||||
    ressourceMapper: (tesseractOCRPipelineModel) => {
 | 
			
		||||
      return {
 | 
			
		||||
        'id': tesseractOCRPipelineModel.id,
 | 
			
		||||
        'creation-date': tesseractOCRPipelineModel.creation_date,
 | 
			
		||||
        'description': tesseractOCRPipelineModel.description,
 | 
			
		||||
        'publisher': tesseractOCRPipelineModel.publisher,
 | 
			
		||||
        'publisher-url': tesseractOCRPipelineModel.publisher_url,
 | 
			
		||||
        'publishing-url': tesseractOCRPipelineModel.publishing_url,
 | 
			
		||||
        'publishing-url-2': tesseractOCRPipelineModel.publishing_url,
 | 
			
		||||
        'publishing-year': tesseractOCRPipelineModel.publishing_year,
 | 
			
		||||
        'title': tesseractOCRPipelineModel.title,
 | 
			
		||||
        'title-2': tesseractOCRPipelineModel.title,
 | 
			
		||||
        'version': tesseractOCRPipelineModel.version,
 | 
			
		||||
        'is_public': tesseractOCRPipelineModel.is_public ? 'True' : 'False'
 | 
			
		||||
      };
 | 
			
		||||
    },
 | 
			
		||||
    sortParams: ['creation-date', {order: 'desc'}],
 | 
			
		||||
    listjs: {
 | 
			
		||||
      item: `
 | 
			
		||||
        <tr class="clickable hoverable">
 | 
			
		||||
          <td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
 | 
			
		||||
          <td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
 | 
			
		||||
          <td>
 | 
			
		||||
            <div class="switch action-switch center-align" data-action="share-request">
 | 
			
		||||
              <span class="share"></span>
 | 
			
		||||
              <label>
 | 
			
		||||
                <input type="checkbox" class="is_public">
 | 
			
		||||
                <span class="lever"></span>
 | 
			
		||||
                public
 | 
			
		||||
              </label>
 | 
			
		||||
            </div>
 | 
			
		||||
          </td>
 | 
			
		||||
          <td class="right-align">
 | 
			
		||||
            <a class="action-button btn-floating red waves-effect waves-light" data-action="delete-request"><i class="material-icons">delete</i></a>
 | 
			
		||||
            <a class="action-button btn-floating service-color darken waves-effect waves-light service-2" data-action="view"><i class="material-icons">send</i></a>
 | 
			
		||||
          </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
      `.trim(),
 | 
			
		||||
      valueNames: [
 | 
			
		||||
        {data: ['id']},
 | 
			
		||||
        {data: ['creation-date']},
 | 
			
		||||
        {name: 'publisher-url', attr: 'href'},
 | 
			
		||||
        {name: 'publishing-url', attr: 'href'},
 | 
			
		||||
        'description',
 | 
			
		||||
        'publisher',
 | 
			
		||||
        'publishing-url-2',
 | 
			
		||||
        'publishing-year',
 | 
			
		||||
        'title',
 | 
			
		||||
        'title-2',
 | 
			
		||||
        'version',
 | 
			
		||||
        {name: 'is_public', attr: 'data-checked'}
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  constructor(listContainerElement, options = {}) {
 | 
			
		||||
    super(listContainerElement, {...TesseractOCRPipelineModelList.options, ...options});
 | 
			
		||||
    this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  init (user) {
 | 
			
		||||
    this._init(user.tesseract_ocr_pipeline_models);
 | 
			
		||||
    if (user.role.name !== ('Administrator' || 'Contributor')) {
 | 
			
		||||
      for (let switchElement of this.listjs.list.querySelectorAll('.is_public')) {
 | 
			
		||||
        switchElement.setAttribute('disabled', '');
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  _init(ressources) {
 | 
			
		||||
    super._init(ressources);
 | 
			
		||||
    for (let uncheckedCheckbox of this.listjs.list.querySelectorAll('input[data-checked="True"]')) {
 | 
			
		||||
      uncheckedCheckbox.setAttribute('checked', '');
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  onClick(event) {
 | 
			
		||||
    if (event.target.closest('.action-switch')) {
 | 
			
		||||
      let userRole = app.data.users[this.userId].role.name;
 | 
			
		||||
      if (userRole !== ('Administrator' || 'Contributor')) {
 | 
			
		||||
        app.flash('You need the "Contributor" or "Administrator" role to perform this action.', 'error');
 | 
			
		||||
      }
 | 
			
		||||
      return;
 | 
			
		||||
    }
 | 
			
		||||
    let actionButtonElement = event.target.closest('.action-button');
 | 
			
		||||
    let action = actionButtonElement === null ? 'view' : actionButtonElement.dataset.action;
 | 
			
		||||
    let tesseractOCRPipelineModelElement = event.target.closest('tr');
 | 
			
		||||
    let tesseractOCRPipelineModelId = tesseractOCRPipelineModelElement.dataset.id;
 | 
			
		||||
    switch (action) {
 | 
			
		||||
      case 'delete-request': {
 | 
			
		||||
        Utils.deleteTesseractOCRPipelineModelRequest(this.userId, tesseractOCRPipelineModelId);
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      case 'view': {
 | 
			
		||||
        window.location.href = `/contributions/tesseract-ocr-pipeline-models/${tesseractOCRPipelineModelId}`;
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      default: {
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  onChange(event) {
 | 
			
		||||
    let actionSwitchElement = event.target.closest('.action-switch');
 | 
			
		||||
    let action = actionSwitchElement.dataset.action;
 | 
			
		||||
    let tesseractOCRPipelineModelElement = event.target.closest('tr');
 | 
			
		||||
    let tesseractOCRPipelineModelId = tesseractOCRPipelineModelElement.dataset.id;
 | 
			
		||||
    switch (action) {
 | 
			
		||||
      case 'share-request': {
 | 
			
		||||
        let is_public = actionSwitchElement.querySelector('input').checked;
 | 
			
		||||
        Utils.shareTesseractOCRPipelineModelRequest(this.userId, tesseractOCRPipelineModelId, is_public);
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
      default: {
 | 
			
		||||
        break;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  } 
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user