Skip to content

Commit caa0ef6

Browse files
rodydavisrodydavis
committed
adding json import / export
1 parent 67f9479 commit caa0ef6

File tree

6 files changed

+154
-120
lines changed

6 files changed

+154
-120
lines changed

‎app/partials/spec-content-header.html

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,96 @@
11
<div class="content-header" ng-class="{editing: editing}">
22
<div class="header-actions-left">
33
<div class="spec-title">
4-
<a class="spec-title-link spec-group" href="/#/group/{{data.group}}" ng-hide="!data.group">{{data.group}}</a>
4+
<a
5+
class="spec-title-link spec-group"
6+
href="/#/group/{{data.group}}"
7+
ng-hide="!data.group"
8+
>{{data.group}}</a
9+
>
510
<span ng-hide="!data.group || !data.title">›</span>
6-
<a class="spec-title-link" href="/#/spec/{{data.id}}" ng-hide="!data.title">{{data.title}}</a>
11+
<a
12+
class="spec-title-link"
13+
href="/#/spec/{{data.id}}"
14+
ng-hide="!data.title"
15+
>{{data.title}}</a
16+
>
717
</div>
818
<div class="spec-subtitle" ng-hide="!spec.title">{{spec.title}}</div>
919
</div>
1020

1121
<div ng-if="!embedded" class="header-actions-right">
12-
<md-button class="header-action md-icon-button" aria-label="Delete" ng-show="editing" ng-click="deleteProject($event, data)">
22+
<md-button
23+
class="header-action md-icon-button"
24+
aria-label="Delete"
25+
ng-show="editing"
26+
ng-click="deleteProject($event, data)"
27+
>
1328
<md-icon md-svg-icon="img/ic_delete_grey600_48dp.svg"></md-icon>
1429
</md-button>
15-
<span id="js-action-settings" class="header-action icon-q_settings" ng-show="editing" ng-click="toggleConfig()"></span>
16-
<span id="js-action-save" class="header-action icon-q_visibility" ng-show="editing" ng-click="previewSpec()"></span>
30+
<span
31+
id="js-action-settings"
32+
class="header-action icon-q_settings"
33+
ng-show="editing"
34+
ng-click="toggleConfig()"
35+
></span>
36+
<md-button
37+
class="header-action md-icon-button"
38+
ng-show="editing"
39+
aria-label="Import Code"
40+
ng-click="importJson()"
41+
>
42+
<i class="material-icons">file_upload</i>
43+
</md-button>
44+
<span
45+
id="js-action-save"
46+
class="header-action icon-q_visibility"
47+
ng-show="editing"
48+
ng-click="previewSpec()"
49+
></span>
1750

18-
<md-button class="header-action md-icon-button" ng-hide="editing" aria-label="Export Code" ng-click="toggleCodePopup()">
51+
<md-button
52+
class="header-action md-icon-button"
53+
ng-hide="editing"
54+
aria-label="Export Code"
55+
ng-click="toggleCodePopup()"
56+
>
1957
<i class="material-icons">code</i>
2058
</md-button>
21-
<span id="js-action-edit" class="header-action icon-q_create" ng-hide="editing || !canEdit" ng-click="editSpec()"></span>
59+
<md-button
60+
class="header-action md-icon-button"
61+
ng-hide="editing"
62+
aria-label="Export Code"
63+
ng-click="exportJson()"
64+
>
65+
<i class="material-icons">file_download</i>
66+
</md-button>
67+
<span
68+
id="js-action-edit"
69+
class="header-action icon-q_create"
70+
ng-hide="editing || !canEdit"
71+
ng-click="editSpec()"
72+
></span>
2273

23-
<a class="header-action spec-title-link" href="/#/user/{{data.permissions.owner}}" ng-hide="!data.permissions.owner || editing || canEdit">{{data.permissions.owner}}</a>
74+
<a
75+
class="header-action spec-title-link"
76+
href="/#/user/{{data.permissions.owner}}"
77+
ng-hide="!data.permissions.owner || editing || canEdit"
78+
>{{data.permissions.owner}}</a
79+
>
2480
</div>
2581
</div>
2682

2783
<div ng-if="!embedded">
28-
<div class="popup settings-popup" ng-show="configuring" ng-include="'partials/spec-settings.html'"></div>
29-
<div class="popup easing-details-popup" ng-show="showingCode" ng-include="'partials/spec-code.html'"></div>
84+
<div
85+
class="popup settings-popup"
86+
ng-show="configuring"
87+
ng-include="'partials/spec-settings.html'"
88+
></div>
89+
<div
90+
class="popup easing-details-popup"
91+
ng-show="showingCode"
92+
ng-include="'partials/spec-code.html'"
93+
></div>
3094

3195
<div id="overlay" ng-show="overlay" ng-click="closeOverlay()"></div>
3296
</div>

‎app/partials/spec-settings.html

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<div class="popup-row">
33
<md-input-container>
44
<label>Group</label>
5-
<input ng-model="data.group"/>
5+
<input ng-model="data.group" />
66
</md-input-container>
77
<md-input-container>
88
<label>Direction title</label>
9-
<input ng-model="data.title">
9+
<input ng-model="data.title" />
1010
</md-input-container>
1111
<md-input-container>
1212
<label>Direction description</label>
@@ -15,32 +15,29 @@
1515
</div>
1616

1717
<div class="popup-row" ng-switch on="editing" ng-show="showMs">
18-
1918
<md-input-container ng-switch-when="true">
2019
<label>Duration (in ms)</label>
21-
<input type="number" ng-model="spec.duration">
20+
<input type="number" ng-model="spec.duration" />
2221
</md-input-container>
2322

2423
<span ng-switch-default class="popup-label">Duration (in ms)</span>
2524
<span ng-switch-default class="popup-input">{{spec.duration}}</span>
2625
</div>
2726

2827
<div class="popup-row" ng-switch on="editing" ng-show="showMs">
29-
3028
<md-input-container ng-switch-when="true">
3129
<label>Minor Divisions (in ms)</label>
32-
<input type="number" ng-model="spec.divisions.minor">
30+
<input type="number" ng-model="spec.divisions.minor" />
3331
</md-input-container>
3432

3533
<span ng-switch-default class="popup-label">Minor Divisions (in ms)</span>
3634
<span ng-switch-default class="popup-input">{{spec.divisions.minor}}</span>
3735
</div>
3836

3937
<div class="popup-row" ng-switch on="editing" ng-show="showMs">
40-
4138
<md-input-container ng-switch-when="true">
4239
<label>Major Divisions (in ms)</label>
43-
<input type="number" ng-model="spec.divisions.major">
40+
<input type="number" ng-model="spec.divisions.major" />
4441
</md-input-container>
4542

4643
<span ng-switch-default class="popup-label">Major Divisions (in ms)</span>
@@ -50,7 +47,7 @@
5047
<div class="popup-row" ng-switch on="editing">
5148
<md-input-container ng-switch-when="true">
5249
<label>Duration (in frames)</label>
53-
<input type="number" ng-model="spec.frames">
50+
<input type="number" ng-model="spec.frames" />
5451
</md-input-container>
5552

5653
<span ng-switch-default class="popup-label">Duration (in frames)</span>
@@ -60,21 +57,29 @@
6057
<div class="popup-row" ng-switch on="editing">
6158
<md-input-container ng-switch-when="true">
6259
<label>Minor Divisions (in frames)</label>
63-
<input type="number" ng-model="spec.divisions.minorFrames">
60+
<input type="number" ng-model="spec.divisions.minorFrames" />
6461
</md-input-container>
6562

66-
<span ng-switch-default class="popup-label">Minor Divisions (in frames)</span>
67-
<span ng-switch-default class="popup-input">{{spec.divisions.minorFrames}}</span>
63+
<span ng-switch-default class="popup-label"
64+
>Minor Divisions (in frames)</span
65+
>
66+
<span ng-switch-default class="popup-input"
67+
>{{spec.divisions.minorFrames}}</span
68+
>
6869
</div>
6970

7071
<div class="popup-row" ng-switch on="editing">
7172
<md-input-container ng-switch-when="true">
7273
<label>Major Divisions (in frames)</label>
73-
<input type="number" ng-model="spec.divisions.majorFrames">
74+
<input type="number" ng-model="spec.divisions.majorFrames" />
7475
</md-input-container>
7576

76-
<span ng-switch-default class="popup-label">Major Divisions (in frames)</span>
77-
<span ng-switch-default class="popup-input">{{spec.divisions.majorFrames}}</span>
77+
<span ng-switch-default class="popup-label"
78+
>Major Divisions (in frames)</span
79+
>
80+
<span ng-switch-default class="popup-input"
81+
>{{spec.divisions.majorFrames}}</span
82+
>
7883
</div>
7984

8085
<div class="popup-row" ng-switch on="editing">
@@ -89,8 +94,6 @@
8994
</div>
9095

9196
<div class="popup-row">
92-
<md-checkbox ng-model="spec.exactTiming">
93-
Show exact timings
94-
</md-checkbox>
97+
<md-checkbox ng-model="spec.exactTiming"> Show exact timings </md-checkbox>
9598
</div>
9699
</div>

‎app/partials/spec.html

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,31 @@
11
<header ng-if="!embedded" ng-include="'partials/spec-header.html'"></header>
22

33
<main role="main" class="tab-container" ng-class="{embed: embedded}">
4-
5-
<span class="header-action icon-q_menu" ng-if="!embedded" ng-click="showSidebar()"></span>
6-
<md-button class="header-action md-icon-button embed-details-icon" ng-if="!embedded" aria-label="Embed details" ng-click="toggleEmbedPopup()">
7-
<i class="material-icons">open_in_new</i>
8-
</md-button>
4+
<span
5+
class="header-action icon-q_menu"
6+
ng-if="!embedded"
7+
ng-click="showSidebar()"
8+
></span>
9+
<div layout="row" class="embed-details-icon">
10+
<md-button
11+
class="header-action md-icon-button"
12+
ng-if="!embedded"
13+
aria-label="Embed details"
14+
ng-click="toggleEmbedPopup()"
15+
>
16+
<i class="material-icons">open_in_new</i>
17+
</md-button>
18+
</div>
919

1020
<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
1121
<div ng-repeat="specId in multispec">
1222
<div class="spec-tab-ctrl-wrap" ng-controller="specTabCtrl">
1323
<md-tab label="{{data.title}}">
14-
<div class="tab-content" ng-include="'partials/spec-content.html'" ng-if="spec"></div>
24+
<div
25+
class="tab-content"
26+
ng-include="'partials/spec-content.html'"
27+
ng-if="spec"
28+
></div>
1529
</md-tab>
1630
</div>
1731
</div>

‎app/ts/specCtrl.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ app.controller('specCtrl', function ($scope, $routeParams, $sce, $location) {
7979

8080
// Helpers
8181
$scope.deleteProject = function (ev, data) {
82-
$scope.$parent.deleteProject(ev, data, function () {
82+
$scope.$parent.deleteProject(ev, data, () => {
8383
if ($scope.multispec.length > 1) {
8484
var deletedIdx = $scope.multispec.indexOf(data.id.toString());
8585
if (deletedIdx > -1) {
@@ -171,3 +171,4 @@ app.controller('specCtrl', function ($scope, $routeParams, $sce, $location) {
171171
},
172172
];
173173
});
174+

‎app/ts/specTabCtrl.ts

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import { app } from './app.js';
15+
import {app} from './app.js';
1616

1717
app.controller(
1818
'specTabCtrl',
@@ -99,7 +99,7 @@ app.controller(
9999

100100
// Initial Data Setup
101101
if ($scope.specId) {
102-
Spec.get({ id: $scope.specId }, function (data) {
102+
Spec.get({id: $scope.specId}, function (data) {
103103
// TODO: Handle failure
104104

105105
console.log(data);
@@ -212,6 +212,41 @@ app.controller(
212212
$location.search('');
213213
};
214214

215+
$scope.importJson = function () {
216+
// Import Json
217+
console.log('importing json');
218+
// Import JSON file
219+
const input = document.createElement('input');
220+
input.type = 'file';
221+
input.accept = '.json';
222+
input.onchange = function (e) {
223+
const file = e.target.files[0];
224+
const reader = new FileReader();
225+
reader.onload = function (e) {
226+
const json = JSON.parse(e.target.result);
227+
$scope.data = json;
228+
$scope.spec = $scope.data.spec;
229+
$scope.refreshCanvas();
230+
};
231+
reader.readAsText(file);
232+
};
233+
input.click();
234+
input.remove();
235+
};
236+
237+
$scope.exportJson = function () {
238+
console.log('exporting json');
239+
// Export Json
240+
const spec = $scope.spec;
241+
const json = JSON.stringify(spec, null, 2);
242+
const blob = new Blob([json], {type: 'application/json'});
243+
const url = URL.createObjectURL(blob);
244+
const a = document.createElement('a');
245+
a.download = 'spec.json';
246+
a.href = url;
247+
a.click();
248+
};
249+
215250
$scope.toggleConfig = function () {
216251
$scope.configuring = !$scope.configuring;
217252
$scope.overlay = $scope.configuring;

0 commit comments

Comments
 (0)