Changeset 6577


Ignore:
Timestamp:
Jan 12, 2018, 1:54:28 PM (20 months ago)
Author:
joamuran
Message:

wip

Location:
classroom-assembly/trunk/fuentes/classroom-assembly/src
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/components/weekday/weekday.js

    r6550 r6577  
    286286        var configRow=$(document.createElement("div")).addClass("weekdayConfigRow").addClass("col-md-4 col-md-offset-4").attr("weekday_data", weekday);
    287287       
    288         /**/
    289288        var configRowDay=$(document.createElement("div")).addClass("col-md-10").attr("weekday_data", weekday);
    290289       
     
    300299        var iconConfigBt=$(document.createElement("div")).addClass("configureComponentButton col-md-1").attr("title", i18n.gettext("click.set.actions")).attr("weekday", weekday).attr("actions","");
    301300       
    302         /**/
    303301        $(configRowDay).append(icon);
    304302        $(configRowDay).append(text);
     
    306304        $(configRow).append(iconConfigBt);
    307305       
    308         /*$(configRow).append(selected);*/
    309306        $(input).append(configRow);
    310307       
     
    353350
    354351weekdayComponentClass.prototype.createFormRadios=function createFormRadios(data){
    355    
     352    var self=this;
    356353   
    357354    var ret=$(document.createElement("div")).addClass("custom-controls-stacked");
    358     var legend=$(document.createElement("legend")).html(data.name);
     355    var legend=$(document.createElement("legend")).html(data.name).css("padding-top","24px");
    359356   
    360357    $(ret.append(legend));
    361358   
     359   
     360    // WIP: Cal afegir l'atribut name a cada component que volgam que es recupere en processar el formulari!!!
     361   
     362   
     363   
    362364    for (radio in data.radios){
    363         console.log(data.radios[radio].id);
    364        
    365         // WIP
    366         // https://getbootstrap.com/docs/4.0/components/forms/#default-stacked
    367         var div=$(document.createElement("div")).addClass("form-check");
     365        //console.log(data.radios[radio].id);
     366       
     367        var div=$(document.createElement("div")).addClass("form-check col-md-12");
    368368        var input=$(document.createElement("input")).attr("id", data.radios[radio].id).attr("type","radio").attr("name", data.name).addClass("form-check-input");
    369         var label=$(document.createElement("label")).addClass("form-check-label");
     369        if (data.radios[radio].status) $(input).attr("checked", "true");
     370        var label=$(document.createElement("label")).addClass("form-check-label col-md-12").css("margin-bottom", "16px");
    370371        var spanlabel=$(document.createElement("span")).html(data.radios[radio].label).css("margin-left", "20px");
    371372       
    372         var divtext=$(document.createElement("div")).addClass("col-md-8 col-md-offset-2");
    373         var labeltext=$(document.createElement("span")).addClass("col-md-4").html("Text");
    374         var text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6");
    375         $(divtext).append(labeltext, text);
    376        
     373        var divtext=$(document.createElement("div")).addClass("col-md-8 col-md-offset-1");
     374       
     375        // WIP: Posar el offset-2 si no és video, i si és video, posar aci al costat el thumbnails.default.url
     376        // O a una mala, quan es passe el ratolí per damunt del text
     377       
     378        if (data.radios[radio].type=="file"){
     379           
     380            var labeltext="";
     381            if (data.radios[radio].helperlabel!=="") labeltext=$(document.createElement("span")).addClass("col-md-4").html("("+data.radios[radio].helperlabel+")");
     382            var text=$(document.createElement("input")).attr("type", "file").addClass("col-md-9 AudioFileInput").attr("accept", ".mp3, .wav, .ogg");
     383            var playbt=$(document.createElement("button")).attr("type", "button").addClass("col-md-1 btn btn-default btn-circle previewPlayButton").attr("id", data.radios[radio].id+"previewPlayButton").addClass("previewPlayButton").attr("audioData", data.radios[radio].helperlabel);
     384            var recbt=$(document.createElement("button")).attr("type", "button").addClass("col-md-1 btn btn-default btn-circle recordButton").attr("id", data.radios[radio].id+"recordButton");
     385            /*$(divtext).append(labeltext, text, playbt, recbt);
     386            $(divtext).append(text, playbt, recbt);*/
     387            $(divtext).append(labeltext, text, playbt);
     388            $(divtext).append(text, playbt);
     389        }
     390        else if (data.radios[radio].type=="url"){
     391            var videoId;
     392            var infoVideo=null;
     393           
     394            if (data.radios[radio].helperlabel)
     395                {
     396                    videoId=data.radios[radio].helperlabel;
     397                    infoVideo=getYoutubeInfo(videoId);
     398                }
     399           
     400            //console.log(infoVideo);
     401           
     402            var labeltext="";
     403            var text="";
     404            var snippet=null;
     405           
     406            labeltext=$(document.createElement("span")).addClass("col-md-12");
     407            text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6 YoutubeURL").attr("name", "YoutubeURL");
     408           
     409            snippet=$(document.createElement("a")).addClass("col-md-2 snippet");
     410            if (infoVideo) {
     411                $(snippet).css("background-image", "url("+infoVideo.thumbnails.default.url+")").attr("href", "https://www.youtube.com/watch?v="+data.radios[radio].helperlabel).attr("target","_blank");
     412                $(labeltext).html("("+infoVideo.title+")");
     413                $(text).attr("value", "https://www.youtube.com/watch?v="+data.radios[radio].helperlabel);
    377414               
    378         $(label).append(input, spanlabel);
    379         $(div).append(label, divtext);
     415            }
     416           
     417            /*if (infoVideo) {
     418                labeltext=$(document.createElement("span")).addClass("col-md-12").html("("+infoVideo.title+")");
     419                text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6 YoutubeURL").attr("value", "https://www.youtube.com/watch?v="+data.radios[radio].helperlabel);
     420                snippet=$(document.createElement("a")).addClass("col-md-2 snippet").css("background-image", "url("+infoVideo.thumbnails.default.url+")").attr("href", "https://www.youtube.com/watch?v="+data.radios[radio].helperlabel).attr("target","_blank");
     421                $(divtext).removeClass("col-md-10").addClass("col-md-8");
     422            } else text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6 YoutubeURL");*/
     423           
     424            $(divtext).append(labeltext, text);
     425        }
     426        else { // Default: type="text"
     427            var text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6").attr("value", data.radios[radio].helperlabel);
     428            $(divtext).append(text);
     429        }
     430       
     431        $(label).append(input, spanlabel, divtext);
     432        if(snippet) $(label).append(snippet);
     433        $(div).append(label);
    380434        $(ret).append(div);
    381435    }
    382    
     436
    383437    return ret;
    384438   
     
    386440
    387441weekdayComponentClass.prototype.showConfigActions=function showConfigActions(weekday){
    388    
    389442        var self=this;
    390         // WIP: Construir-ho com a javascript per poder posar les traduccions
    391         // Mirar també els laber for i tal de bootstrap i els form-control...
    392        
    393         //var input="";
    394         /*var form=document.createElement("div");
    395         var hdr1=$(document.createElement("h3")).html(i18n.gettext("actions.on.show"));
    396         $(form).append(hdr1);*/
    397        
    398         var form;
     443       
     444        console.log("!!!!!!!!");
     445        console.log(self.hasOwnProperty("actions"));
     446        console.log(weekday);
     447        console.log(self.actions[weekday]);
     448       
     449       
     450        var formOnShow, formOnPlay;
    399451        var input="";
    400        
    401         form=self.createFormRadios({
    402             "name":"Action.on.show",
     452        var speechcontent="";
     453        var onplaycontent="";
     454        var playfileaudio="";
     455        var playfilevideo="";
     456        var playurlvideo="";
     457        var r1status,r2status,r3status,r4status,r5status;
     458        r1status=r2status=r3status=r4status=r5status=false;
     459       
     460        try {if (self.hasOwnProperty("actions")) {
     461            if (self.actions[weekday].onshow.action=="speech") {
     462                speechcontent=self.actions[weekday].onshow.content;
     463                r1status=true;
     464            }
     465            if (self.actions[weekday].onshow.action=="sound") {
     466                onplaycontent=self.actions[weekday].onshow.content;
     467                r2status=true;
     468                }
     469           
     470            if (self.actions[weekday].onplay.action=="sound") {
     471                playfileaudio=self.actions[weekday].onplay.source;
     472                r3status=true;
     473            }
     474           
     475            if (self.actions[weekday].onplay.action=="video" &&
     476                self.actions[weekday].onplay.type=="file") {
     477                playfilevideo=self.actions[weekday].onplay.source;
     478                r4status=true;
     479            }
     480           
     481            if (self.actions[weekday].onplay.action=="video" &&
     482                self.actions[weekday].onplay.type=="youtube") {
     483                playurlvideo=self.actions[weekday].onplay.source;
     484                r5status=true;
     485            }
     486        }} catch(e){console.log("Exception "+e+". continue executing");}
     487           
     488        console.log(weekday);
     489       
     490        formOnShow=self.createFormRadios({
     491            "name": i18n.gettext("Action.on.show"),
    403492            "radios":{
    404493                "r1":{
    405494                    "id": "speakOnShow",
     495                    "status":r1status,
    406496                    "type": "text",
    407                     "label": "Speak"
     497                    "label": i18n.gettext("Speech a phrase"),
     498                    "helperlabel":speechcontent
    408499                    },
    409500                "r2":{
    410501                    "id": "playOnShow",
     502                    "status":r2status,
    411503                    "type": "file",
    412                     "label": "Play"
     504                    "label": i18n.gettext("Play an audio file"),
     505                    "helperlabel":onplaycontent // o el fitxer que siga...
    413506                    }
    414507                }
    415508            });
    416509       
    417         /*var row1=$(document.createElement("div")).addClass("col-md-8 col-md-offset-2");
    418         var colShowSpeakRadio=$(document.createElement("div")).addClass("col-md-5");
    419        
    420         var label4inputShowSpeakRadio=$(document.createElement("label")).attr("for", "inputRadioOnShowSpeak").html("label.speak");
    421        
    422         var colShowSpeakText=$(document.createElement("div")).addClass("col-md-4");
    423         var inputShowSpeakRadio=$(document.createElement("input")).attr("type", "radio").attr("value", "speak").attr("id", "inputRadioOnShowSpeak");
    424         var inputTextOnShowSpeak=$(document.createElement("input")).attr("type", "text").attr("value", "aci el text").attr("id", "inputTextOnShowSpeak").addClass("col-md-4");
    425         $(colShowSpeakRadio).append(inputShowSpeakRadio, label4inputShowSpeakRadio);
    426         $(colShowSpeakText).append(inputTextOnShowSpeak);
    427         $(row1).append(colShowSpeakRadio, colShowSpeakText);
    428         $(form).append(row1);
    429         */
    430        
    431        
    432        
    433         console.log(form);
    434         input=input+form.prop("outerHTML");
    435        
    436        
    437        
    438         //var row1=$(document.createElement("div"));
    439        
    440         /*input='<h3>Actions on show</h3>\<div class="row" style="width: 60%">'
    441         +'<div class="col-md-4"><input class="form-control" type="radio" name="onshow" value="speak" id="inputRadioOnShowSpeak"> Speak </div>'
    442         +'<div class="col-md-4"><input type="text" value="text" id="inputTextOnShowSpeak"/></div></div>'
    443         +'<div class="row"  style="width: 60%">'
    444           +'<div class="col-md-4"><input type="radio" name="onshow" value="audio" id="inputRadioOnShowAudio"> Audio</div>'
    445             +'<div class="col-md-4"><input type="file" value="bb" id="inputFileOnShow"/></div></div>'
    446         +'<div>Media player</div>'
    447         +'<div class="row" style="width: 60%">'
    448             +'<div class="col-md-4"><input type="radio" name="onplay" value="audio" id="inputRadioOnPlayAudio"> Audio File</div>'
    449             +'<div class="col-md-4"><input type="file" value="bb" id="inputOnPlayAudio"/></div></div>'
    450         +'<div class="row" style="width: 60%">'
    451             +'<div class="col-md-4"><input type="radio" name="onplay" value="video" id="inputRadioOnPlayVideo"> Video File</div>'
    452                 +'<div class="col-md-4"><input type="file" value="bb" id="inputOnPlayVideo"/></div></div>'
    453         +'<div class="row" style="width: 60%">'
    454             +'<div class="col-md-4"><input type="radio" name="onplay" value="youtube" id="inputRadioOnPlayYoutube">Youtube Resource</div>'
    455             +'<div class="col-md-4"><input type="text" value="text" id="inputOnPlayYoutube"/></div></div>';
    456         */
    457        
    458        
    459 
    460          vex.dialog.open({
     510         formOnPlay=self.createFormRadios({
     511            "name": i18n.gettext("Action.on.play"),
     512            "radios":{
     513                "r1":{
     514                    "id": "AudioOnPlay",
     515                    "status":r3status,
     516                    "type": "file",
     517                    "label": i18n.gettext("Play an audio file"),
     518                    "helperlabel":playfileaudio
     519                    },
     520                "r2":{
     521                    "id": "VideoOnPlay",
     522                    "status":r4status,
     523                    "type": "file",
     524                    "label": i18n.gettext("Play a video file"),
     525                    "helperlabel":playfilevideo // o el fitxer que siga...
     526                    },
     527                "r3":{
     528                    "id": "VideoOnlineOnPlay",
     529                    "status":r5status,
     530                    "type": "url",
     531                    "label": i18n.gettext("Play video from Youtube"),
     532                    "helperlabel":playurlvideo // o el fitxer que siga...
     533                    }
     534                }
     535            });
     536       
     537             
     538        input=input+formOnShow.prop("outerHTML")+formOnPlay.prop("outerHTML");
     539       
     540        vex.dialog.open({
    461541            message: i18n.gettext(weekday),
    462542            input: input,
     
    465545            /*buttons: {},*/
    466546            overlayClosesOnClick: true,
    467             callback: function(data){ alert("done"); }
     547            callback: function(data){
     548                console.log(data);
     549                alert("done");
     550            }
     551        });
     552       
     553        /* Binding Events */
     554       
     555        // Clic on previeu audio button
     556        $(".previewPlayButton").on("click", function(ev){
     557            var audiodata=$(ev.target).attr("audiodata");
     558            if ($(ev.target).prev().val()!=="") audiodata=($(ev.target).prev().val());
     559           
     560            if (appGlobal.player===null)
     561            {
     562                if (audiodata!=="") appGlobal.playAudio(audiodata);
     563            } else{ // appGlobal.player!==null
     564                appGlobal.player.kill();
     565                appGlobal.player=null;
     566                $("#audioStartStop").removeClass("pulsatingaudio");
     567            }
     568           
    468569            });
    469570   
     571    // Changes on file uploads
     572    $(".AudioFileInput").on("change", function(){
     573            var newFile=this.value;
     574            alert(newFile);
     575    });
     576   
     577    // Changes on paste youtube url
     578    $(".YoutubeURL").on("paste", function(ev){
     579        setTimeout(function () {
     580            try{
     581                var url=$(ev.target).val();
     582                var videoId=url.replace("https://www.youtube.com/watch?v=", "");
     583                if (videoId===url) alert("Error");
     584                else{
     585                    // All ok
     586                    infoVideo=getYoutubeInfo(videoId);
     587                    if (infoVideo) {
     588                        $(ev.target).prev().html(infoVideo.title);
     589                        $(ev.target).parent().next().css("background-image", "url("+infoVideo.thumbnails.default.url+")").attr("href", url).attr("target","_blank");
     590                } else alert("unknown video");
     591                }
     592            } catch(err){
     593                console.log("Unexpected Error "+err);
     594                }
     595           
     596        }, 0);
     597       
     598       
     599       
     600        });
    470601   
    471602};
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/css/main.css

    r6494 r6577  
    527527}
    528528
    529 
     529.previewPlayButton, .recordButton{
     530    border-radius:50%;
     531    width: 30px;
     532    height: 30px;
     533    padding:0px !important;
     534    margin:0px !important;
     535}
     536
     537.previewPlayButton{
     538    background-size: contain;
     539    background-position: center;
     540    background-repeat: no-repeat;
     541    /*background-image: url(images/icons/PlayComponentButton.png);*/
     542    background-image: url(images/icons/audio.png);
     543}
     544
     545.snippet{
     546    background-size: contain;
     547    background-position: center;
     548    background-repeat: no-repeat;
     549    height: 90px;
     550}
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/js/main.js

    r6550 r6577  
    2626    });
    2727}
     28
     29
     30function getYoutubeInfo(videoId){
     31    var apiKey = "AIzaSyBdpTjuhH9LXnzbgtnRBH3lgc1XI2_Kwxo";
     32    //var videoId = "BF7w-xJUlwM";
     33    //var videoId = url.split("?v=")[1]; // Gettind video id from youtube url
     34    var gUrl = "https://www.googleapis.com/youtube/v3/videos?id=" + videoId + "&key=" + apiKey + "&part=snippet";
     35   
     36    var response;
     37   
     38    $.ajax({
     39        async: false,
     40        url: gUrl,
     41        type: "GET",
     42        success: function(resp){
     43            try{
     44                response=resp.items[0].snippet;
     45            }   catch(err){return false;}
     46            },
     47        dataType: "json"
     48    });
     49
     50    console.log(response);
     51    return response;
     52   
     53}
     54
    2855
    2956function UI(){
     
    272299   
    273300    var player=require('play-sound')(opts = {});
    274    
    275     self.player=player.play(self.configDir+'/media/'+file, function(err){
     301    var fileToPlay;
     302   
     303    if(file[0]==="/") fileToPlay=file; // Indicates file with an absolute path
     304    else fileToPlay=self.configDir+'/media/'+file;  // file in relative path (into media/ folder)
     305   
     306    self.player=player.play(fileToPlay, function(err){
    276307        console.log(err);
    277308        if (err) throw err;
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/ca_ES.UTF-8.json

    r6550 r6577  
    128128  "ask_delete_assembly": "Esteu segurs que desitgeu esborrar l'assemblea?",
    129129  "delete_assembly": "Sí, esborra-la",
    130   "cancel_delete_assembly":"No, cancel·la l'operació"
     130  "cancel_delete_assembly":"No, cancel·la l'operació",
     131 
     132  "Action.on.show":"Acció en mostrar l'element",
     133  "Speech a phrase":"Pronuncia una frase",
     134  "Play an audio file":"Reprodueix un fitxer d'àudio",
     135  "Action.on.play":"Acció en reproduir l'element",
     136  "Play a video file":"Reprodueix un fitxer de vídeo",
     137  "Play video from Youtube":"Reprodueix vídeo des de Youtube"
    131138 
    132139}
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/en_US.UTF-8.json

    r6550 r6577  
    127127  "ask_delete_assembly": "Are you sure to delete this assembly",
    128128  "delete_assembly": "Yes, delete it",
    129   "cancel_delete_assembly":"No, cancel it"
     129  "cancel_delete_assembly":"No, cancel it",
     130 
     131  "Action.on.show":"Action when showing item",
     132  "Speech a phrase":"Say a sentence",
     133  "Play an audio file":"Play an audio file",
     134  "Action.on.play":"Action when playing item",
     135  "Play a video file":"Play a video file",
     136  "Play video from Youtube":"Play a video from Youtube"
    130137 
    131138}
  • classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/es_ES.UTF-8.json

    r6550 r6577  
    129129  "ask_delete_assembly": "?Desea eliminar esta asamblea?",
    130130  "delete_assembly": "Sí, elimínela",
    131   "cancel_delete_assembly":"No, cancelar la operación"
     131  "cancel_delete_assembly":"No, cancelar la operación",
     132 
     133  "Action.on.show":"Acciones cuando se muestre el elemento",
     134  "Speech a phrase":"Pronuncia una frase",
     135  "Play an audio file":"Reproduce un fichero de audio",
     136  "Action.on.play":"Acciones cuando se reproduzca el elemento",
     137  "Play a video file":"Reproduce un fichero de video",
     138  "Play video from Youtube":"Reprodure un video desde youtube"
    132139 
    133140 
Note: See TracChangeset for help on using the changeset viewer.