;(function(burl) {
    var url = 'https://cdn.rawgit.com/anpylar/anpylar/1.1.3/anpylar.js'
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.async = true
    s.src = url
    var h = document.getElementsByTagName('head')[0]
    h.appendChild(s)
})();
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .app_module import AppModule
/* AppComponent's private CSS styles */
h1 {
  font-size: 1.2em;
  color: #999;
  margin-bottom: 0;
}
h2 {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<h1 {title}=title>{title}</h1>
<nav>
  <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
  <a routerLink="/pyroes" routerLinkActive="active">Pyroes</a>
</nav>
<router-outlet></router-outlet>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html


class AppComponent(Component):

    title = 'Tour of Pyroes'

    bindings = {
        'pyroes': [],
    }

    def __init__(self):
        self.pyro_service.get_pyroes().subscribe(self.pyroes_)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Module

from .app_component import AppComponent
from .app_routing import AppRouting
from .pyro_service import PyroService


class AppModule(Module):

    components = AppComponent

    bindings = {}

    services = {
        'pyro_service': PyroService,
    }

    routes = AppRouting

    def __init__(self):
        pass
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .dashboard import DashboardComponent
from .pyro_detail import PyroDetailComponent
from .pyroes import PyroesComponent


AppRouting = [
    {
        'path': '',
        'redirect_to': '/dashboard',
        'path_match': 'full'
    },
    {
        'path': 'dashboard',
        'component': DashboardComponent
    },
    {
        'path': 'pyroes',
        'component': PyroesComponent
    },
    {
        'path': 'detail',
        'component': PyroDetailComponent,
        'params': {'pyd': int},  # param transformation function
    },
]
#!/usr/bin/env python
# -*- coding: utf-8; py-indent-offset:4 -*-
###############################################################################
from .dashboard_component import DashboardComponent
/* DashboardComponent's private CSS styles */
[class*='col-'] {
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
a {
  text-decoration: none;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h3 {
  text-align: center; margin-bottom: 0;
}
h4 {
  position: relative;
}
.grid {
  margin: 0;
}
.col-1-4 {
  width: 25%;
}
.module {
  padding: 20px;
  text-align: center;
  color: #eee;
  max-height: 120px;
  min-width: 120px;
  background-color: #607D8B;
  border-radius: 2px;
}
.module:hover {
  background-color: #EEE;
  cursor: pointer;
  color: #607d8b;
}
.grid-pad {
  padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}
@media (max-width: 600px) {
  .module {
    font-size: 10px;
    max-height: 75px; }
}
@media (max-width: 1024px) {
  .grid {
    margin: 0;
  }
  .module {
    min-width: 60px;
  }
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<h3>Top Pyroes</h3>
<div class="grid grid-pad">
</div>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
#!/usr/bin/env python
# -*- coding: utf-8; py-indent-offset:4 -*-
###############################################################################
from anpylar import Component, html


class DashboardComponent(Component):

    def render(self, node):
        with node.select('div') as d:
            d._render(self.render_top_pyroes, self.pyroes_)

    def render_top_pyroes(self, pyroes):
        for p in pyroes[:4]:
            with html.a(Class='col-1-4',
                        routerlink=('/detail', {'pyd': p.pyd})):

                with html.div(Class='module pyro'):
                    html.h4('{name}')._fmt(name=p.name_)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyro import Pyro


Pyroes = [Pyro(**x) for x in [
    {'pyd': 11, 'name': 'Pyro Nakamura'},
    {'pyd': 12, 'name': 'Mopynder Shuresh'},
    {'pyd': 13, 'name': 'Pyter Pytrelli'},
    {'pyd': 14, 'name': 'Angela Pytrelli'},
    {'pyd': 15, 'name': 'Claire Pynnet'},
    {'pyd': 16, 'name': 'Noah Pynnet'},
    {'pyd': 17, 'name': 'Pysaac Mendez'},
    {'pyd': 18, 'name': 'Pyki Sanders'},
    {'pyd': 19, 'name': 'The Pytian'},
    {'pyd': 20, 'name': 'Pylar'}]
]
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyro_detail_component import PyroDetailComponent
/* PyroDetailComponent's private CSS styles */
label {
  display: inline-block;
  width: 3em;
  margin: .5em 0;
  color: #607D8B;
  font-weight: bold;
}
input {
  height: 2em;
  font-size: 1em;
  padding-left: .4em;
}
button {
  margin-top: 20px;
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer; cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #ccc;
  cursor: auto;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

/*
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
*/
<div *_display=pyro_.pyd_>
  <h2 {name}="pyro_.name_.map(lambda x: x.upper())">{name} Details</h2>
  <div><span>pyd: </span><txt [pyro_.pyd_]>{}</txt></div>
  <div>
      <label>name:
        <input *_fmtvalue=pyro_.name_ placeholder="name"/>
      </label>
  </div>
  <button (click)=router.back()>Go back</button>
</div>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html

from app.pyro import Pyro


class PyroDetailComponent(Component):
    bindings = {
        'pyro': Pyro(),
    }

    def loading(self):
        self.pyro_service \
            .get_pyro(self.params.get('pyd', 0)) \
            .subscribe(self.pyro_)  # fetch async and fire self.pyro_ when done

    def unloading(self):
        self.pyro = Pyro()  # clear the editor on unloading: set null Pyro

    def render(self, node):
        pass  # the entire work is done in the html rendering
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Observable

from .mock_pyroes import Pyroes


class PyroService:

    def get_pyroes(self):
        return Observable.of(Pyroes)

    def get_pyro(self, pyd):
        return Observable.from_(Pyroes).filter(lambda pyro: pyro.pyd == pyd)
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Model


class Pyro(Model):
    bindings = {
        'pyd': 0,
        'name': '',
    }
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from .pyroes_component import PyroesComponent
/* PyroesComponent's private CSS styles */
.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.pyroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.pyroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.pyroes li.selected:hover {
  background-color: #BBD8DC !important;
  color: white;
}
.pyroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.pyroes .text {
  position: relative;
  top: -3px;
}
.pyroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

/*
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
*/
<h2>My Pyroes</h2>
<ul class="pyroes">
</ul>

<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
###############################################################################
# Copyright 2018 The AnPyLar Team. All Rights Reserved.
# Use of this source code is governed by an MIT-style license that
# can be found in the LICENSE file at http://anpylar.com/mit-license
###############################################################################
from anpylar import Component, html


class PyroesComponent(Component):

    def render(self, node):
        # render under ul in render_pyroes when observable self.pyroes_ fires
        with node.select('ul') as ul:  # find node where to display the list
            ul._render(self.render_pyroes, self.pyroes_)

    def render_pyroes(self, pyroes):
        for pyro in pyroes:
            with html.li() as li:  # per-pyro list item
                # per-pyro anchor routing path with parameter pyd
                with html.a(routerlink=('/detail', {'pyd': pyro.pyd})):
                    html.span(pyro.pyd, Class='badge')  # show pyd as badge
                    html.txt(' {name}')._fmt(name=pyro.name_)  # obs name_
<!DOCTYPE html>
<html>
<head>
  <title>Tour of Pyroes</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="styles.css">
  <script src="anpylar_overlay.js"></script>
  <script src="anpylar.js"></script>

</head>
<body></body>
</html>

<!--
Copyright 2018 The AnPyLar Team
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://anpylar.com/mit-license
-->
{
    "packages": [
        "app"
    ],
    "app_name": "",
    "version": "",
    "author": "",
    "author_email": "",
    "license": "",
    "url": ""
}
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* Navigation link styles */
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}


/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
;(function(){
    function add_overlay() {

        var elem = document.createElement('div');
        elem.id = 'anpylar-loading-overlay'
        elem.style.cssText = 'position: fixed; width: 100%; height: 100%;' + 'min-height: 100%;' +
            'left: 0;top: 0;background: rgba(224,224,224,0.33); z-index: 100000;'
        document.body.appendChild(elem);

        var elem4 = document.createElement('div');
        elem4.innerHTML = '<h1 style="text-align:center;position:relative;top:46%;transform:translateY(-46%);">Loading ...</h1>'
        elem4.style.cssText = 'position: fixed; width: 100%; height: 100%;' +
            'left: 0;top: 0; z-index: 10002;'
        elem.appendChild(elem4)

        var keyframes = '\
#anpylar-loading-wheel {\
  position: fixed;\
  top: 50%;\
  left: 50%;\
  width: 150px;\
  height: 150px;\
  margin: -75px 0 0 -75px;\
  border: 16px solid #f3f3f3;\
  border-radius: 50%;\
  border-top: 16px solid #3498db;\
  width: 120px;\
  height: 120px;\
  animation: spin 2s linear infinite;\
  z-index: 10001;\
}\
\
@keyframes spin {\
  0% { transform: rotate(0deg); }\
  100% { transform: rotate(360deg); }\
}';

        var elem2 = document.createElement('style');
        elem2.style.type = 'text/css'
        elem2.id = 'anpylar-loading-overlay-style'
        elem2.innerHTML = keyframes
        document.head.appendChild(elem2)

        var elem3 = document.createElement('div')
        elem3.id = 'anpylar-loading-wheel'
        elem.appendChild(elem3)
    }
    window.addEventListener('DOMContentLoaded', add_overlay, true)
})();