path: root/bh20simplewebuploader/static/main.js

/*
 * Menu and navigation
 */

/* Toggle between adding and removing the "responsive" class to topnav
 * when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

let map = L.map( 'map', {
  center: [37.0902, -95.7129],  // Default to U.S.A
  minZoom: 3,
  zoom: 0
});
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a','b','c']
}).addTo( map );

let markers = L.markerClusterGroup().addTo(map)


function fetchAPI(apiEndPoint) {
  fetch(scriptRoot + apiEndPoint)
    .then(response => {
      return response.json();
    })
    .then(data => {
        console.log(data);
      markers.clearLayers();
      document.getElementById("results").classList.remove("invisible");
      document.getElementById("loader").classList.add("invisible");
      if (!(apiEndPoint === "/api/getAllaccessions")) {
        for (let i = 0; i < data.length; i++) {
          let {"count": fastaCount, GPS, LocationLabel: label } = data[i];
          let coordinates = GPS.split(" ");
          if (!(coordinates == null)) {
            let lat, lon;
            [lon, lat] = coordinates.map(parseFloat);
            let point = L.point()
            let marker = L.marker([lat, lon]);
            marker.bindPopup("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount);
            markers.addLayer(marker)
          }}
      }
      // Reload the map
      map.invalidateSize();
    });
  document.getElementById("results").classList.add("invisible");
  document.getElementById("loader").classList.remove("invisible");

}

// Copy from function above but now added as table instead of plain json
function fetchAPIV2(apiEndPoint) {
  fetch(scriptRoot + apiEndPoint)
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data)
       htmlString="<table>"

       // Depending on what we want to explore we'd have to call a different function ....? But how to Include that?
       for (var i=0; i<data.length;i++) {
            htmlString=htmlString+"<tr><td><a href='#' onclick='fetchSEQByLocation(\""+data[i]["key"]+"\");'>"+data[i]["label"]+"</a></td><td>"+data[i]["count"]+"<td></tr>"
       }
       htmlString=htmlString+"</table>"

      document.getElementById("table").innerHTML = htmlString
    });

  document.getElementById("results").classList.add("invisible");
}


let search = () => {
  let m =  document.getElementById('search-input').value;
  fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
}

let fetchCount = () => {
  fetchAPI("/api/getCount");
}

let fetchCountDB = () => {
  fetchAPI("/api/getCountDB");
}

let fetchSEQCountBySpecimen = () => {
  fetchAPIV2("/api/getSEQCountbySpecimenSource");
}

let fetchSEQCountByLocation = () => {
  fetchAPIV2("/api/getSEQCountbyLocation");
}

let fetchSEQCountByTech = () => {
  fetchAPIV2("/api/getSEQCountbytech");
}

let fetchAllaccessions = () => {
  fetchAPI("/api/getAllaccessions");
};

let fetchCountByGPS = () => {
  fetchAPI("/api/getCountByGPS");
};

let fetchSEQCountbyLocation = () => {
  fetchAPIV2("/api/getSEQCountbyLocation");
};

let fetchSEQByLocation = () => {
  console.log("Missing - set parameter for request, retrieve data")
};

let fetchSEQCountbyContinent = () => {
  fetchAPIV2("/api/getSEQCountbyContinent");
}


/*
 * Make sure that only one of the manual metadata entry and metadata upload
 * form components is *actually* a child of the form element in the DOM.
 *
 * Because both make use of the "required" attribute, we can't get away with
 * just hiding the one we don't want the user to fill in. The hidden part will
 * still have possibly empty required fields and (some) browsers will
 * blocksubmission because of it. Moreover, the data (including file uploads)
 * from the hidden elements will still be sent to the server, which the user
 * may not expect.
 */


function setUploadMode() {
  // Make the upload form the one in use.
  uploadFormSpot.appendChild(uploadForm)
  // Remove the upload form from the DOM so its required-ness does not block submission.
  fillFormSpot.removeChild(fillForm)
}

function setFillMode() {
  // Make the fillable form the one in use
  uploadFormSpot.removeChild(uploadForm)
  // Remove the fillable form from the DOM so its required-ness does not block submission.
  fillFormSpot.appendChild(fillForm)
}

function setMode() {
  // Pick mode based on radio
  if (document.getElementById('metadata_upload').checked) {
    setUploadMode()
 } else {
    setFillMode()
 }
}

/*
 * Machinery for variable-length lists of input items.
 */

// Start in mode appropriate to selected form item.
// It is important that we run this code when the page starts! The browser may
// have set the radio button to whatever the state was on last page load,
// instead of the default state, without raising an event, and we have to
// handle that.

/**
 * Add another form field to the group this button is part of.
 */
function addField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement

  // Get its keypath
  let keypath = fieldGroup.dataset.keypath

  // Find its last field child
  let existingFields = fieldGroup.getElementsByClassName('field')
  let templateField = existingFields[existingFields.length - 1]

  // Get its number
  let fieldNumber = templateField.dataset.number

  // Duplicate it
  let newField = templateField.cloneNode(true)

  // Increment the number and use the keypath and number to set IDs and cross
  // references.
  // TODO: Heavily dependent on the form field HTML. Maybe we want custom
  // elements for the labeled controls that know how to be list items?
  fieldNumber++
  newField.dataset.number = fieldNumber
  let newID = keypath + '[' + fieldNumber + ']'
  let newControl = newField.getElementsByClassName('control')[0]
  newControl.id = newID
  newControl.setAttribute('name', newID)
  let newLabel = newField.getElementsByTagName('label')[0]
  newLabel.setAttribute('for', newID)

  // Find the minus button
  let minusButton = fieldGroup.getElementsByClassName('remove-field')[0]

  // Put new field as a child before the minus button
  fieldGroup.insertBefore(newField, minusButton)

  // Enable the minus button
  minusButton.classList.remove('invisible')
}

/**
 * Remove the last form field from the group button is part of.
 */
function removeField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement

  // Find its field children
  let existingFields = fieldGroup.getElementsByClassName('field')

  if (existingFields.length > 1) {
    // There is a last field we can safely remove.
    let lastField = existingFields[existingFields.length - 1]
    fieldGroup.removeChild(lastField)
  }

  if (existingFields.length <= 1) {
    // Collection auto-updates. Now there's only one element. Don't let the
    // user remove it. If they don't want it, they can leave it empty.
    this.classList.add('invisible')
  }
}


// Change the submit button after hitting
function on_submit_button() {
    var f = document.getElementsByTagName('form')[0];
    if(f.checkValidity()) {
        var elem = document.getElementById("submit");
        elem.value = "Submitting...";
        elem.disabled = true;
        f.submit();
    } else {
        alert(document.getElementById('example').validationMessage);
        return false;
    }
}



//

function drawMap(){

// initialize the map on the "map" div with a given center and zoom
var mymap = L.map('mapid').setView([51.505, -0.09], 1);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

fetch(scriptRoot + "api/getCountByGPS")
    .then(response => {
    console.log(response)
      return response.json();
    })
    .then(data => {

   for (var i=0; i<data.length;i++) {
   gps=data[i]["GPS"].split(" ")
    var circle = L.circle([gps[1], gps[0]], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: parseInt(data[i]["count"])  //not working for whatever reason
        }).addTo(mymap);
      }

      });
}