SOLIVIA Monitoring - Delta Energy Systems
EG Data Inform Byggebasen Javascript Implementering af ansvarsperioder og produktdata på eget site Jens Karsø 2013 Indhold Byggebasen javascript-plugin til DB12-site ....................................................................................................... 2 DB12-site kommunikationsmodel ................................................................................................................. 2 Skabelon ........................................................................................................................................................ 2 Download javascript ...................................................................................................................................... 2 Javascript:ProdSoeg.js + forside HTML .......................................................................................................... 3 Javascript:restAPI.js ....................................................................................................................................... 4 Søgning trin 1 ..................................................................................................................................................... 4 Eksempel på dannelse af en søgning: ........................................................................................................ 5 Søgning trin 2................................................................................................................................................. 7 Visning af produkter ..................................................................................................................................... 8 Proxy.Search .................................................................................................................................................. 8 Produktdata og javascript.................................................................................................................................. 9 Eksempel: ...................................................................................................................................................... 9 Bemærk: ...................................................................................................................................................... 10 Bilag 1: ......................................................................................................................................................... 11 OBS: TUN har skiftet navn til Danske Byggecentre – derfor kaldes det unikke nr, der betegner en vare, ikke længere for tunnr. I stedet kaldes det for DB varenr. Af hensyn til kapabilitet med eksterne systemer vil tunnr stadig benyttes i kode. Byggebasen javascript-plugin til DB12-site På DB12-sitet benyttes der udelukkende javascript til kommunikation med byggebasens data. Disse javascript-metoder er der mulighed for at implementere i sit eget site. Følgende vejledning er en beskrivelse af hvordan DB12-sitet har implementeret javascripts. Derfor er alle moduler og scripts, der stilles til rådighed, primære formål at opfylde DB12-sitets behov. Der kan derfor komme ændringer af javascript, lagt på serveren og ændringer af de tilhørende webservices. Vi opfordrer til at I sender kontaktinfo til [email protected] ved implementering på eget site, således at der kan sendes advisering ved ændringer. Det anbefales at udvikler downloader javascripts, studerer dem og implementere dem på eget site. DB12-site kommunikationsmodel prodSoeg.js Byggebasen RESTApi.js Ovenstående model forsøger at beskrive de 2 javascripts og deres indbyrdes opgaver. prodSoeg.js Holder styr på visning af indhold og sammenfatte oplysninger til kald. Hvert kald til til RESTApi skal ledsages at en slutmetode (endMethod) restAPI.js Sørger for kald til byggebasens web-service i REST. restAPI.js holder også styr på aktuelle søgning. Kald til byggebasen kan foregå synkront eller asynkront. Scriptet indeholder også en meget simpel template generator. Al kommunikation mellem server, moduler og hjemmeside er objekter formateret i JSON. Dvs. at det de kan benyttes direkte i javascripts uden yderligere omformning. Skabelon På adressen: http://test.DB12.dk/DB12.html findes en renset skabelon, som kan benyttes til baggrund for videre udvikling af egen implemntering. Download javascript Javascript kan downloades her http://www.DB12.dk/scripts/ProdSog.js http://www.DB12.dk/scripts/RESTApi.js Javascript:ProdSoeg.js + forside HTML Før javascriptene kan benyttes skal de initialiseres på siden, hvor de skal benyttes: <html> <head> <title> </title> <!--Indlæaser javascript filer--> <script type="text/javascript" language="javascript" src="Scripts/ProdSog.js"></script> <script type="text/javascript" language="javascript" src="Scripts/RESTApi.js"></script> <!--Indlæser JQuery, til brug for autocomplete ved leverandørsgning--> <script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.2.js"></script> <script type="text/javascript" language="javascript" src="Scripts/jquery-ui-1.8.21.custom.min.js"></script> function onload() { init(); } function init() { proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; objLib.restApi = RESTLib; } </script> </head> <body onload=”javascript:init();”> </body> </html> Ovenstående forbinder proxyen i respAPI til webservicen og forbinder objLib i ProdSog til restAPI Bemærk: Stierne for “scripts/ProdSoeg.js” og “scripts/RESTApi.js” er i forhold til eget site. Hvis der ønskes at henvise til byggebasens server skal URL indtastes her. På forsiden er der defineret en række felter som fra start er tomme, men skal fyldes med indhold. Felterne skal døbes vha ID Følgende felter er på DB12-sitet: <div id="ptvgTree"></div> - Felt til dannelse af træet for varegruppe/produkttype <div id="divMain"></div> - Felt til visning af Leverandører <div id="divStatus"></div> - Felt til visning af aktuelle status (fejl m.m.) På eget site er navne valgfrie, men javascriptet skal tilrettes med ændrede navne. En søgning foregår typisk 2 trin: 1. På bagrund af søgemetode og søgetekst dannes der Varegruppe/Produkttype træet. 2. Ved klik på en produkttype foretages søgning på leverandøre der tilmeldt udvidet garanti og som har vare i produkttypen Ved hvert trin i søgningen, opdateres der en overskrift der opsummerer aktuelle søgning. Javascript:restAPI.js Dette modul har 3 hovedopgaver (klasser): 1. Proxy 2. RESTLib 3. Templ Danner en proxy til kommunikation til serveren. Samt husker seneste søgning. Håndterer søgninger og kald til proxyen. Template håndtering i HTML . Søgning trin 1 Der er 4 forskellig slags søgninger på DB12. (se figur) BD varenr – Søger direkte på et BD varenr og er den eneste søgning der også viser et produkt. Varegruppe og ProduktType – Søger i hele varegruppeplanen Producent – Søger på producenter og leverandører. Eksempel på dannelse af en søgning: Når en bruger begynder at indtaste en søgning i søgefeltet. Er tekstboksens HTML udformet på flg. måde. <input type="text" id="tbSog" onkeyup="javascript:objLib.setUvisible(); RESTLib.sogProdukt(objLib.getTunUser(),objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.e ndProduktSog);" /> <input type="radio" id="rdTunNr" name="sogemetode" value="Tunnr" />Tunnr <input type="radio" id="Radio2" name="sogemetode" value="Varegruppe" />Varegruppe <input type="radio" id="Radio6" name="sogemetode" value="Producent" checked="checked" />Producent <input type="radio" id="rdProduktType" name="sogemetode" value="ProduktType" />ProduktType <a class="knap" onclick="javascript: objLib.setUvisible(); RESTLib.sogProdukt(undefined,objLib.getSogeMetode(),objLib.getSogeTekst(),objLib.endProduktS og,false);">Søg</a> For hver gang en bruger trykker en tast bliver metoden sogProdukt i ProdSoeg.js kaldt med 3 parametre tilknyttet: 1. Søgemetode (Producent) 2. Søgetekst (tekstboks) 3. Slut metode ved svar fra server. Søgemetoden tages fra valgte input-boks valuefelt. Derfor skal de have flg. navne: Tunnr (bemærk at der benyttes den gamle betegnelse) Varegruppe Producent ProduktType Selve sogProdukt ser således ud: sogProdukt: function (tunuser, sogeMetode, soegestreng, endMethod) { proxy.Search.soegstreng = soegestreng; proxy.Search.sogemetode = sogeMetode; if (soegestreng.length > 3) { var obj = JSON.stringify({ tunuser: tunuser }) + JSON.stringify({ sogeMetode: sogeMetode }) + JSON.stringify({ SoegStreng: soegestreng }); proxy.call("POST", "SogProduktREST/", true, endMethod, obj); } } Bemærk at der i if sætningen først begyndes at søge, når der indtastet 4 tegn. Sidste linje i metoden kalder proxyen asynkront ved parameteren ”true”. Parameteren ”endMethod” angiver hvilken metode der skal kaldes, når svaret modtages fra serveren. ”endMethod” var er angivet til at kalde metode ”endProduktSog” i prodSoeg.js og ser således ud: endProduktSog: function (result) { var ud = ''; var ni = document.getElementById('ptvgTree'); objLib.clearAllChilds('ptvgTree'); objLib.renderHeader(); if (result != null && result._vareGrupper != undefined) { for (b = 0; b < result._vareGrupper.length; b++) { var elem = tmpl("item_varegruppe", result._vareGrupper[b]); for (a = 0; a < result._vareGrupper[b]._produkttyper.length; a++) { result._vareGrupper[b]._produkttyper[a].vgNr = result._vareGrupper[b]._Nr; result._vareGrupper[b]._produkttyper[a].vgNavn = '\'' + result._vareGrupper[b]._Navn + '\''; result._vareGrupper[b]._produkttyper[a].ptNavn = '\'' + result._vareGrupper[b]._produkttyper[a]._Navn + '\''; elem += (tmpl("item_produkttype", result._vareGrupper[b]._produkttyper[a])); } ni.innerHTML += elem; } } } objLib.setHtml('ptvgTree', ud); } Obs: Ovenstående er en forsimplet kode og håndtere kun varegruppesøgning. Se ProdSog.js for den endelige implementering. Proxyen sørger automatisk for at kalde en angivet ”endMethod” og leverer serverens søgeresultat i metodekaldet i parameteren ”result” Linjen: var elem = tmpl("item_varegruppe", result.Result._vareGrupper[b]); bruger en template kaldet ”item_varegruppe” til at danne de overordnede varegrupper i søgningen. Linjen: elem += (tmpl("item_produkttype",result.Result._vareGrupper[b]._produkttyper[a])); Danner de tilhørende produkttyper for hver varegruppen ud fra HTML-template kaldet ”item_produkttype” Inden template bliver behandlet, bliver result objektet modificeret en anelse, af hensyn til dannelse af toplinjen (aktuelle søgning) og begrænsninger i javascript. (brug af anførselstegn og appostroffer). Template for dannelse af en linje af produkttype, ser således ud: <script type="text/html" id="item_produkttype"> <span class="ptDiv" id="<#=obj._Nr#>_<#=obj.vgNr#>" onclick="javascript:objLib.vgClick(<#=obj._Nr#>,<#=obj.vgNr#>, <#=obj.vgNavn#>, <#=obj.ptNavn#> , '<#=obj._Nr#>_<#=obj.vgNr#>');" ><span class="ptDiv2"><#=obj._Navn#></span><span class="ptDiv3"><#=obj._Nr#></span></span> </script> Søgning trin 2 Efter dannelsen af varegrupper og produkttyper – klikkes der på en produkttype for at søge efterleverandører og/eller producenter I templaten ”item_produkttype” bliver der indsat et span-objekt med en tilhørende onlclick event, som kalder metoden vgClick: vgClick: function (pt, vg, vgNavn, ptNavn, id) { proxy.Search.vareGruppeNavn = vgNavn; proxy.Search.produktTypeNavn = ptNavn; objLib.setHeader(vg, pt); var result = objLib.restApi.sogLevProduk(undefined, pt, vg, objLib.getSogeMetode(), objLib.getSogeTekst(), objLib.endVisLeverandoerer); } Ovenstående opdatere search-objektet med aktuelle søgning og kalder sogLevProdukt. SogLevProdukt kalder serveren og danner indhold til templaten ”item_udv_lev” hvor leverandør vises Templaten ”item_udv_lev” ser således ud: <script type="text/html" id="item_udv_tmpl"> <div style="clear:both; height:40px;width:790px;"> <div class="col2-1Header-Firma" > <#=obj.Navn#> </div> <div class="col2-1Header-Adresse"> <#=obj.Adresse#> </div> <div class="col2-1Header-Postnr-by"> <#=obj.Postnr#> <#=obj.By#> </div> <div class="col2-1Header-Tlf"> <#=obj.Telefonnr#> </div> <div class="col2-1Hehader-Ansvarsperiode"> <#=obj.AnsvarsPeriod#> </div> <div class="col2-1Header-SeVarer"> <span class="levDiv" id="<#=obj.tunbruger#>" onclick="javascript:objLib.levClick(<#=obj.tunbruger#>, <#=obj.ProduktTypeId#>, <#=obj.VareGruppeId#>, objLib.getSogeTekst(), <#=obj.tunbruger#>);">Se varer</span> </div> <br/> </div> </script> Visning af produkter Ved søgning direkte på et BD varenr vises produktet vha flg: danProduktVisning: function (result) { var elem = document.getElementById("divMain"); if (elem.firstChild != null) { elem.removeChild(elem.firstChild); objLib.clearAllChilds('divMain'); } var newdiv = document.createElement('div'); for (c = 0; c < result.getProduktSogResult.Result.length; c++) { newdiv.innerHTML += tmpl("item_tmpl", result.getProduktSogResult.Result[c]); } elem.appendChild(newdiv); } Proxy.Search Objekt. Til håndtering af aktuelle søgning: Indehold oplysninger for aktuel søgning og indstillinger for antal produkt pr side/visning. Search: { lev: null, vg: null, pt: null, sogemetode: null, soegstreng: null, prPage: 15, currentPage: 1, htmlID: null, Aktuelle leverandørnummer Aktuelle varegruppenummer Aktuells produkttypenr Default 15 produkter pr side (udfaset) Aktuelle side (udfaset) Støtte element vareGruppeNavn: null, produktTypeNavn: null, leverandoerNavn: null, resultProd: null, resultEndMethodProd: null, resultPages: null, resultEndMethodPages: null } Antal produkter i søgningen Slutmetode der skal danne visning Antal sider (resultProd / prPgae) (udfaset) Slutmetode der skal danne sidebladring Produktdata og javascript På sitet http://produktdata.danskebyggecentre.dk/ er det muligt at søge REACH, CE-Mærkning og andre udvalgte katalogdataemner. I bilag 1 er der vedhæftet et kodeeksempel, som udfører en søgning (se billede). Kodeeksemplet kan også downloades på adressen: www.DB12.dk/test.html Som det fremgår af eksemplet, benyttes restApi.js fra søgningen på udvidet ansvar på byggematerialer. Eksemplet beskriver de 6 trin der udføres for at danne en komplet visning på http://produktdata.danskebyggecentre.dk/ Proxy og angivelse af adresse på service sættes op i funktion ”init” function init() { proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; Sogning.Tunnr = 1505758; FindesREACH(Sogning.Tunnr); } Bemærk at på addressen 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc’ forbeholdt produktdatadata og en hyppigere opdatering. Det anbefales at benytte 'http://services.byggebasen.dk/RESTByggeData.svc’. Samt læse yderlig information på http://services.byggebasen.dk/Default.aspx Eksempel: Eksemplet beskriver 1. trin. Her dannes et ”sog” object indeholdende tunnr der ønskes forespurgt på. Webservicen kaldes på metoden ”FindesReach” gennem proxyen, med angivelse af metoden ”EndFindesReach”, som ønskes kaldt når webservicen returnere sit svar. /* 1. trin */ function FindesREACH(tunnr) { AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "FindesReach/", true, EndFindesReach, sog); } function EndFindesReach(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.FindesReachResult == true) { SogTunnr(Sogning.Tunnr); } } Bemærk: Trin 5 og 6 omhandler visning af produkt- og leverandørinformationer. Ønskes der en søgning hvor man også kan søge på EAN (stregkode). Anbefales det at man flytter trin 5 op til at være trin 1 da denne søgning også søger på EAN. Således får man også BD varenr (TUNNr) der skal bruges i de næste trin. Bilag 1: Kode eksempel til produktdata: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" lang="javascript" src="http://www.DB12.dk/Scripts/RESTApi.js"></script> <script> var Sogning = { Tunnr: null, Dato: null } function onload() { init(); } function init() { proxy.RESTPath = 'http://servicesBeta.byggebasen.dk/RESTByggeData.svc/'; Sogning.Tunnr = 1505758; FindesREACH(Sogning.Tunnr); } function AddText(text, tag) { var elem = document.getElementById('main'); if (tag!=undefined) elem.innerHTML += "<" + tag + ">" + text + " </" + tag + ">"; else elem.innerHTML += "<br />" + text; } /* 1. trin */ function FindesREACH(tunnr) { AddText("1. trin: Undersøger om der findes reach-information","h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "FindesReach/", true, EndFindesReach, sog); } function EndFindesReach(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); if (result.FindesReachResult == true) { SogTunnr(Sogning.Tunnr); } } /* 2. trin */ function SogTunnr(tunnr) { AddText("2. trin: Findfoldere med reach-information på tunnr", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "Folders/", true, EndSogTunnr, sog); } function EndSogTunnr(result) { Sogning.Dato = result.FoldersResult[0].Name; AddText("JSON object:", "b"); AddText(JSON.stringify(result)); FilesInFolders(result.FoldersResult[0].FullName); } /* 3. trin : filer i folder */ function FilesInFolders(Folder) { AddText("3. trin: Leder efter filer i folder:", "h2"); var sog = JSON.stringify({ Folder: Folder }); proxy.call("POST", "FilesInFolder/", true, EndFilesInFolders, sog); } function EndFilesInFolders(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); AddText("<a href=\"http://produktdata.danskebyggecentre.dk//visemne.aspx?dato=" + Sogning.Dato + "&tunnr=" + Sogning.Tunnr + "&file=" + result.FilesInFolderResult[0].Name + "\"/>Klik - for REACH</a>"); getAndreEmner(Sogning.Tunnr); } /* 4. trin : andre emner */ function getAndreEmner(tunnr) { AddText("4. trin: Leder efter yderligere katalogdataemner:", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "getREACHKatalogEmner/", true, endGetAndreEmner, sog); } function endGetAndreEmner(result) { // document.writeln(JSON.stringify(result)); AddText("JSON object:", "b"); AddText(JSON.stringify(result)); AddText("<br/><br/>Test resultat:", "b"); for (var a = 0; a < result.getReachKatalogEmnerResult.length; a++) { switch (result.getReachKatalogEmnerResult[a].id) { case 22: AddText("<a href=\"http:// produktdata.danskebyggecentre.dk/VisEmne.aspx?file=ce_corkcomfort.pdf&dato=filarkiv&tunnr=15 05758&type=23\"/>Klik - for CE-mærkning </a>"); default: AddText("<a href=\"http://mobil.byggebasen.dk//KatHandler.ashx?tunnr=" + result.getReachKatalogEmnerResult[a].tunnr + "&emneid=" + result.getReachKatalogEmnerResult[a].id + "\"/>Klik - for " + result.getReachKatalogEmnerResult[a].emne + " </a>"); } } getProdukt(Sogning.Tunnr); } /* 5. trin : hentProdukt */ function getProdukt(tunnr) { AddText("5. trin: Henter produkt:", "h2"); var sog = JSON.stringify({ tunnr: tunnr }); proxy.call("POST", "getSingleProdukt/", true, endProdukt, sog); } function endProdukt(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); getLeverandoer(result.getSingleProduktResult.TUNBRUGERNR); } /* 6. trin : Henter leverandør oplysninger */ function getLeverandoer(levnr) { AddText("6. trin: Henter producentinformationer:", "h2"); var sog = JSON.stringify({ levnr: levnr }); proxy.call("POST", "getLeverandoer/", true, endLeverandoer, sog); } function endLeverandoer(result) { AddText("JSON object:", "b"); AddText(JSON.stringify(result)); } </script> </head> <body onload="init();"> <h1>Produktdata - test</h1> <div id="main"> </div> </body> </html>
© Copyright 2024