<?php
/**
* this view generates fields for search form
* <br/><br/>
* @author Gabriele Droege, Patricia Kelbert (BGBM, GGBN/DNA Bank Network) <contact@dnabank-network.org>
* @version yii 2.0.3
* @package View
* @var $this SearchController
* @var $model SearchForm
* @var $selectionLists - created in the controller
* @var $form CActiveForm
* @copyright Copyright © 2011 DNA Bank Network http://www.dnabank-network.org
* <br/>The contents of this file are subject to the Mozilla Public License Version 1.1
* @filesource
* @license http://www.mozilla.org/MPL/ MPL
*/
use yii\helpers\Html;
use yii\web\View;
use yii\helpers\Url;
use yii\jui\Dialog;
$this->title = 'GGBN Portal';
// $this->title = 'Search';
// $this->params ['breadcrumbs'] [] = $this->title;
?>
<style>
<!--
#logos img{max-height:160px;}
-->
</style>
<link rel="stylesheet"
href="<?php echo Yii::$app->request->baseUrl?>/css/map/ol.css"
type="text/css">
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::$app->request->baseUrl?>/css/jquery.jqplot.min.css" />
<script src="<?php echo Yii::$app->request->baseUrl?>/js/ol.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=eqbZNOKhjQJ1MKLfU5ufkA7Nox2G0ySA"></script>
<script type="text/javascript" src="<?php echo Yii::$app->request->baseUrl?>/js/jquery.jqplot.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.cursor.min.js"></script>
<div class="jumbotron">
<h2>GGBN Members<br/>
Click butterflies or member logos to learn more</h2>
</div>
<div class="container">
<div class="container-fluid" >
<div class="row-fluid">
<div id="mapdiv"></div>
</div>
</div>
<br />
<?php
Dialog::begin ( [
'clientOptions' => [
'modal' => true,
'title' => "GGBN Member Details",
'width' => "800px",
'id' => 'logodiv',
'class' => "feedbackclass",
'buttons' => [ ]
],
'id' => 'logodiv',
'class' => "feedbackclass"
] );
echo "<span id='dialog-content'></span><br/>";
// echo Html::button('Close', ['class' => 'btn btn-primary', 'name' => 'feedback-button', 'id'=>'close-button']);
Dialog::end ();
$i = 0;
?>
<br/>
<hr/>
<div class="col-lg-6" id="chartmembers" style="margin-top: 20px; width: 800px; height: 400px;"></div>
<br/>
<div class="clearer"></div>
<button class="button-reset">Reset Zoom</button>
<br/>
<hr/>
<div class="clearer"></div>
<div id="logos"><br /><br /><h2>Click member logos to learn more</h2>
<?php
foreach ( $partners as $partner ) {
$idx = $partner ['institutionFullName'];
echo "<img id='image-" . $i . "' style='cursor:pointer' title='" . $idx . "' width='140px;' src='" . $partner ['logoURL'] . "'/> ";
echo "<div class='logop' id='partner-" . $i . "'>" . "<div class='row'>" . "<div class='col-lg-3'>
<img width='140px;' src='" . $partner ['logoURL'] . "'/>
</div>
<div class='col-lg-7'>
<table width='100%'><tr><td width='170'>" . "<b>Name:</b> </td><td>" . $idx . "</td></tr>" . "<tr><td><b>City:</b> </td><td>" . $partner ['city'] . "</td></tr>";
echo $partner ['CITES_code'] ? "<tr><td><b>CITES code:</b> </td><td>" . $partner ['CITES_code'] . "</td></tr>" : "";
echo "<tr><td><b>Member since:</b> </td><td>" . $partner ['dateOfJoining'] . "</td></tr>" . "<tr><td><b>Status:</b> </td><td>" . $partner ['memberStatus'] . " Member" . "</td></tr>";
echo $partner ['onlineSince'] ? "<tr><td><b>Online since:</b> </td><td>" . $partner ['onlineSince'] . "</td></tr><tr><td><b>No. Records @ GGBN:</b> </td><td>" . $counts [$idx] . "</td></tr>" : "";
if (! empty ( $contacts [$idx] )) {
echo "<tr><td colspan='2'><b>Contact(s):</b> <ul>";
foreach ( $contacts [$idx] as $contact )
if (! empty ( $contact ))
echo "<li>" . $contact [0] . ", <a href=mailto:" . $contact [1] . ">email</a></li>";
echo "</ul></td></tr></table></div><div class='col-lg-8'>";
}
if (! empty ( $collectionsncd [$idx] )){
if($partner ['CultureCollection']) {
echo "<h2>DNA & Culture Collection:</h2>"; }
else {
echo "<h2>DNA & Tissue Collection:</h2>"; }
foreach($collectionsncd[$idx] as $collectionncd){
echo $collectionncd . "<br/>";
}
}
if (! empty ($children)) {
echo "<h2>DNA & Culture Collections:</h2>";
echo $children; }
if (! empty ( $addressncd [$idx] ) || ! empty ( $contactdetailsncd ) || ! empty ( $descriptionsncd )) {
echo "<h2>Institution metadata:</h2>";
if (! empty ( $addressncd [$idx] ))
echo $addressncd [$idx]."</br>";
if (! empty ( $contactdetailsncd [$idx] ))
echo $contactdetailsncd [$idx]."</br></br>";
if (! empty ( $descriptionsncd [$idx] ))
echo $descriptionsncd [$idx]."</br></br>";
}
echo "</div></div>" . "<br/></div>";
$i += 1;
}
?>
</div>
<script>
map = L.map('mapdiv', {
layers: MQ.mapLayer(),
center: [20,-1],
zoom: 2
});
L.control.layers({
'Map': MQ.mapLayer(),
'Dark': MQ.darkLayer(),
'Light': MQ.lightLayer(),
'Satellite': MQ.satelliteLayer()
}).addTo(map);
/*var map = new OpenLayers.Map({
div:"mapdiv",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.XYZ(
"OpenStreetMap",
[
"http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
],
{
attribution: "Map provided by <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
),
],
center: [0, 0],
zoom: 2,
width:"auto",height:"auto"
});
var epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
var projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");*/
<?php
foreach ( $latitude as $il => $la ) {
if (! empty ( $longitude [$il] ) && ! empty ( $latitude [$il] ))
/* echo "
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( " . $longitude [$il] . ", " . $latitude [$il] . " ).transform(epsg4326, projectTo),
{description:'" . $names [$il] . "'} ,
{externalGraphic: 'http://data.ggbn.org".Yii::$app->request->baseUrl."/images/butterfly.png', graphicHeight: 15, graphicWidth: 15, graphicXOffset:-12, graphicYOffset:-10 }
);
vectorLayer.addFeatures(feature);";*/
echo "icon = L.icon({
iconSize: [15, 15],
iconUrl: 'http://www.ggbn.org/ggbn_portal/images/butterfly.png',
iconDescription: 'hallo'
})
map.addLayer(L.marker([".$latitude [$il].", ".$longitude [$il]."],{icon: icon}).addTo(map).bindPopup('".$names [$il]."'));";
}
?>
//map.addLayer(vectorLayer);
//Add a selector control to the vectorLayer with popup functions
/*var controls = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate(); */
$(function() {
$( "#logodiv" ).dialog({
autoOpen: false,
modal: true,
});
$( "#logos img" ).click(function(event) {
i=event.target.id.split("image-")[1];
partner="#partner-"+i;
text=$(partner).html();
$( "#dialog-content" ).html(text);
$( "#logodiv" ).dialog( "open" );
});
$('#close-button').click(function() {
$('#logodiv').dialog("close");
});
$( "#logodiv" ).on('clickoutside',function(){
$('#logodiv').dialog('close');
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var joiningAll=<?php echo $joiningAll;?>;
var joiningCore=<?php echo $joiningCore;?>;
var joiningAssociate=<?php echo $joiningAssociate;?>;
var joiningObserver=<?php echo $joiningObserver;?>;
$.jqplot.config.enablePlugins = true;
var joiningplot = $.jqplot('chartmembers', [joiningAll, [['2009', 3], ['2011', 5], ['2015', 12], ['2014', 11], ['2013', 8], ['2016', 16], ['2007', 0]], joiningAssociate, joiningObserver], {
title:'Members, by year',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickOptions:{formatString:'%Y',angle: 25},
tickInterval:'1 year',
min:'January 1, 2009 8:00AM',
},
yaxis: { }
},
series:[{label: ' All',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Core',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Associate',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Observer',lineWidth:4, markerOptions:{style:'square'}},
],
legend: { show:true ,location: 'e' , placement : "outside", },
cursor:{
show: true,
zoom:true,
showTooltip:false
}
});
$('.button-reset').click(function() { joiningplot.resetZoom() });
});
</script>
</div>