Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
154 lines (143 sloc) 6.12 KB
<!DOCTYPE html>
<html>
<head>
<title>Vuejs Demo</title>
<link rel="stylesheet" type="text/css"
href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.git-user-avatar {
width: 100px;
height: 100px;
}
.center{
text-align: center;
padding-top: 5px;
}
.space{
margin-top: 10px;
}
.git-stars{
color: goldenrodyellow;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header"><h1>Vuejs Demo</h1></div>
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h3>Select user</h3>
<select id="git-users" class="form-control" v-model="gituser">
<option value=""></option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="netflix">Netflix</option>
<option value="flipkart">Flipkart</option>
<option value="amzn">Amazon</option>
<option value="microsoft">Microsoft</option>
</select>
</div>
</div>
<div class="space"></div>
<div class="row" v-cloak>
<div class="col-md-offset-3 col-md-6">
<div class="alert alert-info center" v-if="!userSelected">
<i class="fa fa-exclamation-triangle"></i> Select a GitHub User
</div>
<div v-if="userSelected">
<div class="center" >
<div class="alert alert-info" v-if="loadingDetail">
<i class="fa fa-spinner fa-spin"></i> Loading Detail...
</div>
<div v-if="!loadingDetail">
<img :src="detail.avatar_url" class="git-user-avatar" />
<div class="space"></div>
Github User <a :href="detail.html_url">{{detail.login}}</a>
<div class="space"></div>
Name <a :href="detail.blog">{{detail.name}}</a>
<div v-if="isBio" class="space">
{{detail.bio}}
</div>
</div>
</div>
<div class="space"></div>
<div>
<div class="alert alert-info" v-if="loadingRepos">
<i class="fa fa-spinner fa-spin"></i> Loading Repos...
</div>
<ul class="list-group" v-if="!loadingRepos">
<li class="list-group-item" v-for="item in repos.items">
<span class="badge">
<i class="fa fa-star git-stars"></i> {{item.stargazers_count}}
</span>
<a :href="item.html_url">{{item.full_name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script type="text/html" id="loading-template">
</script>
<script type="text/html" id="git-user-detail-template">
</script>
<script type="text/html" id="git-user-repos-template">
</script> -->
<script type="text/javascript">
var vm;
$(function() {
vm = new Vue({
el: ".container",
data: {
gituser: "",
loadingDetail: false,
loadingRepos: false,
detail: {},
repos: {}
},
computed: {
userSelected: function(){
return this.gituser != '';
},
isBio: function(){
return this.detail.bio != ''
&& this.detail.bio != null;
}
},
watch:{
gituser: function(){
if ( this.gituser){
getUserDetail(this.gituser);
getMostStarredRepos(this.gituser);
}
}
}
});
});
function getUserDetail(username){
vm.loadingDetail = true;
$.getJSON('https://api.github.com/users/'+username, function(data){
vm.detail = data;
vm.loadingDetail = false;
});
}
function getMostStarredRepos(username){
vm.loadingRepos = true;
$.getJSON('https://api.github.com/search/repositories?q=user:'
+username+'&sort=stars&per_page=10', function(data){
vm.repos = data;
vm.loadingRepos = false;
});
}
</script>
</body>
</html>