Playground

[ramnathv]

There are several ways I can design the playground.

Idea 1

I can use a single gist with examples.json, example1.R, example2.R etc. This will allow users to share an example or a collection with ease. I managed to implement this as

myApp.controller('MainCtrl', function($scope, $http){
    $.getJSON('https://api.github.com/gists/8063480')
      .success(function(result){
        $scope.$apply(function(){
          $scope.files = result.files
          $scope.examples = JSON.parse($scope.files['examples.json'].content)
          $scope.example = $scope.examples[0]
        })
      })


    $scope.$watch('example', function(newExample){
      $scope.example = newExample
      $scope.exampleCode = $scope.files[newExample.file].content
      $("#output").attr('src', "")
      $("#download").hide()
    })


   $scope.makeChart = function(){
        $("#output").attr('src', '')
        $("#loading").show()
        var req = ocpu.call("make_chart", {
        text: $scope.exampleCode   
     }, function(session){
       $("#loading").hide()
       $("#output").attr('src', session.getLoc() + "files/output.html");  
       $("#download").show()
       $scope.$apply(function(){
         $scope.dnlink = session.getLoc() + "files/output.html"
       })
     }).fail(function(text){
      alert("Error: " + req.responseText);
     });  
   }

   $scope.aceOptions = {
     theme: 'solarized_dark',
     mode: 'r',
     useWrapMode : true
   }

})