energylink/public/app/features/playlist/partials/playlist.html

<navbar model="ctrl.navModel"></navbar>

<div class="page-container" ng-form="playlistEditForm">
	<div class="page-header">
		<page-h1 model="ctrl.navModel"></page-h1>
	</div>

	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>

	<div class="gf-form-group">
		<div class="gf-form">
			<span class="gf-form-label width-7">Name</span>
			<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21">
		</div>
		<div class="gf-form">
			<span class="gf-form-label width-7">Interval</span>
			<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21">
		</div>
	</div>

	<div class="gf-form-group">
		<h3 class="page-headering">Dashboards</h3>
	</div>

	<div class="row">
		<div class="col-lg-6">
			<div class="playlist-search-containerwrapper">
				<div class="max-width-32">
					<h5 class="page-headering playlist-column-header">Available</h5>
					<div style="">
						<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
					</div>
				</div>
			</div>

			<div ng-if="ctrl.filteredDashboards.length > 0">
				<table class="grafana-options-table playlist-available-list">
					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
						<td>
							<i class="icon-gf icon-gf-dashboard"></i>
							&nbsp;&nbsp;{{playlistItem.title}}
							<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
						</td>
						<td class="add-dashboard">
							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
								<i class="fa fa-plus"></i>
								Add to playlist
							</button>
						</td>
					</tr>
				</table>
			</div>
			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
				<table class="grafana-options-table playlist-available-list">
					<tr ng-repeat="tag in ctrl.filteredTags">
						<td>
							<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
								<i class="fa fa-tag"></i>
								<span>{{tag.term}} &nbsp;({{tag.count}})</span>
							</a>
						</td>
						<td class="add-dashboard">
							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
								<i class="fa fa-plus"></i>
								Add to playlist
							</button>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="col-lg-6">
			<h5 class="page headering playlist-column-header">Selected</h5>
			<table class="grafana-options-table playlist-available-list">
				<tr ng-repeat="playlistItem in ctrl.playlistItems">
					<td ng-if="playlistItem.type === 'dashboard_by_id'">
						<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
					</td>
					<td ng-if="playlistItem.type === 'dashboard_by_tag'">
						<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
							<i class="fa fa-tag"></i>
							<span>{{playlistItem.title}}</span>
						</a>
					</td>

					<td class="selected-playlistitem-settings">
						<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
							<i class="fa fa-arrow-up"></i>
						</button>
						<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
							<i class="fa fa-arrow-down"></i>
						</button>
						<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
							<i class="fa fa-remove"></i>
						</button>
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="clearfix"></div>

	<div class="gf-form-button-row">
		<a class="btn btn-success " ng-show="ctrl.isNew()"
			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a>
		<a class="btn btn-success" ng-show="!ctrl.isNew()"
			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
	</div>
</div>