-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
112 lines (99 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Track Suggestor</title>
<script src="js/lib/jquery-1.9.1.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body ng-app="track_suggestor">
<div ng-controller="suggestor">
<div ng-show="openSettings" style="display: flex; flex-direction: column; padding: 50px">
<div ng-show="errors[0]">
<h4>Messages</h4>
<h4 class="error-message" ng-bind="errors[0].msg"></h4>
</div>
<div style="flex-direction: row;" class="margin-top-30" title="Select MIDI port on which to receive Traktor data">
<h4>MIDI port</h4>
<select ng-class="{'success' : midi_connected}" ng-change="selectMIDIIn()" ng-model="selected_midi_input">
<option value="" disabled selected><Please select MIDI port></option>
<option ng-repeat="midi_input in midi_inputs" ng-value="midi_input">{{midi_input.name}}</option>
</select>
</div>
<h4 class="margin-top-40">Traktor collection</h4>
<div style="display:flex; flex-direction: row" title="Choose Traktor's 'collection.nml' file to import">
<input type="text" value="{{collection_nml}}" ng-click="ChooseCollectionNml()">
<button class="unicode-icon" ng-class="collection_loaded ? 'success' : 'error'" ng-click="ChooseCollectionNml()">📁</button>
</div>
<h4 class="margin-top-40">Recommendations playlists directory</h4>
<div style="display:flex; flex-direction: row" title="Chose a folder where to save the generated recommendation playlists">
<input type="text" value="{{recommendation_path}}" ng-click="ChooseRecommendationPath()">
<button class="unicode-icon" ng-class="recommendation_path ? 'success' : 'error'" ng-click="ChooseRecommendationPath()">📁</button>
</div>
<div style="flex-direction: row;" class="margin-top-30" title="Show only tracks rated higher or equal than selected rating">
<h4>Set minimum track rating</h4>
<select class="success" ng-change="setRating()" ng-model="minimum_track_rating">
<option value="0" selected><No Rating></option>
<option value="51" ng-selected="minimum_track_rating=='51'" >1 star</option>
<option value="102" ng-selected="minimum_track_rating=='102'">2 stars</option>
<option value="153" ng-selected="minimum_track_rating=='153'">3 stars</option>
<option value="204" ng-selected="minimum_track_rating=='204'">4 stars</option>
<option value="255" ng-selected="minimum_track_rating=='255'">5 stars</option>
</select>
</div>
<h4 class="margin-top-40">Filter tracks</h4>
<div style="display:flex; flex-direction: row" title="Filter tracks via regular expression">
<input type="text" value="{{track_filter}}" ng-model="track_filter" ng-change="saveFilter()">
</div>
<p class="filter-hint">e.g. LABEL=^My Label$;GENRE=^(?!HIDE_THIS).*$<br>These are two regular expressions concatenated by semicolon. Each one specifies a filter for a certain column. Currently only TRACK, ARTIST, GENRE,LABEL are supported. This examples would show only tracks with the label "My Label" and which do NOT have "HIDE_THIS" set as the genre.</p>
<button class="back-button margin-top-70" ng-click="openSettings=!openSettings">Back</button>
</div>
<div ng-hide="openSettings" style="padding: 0 15px">
<div class="deck-row">
<div class="deck">
<div style="flex-direction: row; display:flex">
<h4>Deck A</h4>
<div class="loader" ng-class="{'hidden':hideSpinnerA}"></div>
</div>
<input id="deck_A" type="text" class="deck-output" value="{{deck_A}}" placeholder="<EMPTY>" readonly="readonly" ng-class="getDeckColor('A')"/>
</div>
<div class="deck">
<div style="flex-direction: row; display:flex">
<h4>Deck B</h4>
<div class="loader" ng-class="{'hidden':hideSpinnerB}"></div>
</div>
<input id="deck_B" type="text" class="deck-output" value="{{deck_B}}" placeholder="<EMPTY>" readonly="readonly" ng-class="getDeckColor('B')"/>
</div>
</div>
<div class="donate">
<img ng-click="openDonateWindow()" alt="" src="images/btn_donateCC_LG.gif"/>
</div>
<div class="margin-15">
<div class="grid-container">
<div class="grid-header-row">
<div class="grid-header-item" style="flex-grow: 4;">Track</div>
<div class="grid-header-item" style="flex-grow: 4;">Artist</div>
<div class="grid-header-item" style="flex-grow: 3;">Genre</div>
<div class="grid-header-item" style="flex-grow: 1;">BPM</div>
<div class="grid-header-item" style="flex-grow: 1;">Key</div>
<div class="scrollbar-fill"></div>
</div>
<div class="scroll-container">
<div class="grid-row" ng-repeat="match in matching_tracks_arr" ng-class-even="'even-line'" ng-class-odd="'odd-line'">
<div class="grid-item" ng-class="{'source-deck':$first}" style="flex-grow: 4">{{match.track}}</div>
<div class="grid-item" ng-class="{'source-deck':$first}" style="flex-grow: 4">{{match.artist}}</div>
<div class="grid-item" ng-class="{'source-deck':$first}" style="flex-grow: 3">{{match.genre}}</div>
<div class="grid-item" ng-class="{'source-deck':$first}" style="flex-grow: 1">{{match.bpm}}</div>
<div class="grid-item" ng-class="{'source-deck':$first}" style="flex-grow: 1">{{match.key_notation}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
require('./js/renderer.js')
</script>
</body>
</html>