Skip to content

Instantly share code, notes, and snippets.

@klimisa

klimisa/index.html

Created June 26, 2017 07:21
Show Gist options
  • Save klimisa/d93f58df81c129bdbd1437155f9d52de to your computer and use it in GitHub Desktop.
Save klimisa/d93f58df81c129bdbd1437155f9d52de to your computer and use it in GitHub Desktop.
Download ZIP
Discogs Discogs Listings // source http://jsbin.com/qidagir
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Discogs Listings">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Discogs</title>
<style type="text/css">
.listItem {
background-color: #ccc;
font-size: large;
border: 1px solid red;
}
.listItem:hover {
border: 1px solid black;
background-color: #666;
}
.listItem .price {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- User -->
<p id="discogsUserVue_s">Discogs User Id. {{ user.id }}</p>
<hr />
<!-- Pagination -->
<ul id="discogspaginationVue_l">
<li>Total Items {{ paging.items }}</li>
<li>Total Page {{ paging.page }}</li>
<li v-if="paging.next"><a :href="paging.next">Next</a></li>
<li v-if="paging.last"><a :href="paging.last">Last</a></li>
<li v-if="paging.first"><a :href="paging.first">First</a></li>
<li v-if="paging.prev"><a :href="paging.prev">Prev</a></li>
</ul>
<hr />
<!-- Inventory -->
<div id="discogsInventoryVue_l">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody v-for="list in inventory">
<tr>
<td>{{ list.id }}</td>
<td>{{ list.release.description }}</td>
<td>{{ list.original_price.formatted }}</td>
</tr>
<table>
</div>
<hr />
<ol>
<li>Resources</li>
<li><a href="https://api.discogs.com/users/Dj-Records./inventory">API</a></li>
<li><a href="https://api.discogs.com/users/Dj-Records." target="_blank">API</a></li>
</ol>
<script src="https://unpkg.com/vue"></script>
<script id="jsbin-javascript">
//resorsce url's
var searchUrl = window.location.search.split('?loadPage=').pop();
loadUserProfileData();
loadInventoryData(searchUrl);
///vueFunctions
function loadUserProfileData(loadUser) {
var discogsUserUrl = 'https://api.discogs.com/users/Dj-Records.';
if (loadUser) {
discogsUserUrl = 'https://api.discogs.com/users/' + loadUrl;
}
// User
var discogsUserVue = new Vue({
el: '#discogsUserVue_s',
data: {
user: []
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsUserUrl)
xhr.onload = function () {
self.user = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})
}
// Inventory
function loadInventoryData(loadUrl) {
var discogsInventoryUrl = 'https://api.discogs.com/users/Dj-Records./inventory';
if (loadUrl) {
discogsInventoryUrl = loadUrl;
}
var discogsInventoryVue = new Vue({
el: '#discogsInventoryVue_l',
data: {
inventory: null
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
self.inventory = JSON.parse(xhr.responseText).listings
}
xhr.send()
}
}
})
var discogspaginationVue = new Vue({
el: '#discogspaginationVue_l',
data: {
paging: {
next: '',
last: '',
first: '',
prev: ''
}
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
var pagination = JSON.parse(xhr.responseText).pagination;
self.paging.next = pagination.urls.next ? pagination.urls.next : '';
self.paging.last = pagination.urls.last ? pagination.urls.last : '';
self.paging.first = pagination.urls.first ? pagination.urls.first : '';
self.paging.prev = pagination.urls.prev ? pagination.urls.prev : '';
}
xhr.send()
}
}
})
}
</script>
<script id="jsbin-source-javascript" type="text/javascript"> //resorsce url's
var searchUrl = window.location.search.split('?loadPage=').pop();
loadUserProfileData();
loadInventoryData(searchUrl);
///vueFunctions
function loadUserProfileData(loadUser) {
var discogsUserUrl = 'https://api.discogs.com/users/Dj-Records.';
if (loadUser) {
discogsUserUrl = 'https://api.discogs.com/users/' + loadUrl;
}
// User
var discogsUserVue = new Vue({
el: '#discogsUserVue_s',
data: {
user: []
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsUserUrl)
xhr.onload = function () {
self.user = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})
}
// Inventory
function loadInventoryData(loadUrl) {
var discogsInventoryUrl = 'https://api.discogs.com/users/Dj-Records./inventory';
if (loadUrl) {
discogsInventoryUrl = loadUrl;
}
var discogsInventoryVue = new Vue({
el: '#discogsInventoryVue_l',
data: {
inventory: null
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
self.inventory = JSON.parse(xhr.responseText).listings
}
xhr.send()
}
}
})
var discogspaginationVue = new Vue({
el: '#discogspaginationVue_l',
data: {
paging: {
next: '',
last: '',
first: '',
prev: ''
}
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
var pagination = JSON.parse(xhr.responseText).pagination;
self.paging.next = pagination.urls.next ? pagination.urls.next : '';
self.paging.last = pagination.urls.last ? pagination.urls.last : '';
self.paging.first = pagination.urls.first ? pagination.urls.first : '';
self.paging.prev = pagination.urls.prev ? pagination.urls.prev : '';
}
xhr.send()
}
}
})
}</script></body>
</html>
Raw
jsbin.qidagir.js
//resorsce url's
var searchUrl = window.location.search.split('?loadPage=').pop();
loadUserProfileData();
loadInventoryData(searchUrl);
///vueFunctions
function loadUserProfileData(loadUser) {
var discogsUserUrl = 'https://api.discogs.com/users/Dj-Records.';
if (loadUser) {
discogsUserUrl = 'https://api.discogs.com/users/' + loadUrl;
}
// User
var discogsUserVue = new Vue({
el: '#discogsUserVue_s',
data: {
user: []
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsUserUrl)
xhr.onload = function () {
self.user = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})
}
// Inventory
function loadInventoryData(loadUrl) {
var discogsInventoryUrl = 'https://api.discogs.com/users/Dj-Records./inventory';
if (loadUrl) {
discogsInventoryUrl = loadUrl;
}
var discogsInventoryVue = new Vue({
el: '#discogsInventoryVue_l',
data: {
inventory: null
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
self.inventory = JSON.parse(xhr.responseText).listings
}
xhr.send()
}
}
})
var discogspaginationVue = new Vue({
el: '#discogspaginationVue_l',
data: {
paging: {
next: '',
last: '',
first: '',
prev: ''
}
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', discogsInventoryUrl)
xhr.onload = function () {
var pagination = JSON.parse(xhr.responseText).pagination;
self.paging.next = pagination.urls.next ? pagination.urls.next : '';
self.paging.last = pagination.urls.last ? pagination.urls.last : '';
self.paging.first = pagination.urls.first ? pagination.urls.first : '';
self.paging.prev = pagination.urls.prev ? pagination.urls.prev : '';
}
xhr.send()
}
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment