Created
May 14, 2016 16:46
-
-
Save leemason/b3012798308147df15ab5df79437be44 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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&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