Fix embed URL & move logic into a directive

This commit is contained in:
Arik Fraimovich 2016-02-10 15:34:31 +02:00
parent a5168ecc80
commit 8cf7314dc0
3 changed files with 32 additions and 19 deletions

View File

@ -183,6 +183,7 @@
<script> <script>
// TODO: move currentUser & features to be an Angular service // TODO: move currentUser & features to be an Angular service
var clientConfig = {{ client_config|safe }}; var clientConfig = {{ client_config|safe }};
var basePath = "{{base_href}}";
var currentUser = {{ user|safe }}; var currentUser = {{ user|safe }};
var currentOrgSlug = "{{ org_slug }}"; var currentOrgSlug = "{{ org_slug }}";

View File

@ -186,12 +186,40 @@
} }
}; };
var EmbedCode = function ($location) {
return {
restrict: 'E',
scope: {
visualization: '=',
query: '='
},
template:
'<div class="col-lg-8 embed-code">' +
'<i class="fa fa-code" ng-click="showCode = showCode==true ? false : true;"></i>' +
'<div ng-show="showCode">' +
'<span class="text-muted">Embed code for this visualization: <small>(height should be adjusted)</small></span>' +
'<code>&lt;iframe src="{{ embedUrl }}"<br/>' +
'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
'width="720" height="391"&gt;&lt;/iframe&gt;</code>' +
'</div>' +
'</div>',
replace: true,
link: function (scope) {
scope.$watch('visualization', function(visualization) {
if (visualization) {
scope.embedUrl = basePath + 'embed/query/' + scope.query.id + '/visualization/' + scope.visualization.id + '?api_key=' + scope.query.api_key;
}
});
}
};
};
angular.module('redash.visualization', []) angular.module('redash.visualization', [])
.provider('Visualization', VisualizationProvider) .provider('Visualization', VisualizationProvider)
.directive('visualizationRenderer', ['$location', 'Visualization', VisualizationRenderer]) .directive('visualizationRenderer', ['$location', 'Visualization', VisualizationRenderer])
.directive('visualizationOptionsEditor', ['Visualization', VisualizationOptionsEditor]) .directive('visualizationOptionsEditor', ['Visualization', VisualizationOptionsEditor])
.directive('visualizationName', ['Visualization', VisualizationName]) .directive('visualizationName', ['Visualization', VisualizationName])
.directive('embedCode', ['$location', EmbedCode])
.directive('filters', Filters) .directive('filters', Filters)
.directive('editVisulatizationForm', ['Events', 'Visualization', 'growl', EditVisualizationForm]) .directive('editVisulatizationForm', ['Events', 'Visualization', 'growl', EditVisualizationForm]);
})(); })();

View File

@ -236,15 +236,7 @@
<grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer> <grid-renderer query-result="queryResult" items-per-page="50"></grid-renderer>
<div class="row" ng-if="vis.type=='TABLE'" ng-repeat="vis in query.visualizations"> <div class="row" ng-if="vis.type=='TABLE'" ng-repeat="vis in query.visualizations">
<div class="col-lg-8 embed-code"> <embed-code visualization="vis" query="query"/>
<i class="fa fa-code" ng-click="show_code = show_code==true ? false : true;"></i>
<div ng-show="show_code">
<span class="text-muted">Embed code for this table: <small>(height should be adjusted)</small></span>
<code>&lt;iframe src="{{ base_url }}/embed/query/{{query.id}}/visualization/{{ vis.id }}?api_key={{query.api_key}}"<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
width="720" height="1650"&gt;&lt;/iframe&gt;</code>
</div>
</div>
</div> </div>
</div> </div>
@ -254,15 +246,7 @@
<visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer> <visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
<div class="row"> <div class="row">
<div class="col-lg-8 embed-code"> <embed-code visualization="vis" query="query"/>
<i class="fa fa-code" ng-click="show_code = show_code==true ? false : true;"></i>
<div ng-show="show_code">
<span class="text-muted">Embed code for this chart: <small>(height should be adjusted)</small></span>
<code>&lt;iframe src="{{ base_url }}/embed/query/{{query.id}}/visualization/{{ vis.id }}?api_key={{query.api_key}}"<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
width="720" height="391"&gt;&lt;/iframe&gt;</code>
</div>
</div>
</div> </div>
<edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="canEdit"></edit-visulatization-form> <edit-visulatization-form visualization="vis" query="query" query-result="queryResult" ng-show="canEdit"></edit-visulatization-form>