mirror of
https://github.com/marcel-dempers/docker-development-youtube-series.git
synced 2025-06-06 17:01:30 +00:00
96 lines
3.1 KiB
HTML
96 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="bootstrap.min.css">
|
|
<title>Video Catalog</title>
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
|
|
<article>
|
|
<div ng-app="videos" ng-controller="videosController" class="container">
|
|
<div class="row">
|
|
<div id="accordion">
|
|
|
|
<div id="{{ l.id }}" ng-repeat="l in playlist" class="card">
|
|
|
|
<div class="card-header" id="heading{{ l.id }}">
|
|
<h5 class="mb-0" style="text-align: center;">
|
|
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ l.id }}" aria-expanded="true"
|
|
aria-controls="collapse{{ l.id }}">
|
|
{{ l.name }}
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="collapse{{ l.id }}" class="collapse show" aria-labelledby="heading{{ l.id }}" data-parent="#accordion">
|
|
<div class="card-body">
|
|
|
|
<div class="row">
|
|
<div class="col card" ng-repeat="v in l.videos" style="width: 18rem;">
|
|
<img class="card-img-top" src="{{ v.imageurl }}" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ v.title }}</h5>
|
|
<p class="card-text">{{ v.description }}</p>
|
|
<a href="{{ v.url }}" class="btn btn-primary">Watch</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</article>
|
|
|
|
<hr />
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
|
|
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
|
|
|
|
<script>
|
|
|
|
var model = {
|
|
playlist: [],
|
|
};
|
|
|
|
var playlistApiUrl = "";
|
|
if (location.hostname == "localhost"){
|
|
playlistApiUrl = "http://localhost:81/"
|
|
} else {
|
|
playlistApiUrl = "http://" + location.hostname + "/api/playlists"
|
|
}
|
|
|
|
var app = angular.module('videos', []);
|
|
app.controller('videosController', function ($scope, $http) {
|
|
|
|
$http.get(playlistApiUrl)
|
|
.then(function (response) {
|
|
|
|
console.log(response);
|
|
//$scope.model = model;
|
|
for (i = 0; i < response.data.length; ++i) {
|
|
model.playlist.push(response.data[i]);
|
|
}
|
|
$scope.playlist = response.data;
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |