template.html

<div class="row">
  <div class="col-sm-12 col-md-6">
    <div class="card">
      <div id="image-container">
        <a id="photo-link" href="#">
          <img id="photo" src="https://i.imgur.com/GeHxzb7.png" alt="Loading">
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-6">
    <div class="card">
      <div class="card-header">
        What is this item?
      </div>

      <div id="alert-block" class="card-block hidden-xs-up">
        <div id="alert" class="alert mb-0" role="alert">
        </div>
      </div>

      <div id="search-block" class="card-block">
        <form id="search-form">
          <div class="form-group">
            <label for="title">Title</label>
            <input type="text" id="title" class="form-control">
          </div>
          <div class="form-group">
            <label for="author">Author</label>
            <input type="text" id="author" class="form-control">
          </div>
          <div class="form-group">
            <label for="year">Year</label>
            <input type="number" id="year" class="form-control">
          </div>
          <div class="form-group">
            <label for="isbn">ISBN</label>
            <input type="text" id="isbn" class="form-control">
          </div>
          <button class="btn btn-secondary btn-answer">
            Skip / Not Found
          </button>
          <button id="search-btn" class="btn btn-success" type="submit">
            Search
          </button>
        </form>
      </div>
    </div>

    <div id="results-block" class="card-block">

    </div>

    <div id="shelfmark-block" class="card-block">
      <form id="shelfmark_form" class="hidden-xs-up" role="form">
        <div class="form-group">
          <label for="shelfmark" class="control-label">Shelfmark</label>
          <input type="text" id="shelfmark" class="form-control" required>
        </div>
        <button class="btn btn-success btn-answer">Done</button>
      </form>
    </div>
  </div>
</div>

<script>
  let project_short_name = 'convert_a_card';

  let FLASK_Z3950_URL = 'https://backend.libcrowds.com/z3950/search/oclc/json'

  let TRUSTED_LIBS =  [
    'DLC',
    'CUY',
    'ZCU',
    'HMY',
    'PULEA',
    'YUL',
    'CNEAL',
    'CGU',
    'COO',
    'AMH',
    'AUT',
    'NSL',
    'SLY',
    'L2U',
    'OCLCA',
    'OCLCQ',
    'OCLCF',
    'OCLCO',
    'BLSTP'
  ]

  /**
   * Build the initial query and trigger a search on form submission.
   */
  document.getElementById('search-form')
    .addEventListener('submit', function (evt) {
    console.log
    let query = buildQuery();
    performSearch(query);
    evt.preventDefault();
  })

  /**
    * Build a query from the form data.
    */
  function buildQuery () {
    let title = document.getElementById('title').value.trim();
    let author = document.getElementById('author').value.trim();
    let year = document.getElementById('year').value.trim();
    let isbn = document.getElementById('isbn').value.trim().replace(/-/g, '');
    let q = '(1,1183)="eng"and(1,6119)="(' + TRUSTED_LIBS.join(' or ') + ')"';
    q += 'and(1,4)="' + title + '"';
    q += 'and(1,1003)="' + author + '"';
    q += 'and(1,31)="' + year + '"';
    q += 'and(1,7)="' + isbn + '"';
    return q;
  }

  /**
    * Perform a search.
    */
  function performSearch (q, pos = 1) {
    const fullQuery = FLASK_Z3950_URL + '?query=' + q + '&position=' + pos;
    const searchBtnElem = document.getElementById('search-btn');
    const resultsBlockElem = document.getElementById('results-block');
    let request = new XMLHttpRequest();

    searchBtnElem.classList.add('loading-icon');
    resultsBlockElem.classList.remove('active');

    clearAlert()

    request.onreadystatechange = function () {
      if(request.readyState === 4) {
        if(request.status === 200) {
          // Handle response
          console.log(JSON.parse(request.response))
        } else if(request.status === 404) {
          showAlert('No results found', 'info')
        } else {
          showAlert(request.status + ' error: ' + request.statusText, 'danger')
        }
      }
    }
    request.open('GET', fullQuery);
    request.send();
  }

  /**
   * Display an alert.
   */
  function showAlert (text, type) {
    const alertBlockElem = document.getElementById('alert-block');
    const alertElem = document.getElementById('alert');
    alertElem.classList.add('alert-' + type)
    alertElem.innerHTML = text
    alertBlockElem.classList.remove('hidden-xs-up');
  }

  /**
   * Clear the alert.
   */
  function clearAlert (text, type) {
    const alertBlockElem = document.getElementById('alert-block');
    const alertElem = document.getElementById('alert');
    alertBlockElem.classList.add('hidden-xs-up');
    alertElem.classList.remove('alert-success', 'alert-info', 'alert-danger')
    alertElem.innerHTML = ''
  }


  //   /** Select a catalogue record. */
  //   $(document).delegate('.btn-z3950', 'click', function(e) {
  //       let ctrl_num = $(this).attr('data-control-num');
  //       let selected = $("#" + ctrl_num).html();
  //       console.log(ctrl_num);
  //       $("#search_form").slideUp();
  //       $("#search_results").slideUp();
  //       $("#selected_record").prepend(selected);
  //       $("#selected_record").attr('data-selected-oclc', ctrl_num);
  //       $("#selected_record").show();
  //       $("#search_again").show();
  //       $("#shelfmark_form").slideDown();
  //       $("#shelfmark_field").focus();
  //   });



  //   /** Return to the search form. */
  //   $(document).delegate('#search_again', 'click', function(e) {
  //       $("#search_again").hide();
  //       $("#selected_record").slideUp();
  //       $("#search_form").slideDown();
  //       $("#shelfmark_form").slideUp();
  //   });


  //   /** Load the next search result page. */
  //   $(document).delegate( "a:contains('Next >')", 'click', function(e) {
  //       e.preventDefault();
  //       let url_parts = $("a:contains('Next >')").attr('href').split('&');
  //       let pos = url_parts[1].replace('position=','');
	// 	url_parts = $("a:contains('Next >')").attr('href').split('query=');
  //       let query = url_parts[1].split('&')[0];
  //       performSearch(query, pos);
  //   });


  //   /** Load the previous search result page. */
  //   $(document).delegate( "a:contains('< Previous')", 'click', function(e) {
  //       e.preventDefault();
  //       let url_parts = $("a:contains('< Previous')").attr('href').split('&');
  //       let pos = url_parts[1].replace('position=','');
	// 	url_parts = $("a:contains('< Previous')").attr('href').split('query=');
  //       let query = url_parts[1].split('&')[0];
  //       performSearch(query, pos);
  //   });


  //   /** Close alert windows. */
  //   $(document).delegate('.close', 'click', function(e) {
  //       $(this).parent().hide();
  //   });


  //   /** Load the card image. */
  //   pybossa.taskLoaded(function(task, deferred) {
  //       if (!$.isEmptyObject(task)) {
  //           // load image from flickr
  //           let img = $('<img />');
  //           img.load(function() {
  //               // continue as soon as the image is loaded
  //               deferred.resolve(task);
  //           });
  //           img.attr('src', task.info.url_b + "?now=" + new Date().getTime());
  //           img.addClass('img-thumbnail img-responsive');
  //           task.info.image = img;
  //       } else {
  //           deferred.resolve(task);
  //       }
  //   });


  //   /** Handle the shelfmark form being submitted. */
  //   $(document).delegate('#shelfmark_form', 'submit', function(e) {
  //       e.preventDefault();
  //       $('.btn-answer').triggerHandler('click');
  //   });


  //   /** Present the task. */
  //   pybossa.presentTask(function(task, deferred) {
  //       if (!$.isEmptyObject(task)) {

  //           $('#photo-link').html('').append(task.info.image);
  //           $("#photo-link").attr("href", task.info.link);
  //           $('#task-id').html(task.id);
  //           $('#shelfmark_form').trigger("reset");
  //           $('#search_form').trigger("reset");
  //           $("#shelfmark_form").hide();
  //           $("#searching").hide();
  //           $("#search_results").slideUp();
  //           $('#comments').removeClass('in');
  //           $('#comments').attr('aria-expanded', 'false');
  //           $('#comments_btn').attr('aria-expanded', 'false');
  //           $("#search_form").show();
  //           $("#selected_record").html('');
  //           $("#selected_record").attr('data-selected-oclc', '');
  //           $("#search_again").hide();
  //           $("#comments_field").val('');
  //           $("#selected_record").hide();
  //           $("#title-field").focus();

  //           $('.btn-answer').off('click').on('click', function(evt) {
  //               evt.preventDefault();
  //               if (typeof $(this).attr("value") != 'undefined') {
  //                   task.answer = {
  //                       'oclc': $("#selected_record").attr('data-selected-oclc'),
  //                       'comments': $('#comments_field').val(),
  //                       'shelfmark': normalise_shelfmark($("#shelfmark_field").val())
  //                   }
  //                   pybossa.saveTask(task.id, task.answer).done(function() {
  //                       deferred.resolve();
  //                       pybossaNotify('Answer saved!', 'success', true);
  //                   }).fail(function(xhr, status, error) {
	// 		pybossaLogError(new Error(error));
	// 	    });
  //               } else {
  //                   pybossaNotify('Error: Answer undefined', 'danger');
  //               }
  //           });
  //       } else {
  //         $(".skeleton").hide();
  //         $('#image-container').hide();
  //         pybossaNotify('Congratulations! You have contributed to all available tasks!', 'success');
  //       }
  //   });

  //   pybossa.run(project_short_name);
</script>