Skip to content

Instantly share code, notes, and snippets.

@leemason
Created May 14, 2016 16:46
Show Gist options
  • Save leemason/b3012798308147df15ab5df79437be44 to your computer and use it in GitHub Desktop.
Save leemason/b3012798308147df15ab5df79437be44 to your computer and use it in GitHub Desktop.
@extends('layout')
@section('title', $title)
@section('content')
<div id="domain" style="margin-top:20px;width: 100%;">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand" :style="{ backgroundImage: 'url(' + domain.screenshot + ')' }">
<h2 class="mdl-card__title-text">@{{ domain.host }}</h2>
</div>
<div class="mdl-card__supporting-text">
inner details
</div>
</div>
<div id="loading" v-show="loading">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
</div>
<div id="domain-toast" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
@endsection
@section('scripts')
<script>
(function(){
window.addEventListener('load', function() {
'use strict';
var snackbarContainer = document.getElementById('domain-toast');
Vue.http.headers.common['Authorization'] = 'Bearer {{ $user->api_token }}';
var Domain = new Vue({
el: '#domain',
data: {
domain: {
host: '',
screenshot: ''
},
domainChannel: null
},
ready: function(){
//fetch domains
this.$http.get('/api/v1/domains/{{ $domain }}').then(function (response) {
this.domain = response.data.domain;
this.domainChannel = window.poly.subscribe(this.domain.host);
console.log(this.domainChannel);
this.domainChannel.on('App\\Events\\Domains\\ScreenshotUpdated', function(data){
this.domain.screenshot = data.domain.screenshot;
}.bind(this));
this.loading = false;
}, function (response) {
if (response.status == 404) {
//we have no domain!
var data = {message: 'We encountered a technical problem performing this request, please contact the aministrator.', timeout: 3000};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
}else{
//something bad happened
var data = {message: 'We encountered a technical problem performing this request, please contact the aministrator.', timeout: 3000};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
}
//hide the loader, they can try again
this.loading = false;
});
},
methods: {
}
});
});
})();
</script>
@endsection
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<!-- Add to homescreen for Chrome on Android -->
<!--<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">-->
<!-- Add to homescreen for Safari on iOS -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">-->
<!-- Tile icon for Win8 (144x144 + tile color) -->
<!--<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">-->
<link rel="shortcut icon" href="favicon.ico">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ url('css/app.css') }}">
</head>
<body>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid app-content">
@yield('content')
</div>
</main>
<script src="{{ url('js/vendor/material.min.js') }}"></script>
<script src="{{ url('js/vendor/vue.min.js') }}"></script>
<script src="{{ url('js/vendor/vue-resource.min.js') }}"></script>
<script src="{{ url('vendor/polycast/polycast.min.js') }}"></script>
<script>
(function() {
// create the connection - we are using window here just for demo purposes,
// there are better ways to manage variables
window.poly = new Polycast('{{ url("/polycast") }}', {
token: '{{ csrf_token() }}',
polling: 2
});
}());
</script>
@yield('scripts')
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment