Skip to content

Instantly share code, notes, and snippets.

@wilm0x42

wilm0x42/example_8bit_vue.html

Created February 6, 2021 00:02
Show Gist options
  • Save wilm0x42/bc436c42f12c9ad8201f22af9ebfa40c to your computer and use it in GitHub Desktop.
Save wilm0x42/bc436c42f12c9ad8201f22af9ebfa40c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example_8bit_vue.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>8 Bit Music Theory Weeklies</title>
<link rel="stylesheet" href="/static/style.css" type="text/css" media="all">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<h1>
<img src="/static/banner.png" alt="8BIT MUSIC THEORY WEEKLIES" />
</h1>
<div id="content">
<div class="entries-container">
<h2 class="week-title">Week XYZ: Fill this in by hand!</h2><h3 class="week-subtitle">Month day&#x27;th 20XX - 1 entries</h3>
<table cellpadding='0' class='vote-controls'>
<tr>
<th>Entrant</th>
<th>Composition Title</th>
<th>PDF</th>
<th>MP3</th>
</tr>
<tr v-for="entry in entries">
<td>{{ entry.entrantName }}</td>
<td>{{ entry.entryName }}</td>
<td><button v-on:click="viewPDF(entry.pdfFilename)">View PDF</button></td>
<td><audio controls><source v-bind:src="entry.mp3Filename" type="audio/mpeg"><a v-bind:href="entry.mp3Filename">mp3 link</a></audio></td>
</tr>
</table>
</div>
<div class="pdf-container" id="pdf-container">
<div v-if="pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-welcome">
<div id="pdf-alt" class="pdf-alt">
<img width="100%" src="/static/kirb_phones.png" />
<h2>Welcome!<br>Select one of the entries on the left to view its score.</h2>
</div>
</div>
<object v-if="!pdfShowWelcome" id="pdf-viewer" class="pdf-viewer-live" v-bind:data="pdfViewingFilename" type="application/pdf">
<div id="pdf-alt" class="pdf-alt">
<img width="100%" src="/static/kirb_think.png">
<h2><a v-bind:href="pdfViewingFilename">Link to PDF (embedded viewer failed)</a></h2>
</div>
</object>
</div>
</div>
<script>
var app = new Vue({
el: '#content',
data: {
pdfShowWelcome: true,
pdfViewingFilename: "TODO: Make this a rickroll",
// I'm assuming it'd be normal to have the above data
// baked into the html file, and have some code to fetch
// the entry data below, if not have it injected into the
// file with str.replace() on the server
entries: [
{
"uuid": "667d0610-6a57-4a6c-9ee8-83840f5af167",
"pdfFilename": "Frosty_Star_Field.pdf",
"mp3Format": "mp3",
"mp3Filename": "Frosty_Star_Field.mp3",
"entryName": "Frosty Star Field",
"entrantName": "wilm0x42"
},
{
"uuid": "2d88c1cd-5140-4fa6-b99e-05659da76d6c",
"pdfFilename": "60Hz_Serenade.pdf",
"mp3Format": "mp3",
"mp3Filename": "60Hz_Serenade.mp3",
"entryName": "60Hz Serenade",
"entrantName": "wilm0x42"
}
]
},
methods: {
viewPDF: function(url) {
this.pdfShowWelcome = false
this.pdfViewingFilename = url
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment