Konverterad html-kod skrivs in i console - kopiera den där.

Konvertera

activeHTML

<gc-input gc-type="activeHTML" ng-model="page" gc-html="'Summan av 3 och 8 är {{3+8}}'"></gc-input>

book

<gc-input gc-type="book" ng-model="book"></gc-input>

button

<gc-input gc-type="button" gc-width="'50%'" gc-disabled="false" gc-click="alert('hej');" gc-label="{'se':'En text','default':'A text'}" ng-model="empty" gc-more-info="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}"></gc-input>

card

<gc-input gc-type="card" gc-width="'50%'" gc-title="{'se':'Titel','default':'Title'}" gc-link="'https://greencounsel.se'" gc-link-text="{'se':'https://greencounsel.se','default':'https://greencounsel.se'}" gc-description="{'se':'Beskrivning','default':'Description'}" gc-image="'https://service.greencounsel.se/cache/images/01SLBTKAEQ75IROAHQKZAIKON5JYKX5YIL_large.jpg'" gc-label="{'se':'En text','default':'A text'}" ng-model="empty" gc-more-info="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}"></gc-input>

Video

För gcConfiguration:
{"gcVideo":{"backgroundcolor":"white","shareurl":"https://service.greencounsel.se?id=","videocolor":"#445566","videoLoaderData":{"url":"https://service.greencounsel.se/video/videoloader.php","videoJSON":"https://service.greencounsel.se/video/video.json","action":"videoloader","site":"bcb07985-7586-4c30-afd1-daa0c879831f","client":"7519bd2c-1636-4262-9a7b-6e4c35ee166f","tenant":"76b9d5a4-1657-4ec2-bdc9-87aa8d85058b","image_dir":"https://service.greencounsel.se/cache/images/"},"statistics": {"url":"https://service.greencounsel.se/video/playstat.php"},"statistics_dynamic":{"profile":"title"} }

För videoloader.php:
En php-fil som renderar ett jsonobjekt i följande format: options: {poster, pauseposter, playlist: [{title:{se:xx,default:xx}, description:{se:xx,default:xx}, minutes, seconds, uploaded(time), tracks:[{file (url), label, shortlabel}], mp3 (url)/mp4(url)/webm(url), image (url), file, id (samma som file), type (video/audio)}]}

För playstat.php:
En PHP-fil som kan ta emot statistikuppdateringar ska ligga någonstans på servern och hänvisas till i gcConfiguration (url):

"gcVideo":{"statistics": {"url":"https://XXXXX"}}

Datan i $post är dels den statiska data som ligger i "statistics", dels den dynamiska data som kan hänvisas till i "statistics_dynamics" i formatet {"<parameter>":"<värde i $scope, utelämna $scope>"} (valfritt), dels vissa specifika data från gcVideo-komponenten (videoid (idnumret på videon), video (titeln på videon/musiken), shareurl (länken till videon) och type (något av start, progress och changeTime där start indikerar att det är en ny spelning, progress att spelningen fortskrider och changeTime att användaren har bytt tidsposition) samt currentTime (nuvarande spelposition, procentuellt).

<?php
$post=file_get_contents('php://input'); $post=json_decode($post,true);

if ($post['type']=="start") {
mt_srand((double)microtime() * 10000);
$charid = strtolower(md5(uniqid(rand(), true)));
$guid = substr($charid, 0, 8)."-".substr($charid, 8, 4)."-". substr($charid, 12, 4)."-".substr($charid, 16, 4)."-".substr($charid, 20, 12);
$s=[];
$s['time']=date("Y-m-d H:i:s");
$s['ip']=$_SERVER['REMOTE_ADDR'];
$s['guid']=$guid;
$s['video']=$post['video'];
$s['id']=$post['videoid'];
$s['shareurl']=$post['shareurl'];
$s['profile']=$post['profile'];
$s['duration']=$post['duration'];
$s['log']=[];
$ss=[]; $ss['startTime']=0; $ss['currentTime']=0;
$s['log'][]=$ss;
file_put_contents("/var/www/tmp/videolog.log",json_encode($s)."\r\n",FILE_APPEND);
echo '{"guid":"'.$guid.'"}';
} else {
$s=file_get_contents("/var/www/tmp/videolog.log");
$s=explode("\r\n",$s);

for ($i=count($s);$i>0;$i--) {
$st=json_decode($s[$i],true);
if (isset($st['guid'])) if
($st['guid']==$post['guid']) {
if ($post['type']=="changeTime") { $ss=[];
$ss['startTime']=$post['currentTime'];
$ss['currentTime']=$ss['startTime'];
$st['log'][]=$ss; }
if ($post['type']=="progress") {
$st['log'][ count($st['log'])-1
]['currentTime']=$post['currentTime'];
}
$s[$i]=json_encode($st);
file_put_contents("/var/www/tmp/videolog.log",implode("\r\n",$s));
break;
}
}
}
?>
<gc-input gc-type="carousel" ng-model="carousel" gc-alternatives="[{'img':'/cache/images/lang_en.png','onclick':'alert(\'https://greencounsel.se\')','caption':{'se':'Karusell 1','default':'Carousel 1'}},{'img':'/cache/images/01SLBTKAEQ75IROAHQKZAIKON5JYKX5YIL_large_S640x360.jpg','onclick':'alert(\'https://greencounsel.se\')','caption':{'se':'Karusell 2','default':'Carousel 2'}}]"></gc-input>

emailconfirm

gcruletext

generateddoc

hidden

<gc-input ng-model="hidden" gc-type="hidden"></gc-input>

instruction

<gc-input ng-model="instruction" gc-type="instruction" gc-html="'<h2>Instruktion</h2><p>Här är en text om instruktionen</p>'"></gc-input>

stepper

{{item}}
Ingen information att visa
<gc-input style="max-width:400px" gc-type="stepper" gc-page-length="5" ng-model="page" gc-search-result-function="searchResultFunction()" gc-more-info-type="ordinary" gc-more-info="{'se':'Mer information','default':'more information'}" gc-form-name="formular" ></gc-input><div ng-repeat="item in searchResultFunction()" ng-if="$index>=page*5 && $index<(page+1)*5">{{item}}</div> <div ng-if="searchResultFunction().length==0">Ingen information att visa</div>

table

gc-error

<img style="width:150px" gc-error="{'url':'/addons/reloadThumbnail.php','id':'01SLBTKAE5DE3CTWXE5NF255FEKM4ALAUX','site':'Organist','key':'url_medium'}" gc-spinner="/cache/images/spinner.svg" gc-src="gcImage">

gc-error att innehålla åtminstone url, id och site (om inte site_id anges; site är det läsbara namnet på sharepoint-sidan)). Valfritt med types (default ['small','medium','large']), key (url_small, url_medium eller url_large), tenant_id, client_id, site_id, drive_id.

gc-img-convert

<img style="width:150px" gc-img-convert="https://service.greencounsel.se/cache/images/01SLBTKAE5DE3CTWXE5NF255FEKM4ALAUX_medium.jpg&size=400x200">

uploadFile

Ladda upp
----------------HTML-------------------------

<style>md-progress-linear .md-container {background-color:white} </style> <div layout="row" layout-align="start space-between"> <gc-input flex gc-file="poster" gc-type="uploadFile" gc-label="{'sv':'Albumfoto','default':'Album foto'}" gc-current-file-thumbnail-url="posterthumbnail" ng-model="nn" gc-accept="'image/jpeg, image/tiff, image/bmp, image/png'" gc-percentage="trackDownload"></gc-input> <md-button ng-click="uploadF(poster)">Ladda upp</md-button> </div>

----------------Javascript för inladdning av komponent---------------

.factory('gcUploadFile',gcUploadFile)

----------------Javascript för uploadF(poster)---------------

var deleteObj=[];
var uploadObj=[];
if (typeof $scope.uploadFile!=="undefined") if (typeof $scope.uploadFile!=="string") {
deleteObj.push($scope.uploadFile);
uploadObj.push({"uploadFile":$scope.uploadFile,"uploadExtras":{"target":"album."+$scope.uploadObject.id,"tenant":"","siteName":"","clientId":"","targetPath":"test/test.png"},"uploadUrl":"/uploadFile.php","initialDataUploadObject":{"action":"getUploadUrl"},"finalDataUploadObject":{"action":"chunkUpload"},"percentage":'percentage'});

$scope.updateProgress=function(gcUploadFile) {
for (var i=0;i<gcUploadFile.uploadObject.length;i++) {
$scope.$eval(gcUploadFile.uploadObject[i].percentage+"="+gcUploadFile.uploadObject[i].percentUploaded+";");
}
}

gcUploadFile.upload(uploadObj,$scope.updateProgress).then(function(data) {
$scope.cancel();
for (k in deleteObj) delete k;
$scope.$apply();
});
}
-----------------PHP för intern uppladdning----------------

Se filen som hänvisas till i uploadUrl ovan. uploadFile.php kan användas som standard tillsammans med parseQueue.php för vidareuppladdning till oneDrive

-------PHP för kö till vidareuppladdning till OneDrive och ev. förbehandling (parseQueue.php)---------

parseQueue.php läser av kön och förbereder uppladdning och kör automationsskript om det angetts för respektive fil.
  • path*: Lokal sökväg till fil som ska laddas upp
  • filename*: Sökväg på onedrive till fil efter att den laddats upp
  • processing: Sätts automatiskt, true om bearbetning pågår
  • siteName*, tenant*, clientId* och driveId: Värden för uppladdning till onedrive
  • automate: (valfritt) namn på php-fil (utan .php) i /var/www/automate med automationskript för förbehandling, uppladdning, uppdatering och rensning. Saknas automate laddas filen upp till onedrive och tas sedan bort lokalt på servern.
  • Specifika värden för den aktuella tjänsten som kan användas från objektet $q i automate-skriptet

multiselectlist

<gc-input gc-type="multiselectlist" gc-removable="true" gc-required="true" gc-show-add-button="true" gc-label-new="{'se':'Lägg till listpost','default':'Add list item'}" ng-model="multiselectlist" gc-item-click="selecteditem=[val]" gc-label="{'se':'Lista','default':'List'}" gc-load-select-options="updateOptions()" gc-background="selecteditem==[val]?'{{platformcolor}}':'#ddd'" gc-color="selecteditem==[val]?'white':'black'" gc-more-info="{'se':'Information','default':'Information'}" gc-extra-text="{'se':'Extra text','default':'Additional text'}" gc-form-name="formular"></gc-input>

text

<div ng-repeat="lang in ['se','en','fr']"><gc-input style="max-width:400px" gc-type="text" gc-lang="lang" gc-label="{'se':'Kort text','default':'Short text'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-pattern="" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" ng-model="translation[lang]" gc-form-name="formular" gc-translation='{"se":["translation.se"],"en":["translation.en"],"fr":["translation.fr"]}' gc-toolbar='{"translate":true}' gc-translation-ongoing="trackerstatus"></gc-input></div>

quill

<gc-input gc-component-class="gc-input-klass" style="max-width:400px" gc-type="quill" gc-lang="lang" ng-repeat="lang in ['se','en','fr']" gc-label="{'se':'Formatterad text','default':'Formatted text'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-pattern="" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" ng-model="translation2[lang]" gc-form-name="formular" gc-translation='{"se":["translation2.se"],"en":["translation2.en"],"fr":["translation2.fr"]}' gc-toolbar='{"translate":true}' gc-translation-

longtext

<gc-input style="max-width:400px" gc-type="longtext" gc-lang="lang" ng-repeat="lang in ['se','en','fr']" gc-label="{'se':'Lång text','default':'Long text'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-pattern="" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="translation3[lang]" gc-form-name="formular" gc-translation='{"se":["translation3.se"],"en":["translation3.en"],"fr":["translation3.fr"]}' gc-toolbar='{"translate":true}' gc-translation-ongoing="translationstatus2"></gc-input>

number

<gc-input style="max-width:400px" gc-type="number" gc-label="{'se':'Nummer (heltal)','default':'Number (whole number)'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-pattern="" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="number" gc-form-name="formular"></gc-input>

float

<gc-input style="max-width:400px" gc-type="float" gc-label="{'se':'Nummer (med decimaler)','default':'Number (with decimals)'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-pattern="" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="float" gc-form-name="formular"></gc-input>

email

<gc-input style="max-width:400px" gc-type="email" gc-label="{'se':'Email','default':'Email'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="email" gc-form-name="formular"></gc-input>

date

<gc-input style="max-width:400px" gc-type="date" gc-label="{'se':'Datum','default':'Date'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="date" gc-form-name="formular"></gc-input>

datetime

<gc-input style="max-width:400px" gc-type="datetime" gc-label="{'se':'Datum och tid','default':'Date and time'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="datetime" gc-form-name="formular"></gc-input>

time

<gc-input style="max-width:400px" gc-type="time" gc-label="{'se':'Tid','default':'Time'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="time" gc-form-name="formular"></gc-input>

color

<gc-input style="max-width:400px" gc-type="color" gc-label="{'se':'Färg','default':'Color'}" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info-type="ordinary" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-more-info="{'se':'Information här','default':'annan information'}" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" ng-model="color" gc-form-name="formular"></gc-input>

checkbox

<gc-input style="max-width:400px" gc-type="checkbox" gc-label="{'se':'Checkbox','default':'Checkbox'}" gc-more-info-type="ordinary" gc-more-info-label="{'se':'Mer information','default':'more information'}" gc-more-info="{'se':'Mer information','default':'more information'}" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" ng-model="checkbox" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" gc-form-name="formular"></gc-input>

radio

<gc-input style="max-width:400px" gc-type="radio" gc-label="{'se':'Radio','default':'Radio'}" gc-more-info-type="ordinary" gc-more-info="{'se':'Mer information','default':'more information'}" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-select-options="[{'value':'yes','caption':{'se':'Ja','default':'Yes'}},{'value':'no','caption':{'se':'Nej','default':'No'}}]" ng-model="radio" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" gc-form-name="formular" ></gc-input>

select

<gc-input style="max-width:400px" gc-type="select" gc-label="{'se':'Select','default':'Select'}" gc-more-info-type="ordinary" gc-more-info="{'se':'Mer information','default':'more information'}" gc-hide-search="false" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-select-options="[{'value':'yes','caption':{'se':'Ja','default':'Yes'}},{'value':'no','caption':{'se':'Nej','default':'No'}}]" ng-model="select" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" gc-form-name="formular" ></gc-input>

multiselect

Without dropdown

<gc-input style="max-width:400px" gc-type="multiselect" gc-label="{'se':'Select utan dropdown','default':'Select without dropdown'}" gc-more-info-type="ordinary" gc-more-info="{'se':'Mer information','default':'more information'}" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-select-options="[{'value':'yes','caption':{'se':'Ja','default':'Yes'}},{'value':'no','caption':{'se':'Nej','default':'No'}}]" ng-model="selectwithoutdropdown" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" gc-form-name="formular" ></gc-input>

With dropdown

<gc-input style="max-width:400px" gc-type="multiselect" gc-dropdown="true" gc-label="{'se':'Select med dropdown','default':'Select with dropdown'}" gc-more-info-type="ordinary" gc-more-info="{'se':'Mer information','default':'more information'}" gc-required-message="{'se':'Du måste fylla i ett värde','default':'You must enter a value'}" gc-required="true" gc-select-options="[{'value':'yes','caption':{'se':'Ja','default':'Yes'}},{'value':'no','caption':{'se':'Nej','default':'No'}}]" ng-model="select2" gc-extra-text="{'se':'<i>Ytterligare text</i>','default':'<i>Other text</i>'}" gc-form-name="formular" ></gc-input>