User:Karima Rafes/DisplayDevice.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
$(document).ready(function() {
	//precondition
		//precondition
	if( /^(mediawiki|wikidata|meta|commons)wiki$/.test( mw.config.get( 'wgDBname' ) ))
		return; //end
		
	var wgWikibaseItemId = mw.config.get("wgWikibaseItemId");
	if (!wgWikibaseItemId) {
		console.log("no wikidata");
		return;
	}
	
	var nameWiki = mw.config.get( 'wgDBname' );
	var contentTab = 
	'<script>'+
	'function openTabDevice() {' +
    '$(\'#bodyContentDevice\').is(\':visible\')?$(\'#bodyContentDevice\').hide():$(\'#bodyContentDevice\').show();' +
    '}'+
	'</script>'+
	'<li id="ca-device"><span><a id="linktab-device" style="color:lightblue;" href="javascript:openTabDevice()" title="Device">Device</a></span></li>';
		
	var tab = $('#p-namespaces ul').append(contentTab);
    var content = '<div id="bodyContentDevice" class="mw-body-content" style="z-index: 5;display: none;background: rgb(222, 245, 220);"></div>';
    $(content).insertBefore('#bodyContent');
    
         //Display devices
        var endpointDAAP = "https://opendata1.opendata.u-psud.fr/sparql";
		var queryFindDevice = "PREFIX wd: <http://www.wikidata.org/entity/> \
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
prefix daap: <http://daap.dsi.universite-paris-saclay.fr/wiki/> \
prefix daapProp: <http://daap.dsi.universite-paris-saclay.fr/wiki/Property:> \
prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
prefix vcard: <http://www.w3.org/2006/vcard/ns#> \
\
select distinct ?device  ?label  ?picture \
				?organizationLabel ?organization \
where {GRAPH <http://daap.dsi.universite-paris-saclay.fr> { \
   ?device \
      	rdf:type daap:Device ; \
      	rdfs:label ?label ; \
  		daapProp:pilotProcess ?pilot ; \
        vcard:organization-unit ?organization ; \
      	daapProp:item wd:"+wgWikibaseItemId+"  . \
   \
   ?pilot  \
   		vcard:email ?contactLinkEmail ; \
        vcard:fn ?contact . \
   \
    ?organization rdfs:label ?organizationLabel . \
\
   FILTER (langMatches( lang(?label), \"EN\" ) && \
           langMatches( lang(?organizationLabel), \"EN\" )) \
   \
   OPTIONAL{ \
           ?device  daapProp:picture ?picture . \
   } \
} }  \
GROUP BY ?device ?label ?picture  \
ORDER BY ?label";

    $.ajax({
                url: endpointDAAP,
                dataType: 'json', 
                data: { 
                    queryLn: 'SPARQL',
                    query: queryFindDevice , 
                    limit: 'none',
                    infer: 'true',
                    Accept: 'application/sparql-results+json'
                },
                success: displayDevice, 
                error: displayError
        });
 });

    function displayError(xhr, textStatus, errorThrown) {
        console.log(textStatus);
        console.log(errorThrown);
    }
    
    function displayDevice(data) {
       var textHtml = '<h2><span class="mw-headline">Devices in relation</span></h2>';
       textHtml += '<p>';
       if(data.results.bindings.length === 0){
    		textHtml += 'Sorry, no device found';
    	}else{
    		textHtml += '<ul  class="reference" style="list-style: none;font-size: inherit;">';
	        $.each(data.results.bindings, function(index, bs) {
	            textHtml += '<li>';
	            if (typeof bs["picture"] != "undefined") {
	            	textHtml += '<a href="' + bs["device"].value + '">'
	             	+'<img src="' + bs["picture"].value + '" style="max-width:500px;max-height:100px;">'
	             	+ '</a> ';
	            }
	            textHtml += '<span class="reference-text"><a href="' + bs["device"].value + '">' + bs["label"].value +  '</a>' 
	             +' - Organization : <a href="' + bs["organization"].value  + '">' + bs["organizationLabel"].value  + '</a>'
	           //  +' - Contact : <a href="' + bs["contactLinkEmail"].value  + '">' + bs["contact"].value  + '</a></span>
	           +'</li>';
	        });
        	textHtml += '</ul>';
        	$('#linktab-device').removeAttr("style");
    	}
        textHtml += '</p>';
         $('#bodyContentDevice').append(textHtml);
    }