Menu
I'm trying to build a smart package for Meteor app that provides some monitoring capabilities and other tools based on the features of the smart package. For more details read this question.
In any case, I'm trying to figure out the best way to create an admin interface for this package, which will of course be itself running in Meteor. Ideally, I'd like something similar to observatory, except on a separate part of the site that the package can control (or even on a different port.)
The way the observatory folks have tackled this problem is pretty ingenious - they just have a popup div on the main app page that provides the necessary information. That's fine, but not the optimal way for revealing the interface on an app, in my opinion. The problem with using routes is that the popular Meteor router that everyone uses doesn't support more than one "stack" of pages, and better Meteor routers that have been developed (such as by Chris Mather in Devshop 5) haven't been released yet.
Can anyone suggest a good approach to tackle this problem? Ideally my package would just be able to render its own admin templates on a separate part of the site such as /admin.
984
As James Hatfield pointed out, Iron-Router now supports multiple layouts. For those hitting this thread now, this is the best way to handle the multiple layout scenario.
Router.map ->
@route 'home',
layoutTemplate: 'homeLayout'
path: '/'
@route 'dashboard',
layoutTemplate: 'dashboardLayout'
IronRouter supports multiple layouts.
https://github.com/EventedMind/iron-router
Router.configure({
layout: 'layout',
notFoundTemplate: 'notFound',
loadingTemplate: 'loading',
renderTemplates: {
/* render the templated named footer to the 'footer' yield */
'footer': { to: 'footer' },
/* render the template named sidebar to the 'sidebar' yield */
'header': { to: 'header' }
}
});
Router.map(function() {
this.route('admin', {
layout: 'admin_layout',
path: '/admin',
template: 'admin',
data: function() {
return { page : 'admin'}
},
onBeforeRun: checkLoggedIn,
renderTemplates: {
/* render the template named footer to the 'footer' yield */
'admin_footer': {to: 'footer'},
/* render the template named sidebar to the 'sidebar' yield */
'admin_login_header': {to: 'header'}
}
});
this.route('home', {
path: '/',
template: 'home',
data: function() {
return { page : 'home'}
}
});
<template name="layout">
//this is where your standard view layout goes
</template>
<template name="admin_layout">
//this is where your admin view layout goes
</template>
Could work pretty well if you match it up with Meteor accounts UserID checks and onBeforeRun hooks. I haven't fully tested the security aspect but it looks like it will work.
25
Please take a look at my project at github. I have a solution for this. It might not be the best, but it is working so far.
github.com/voteapp
<head>
<title>Index</title>
</head>
<body>
{{> root}}
</body>
root template is using some other templates inside. I may use 2 different index files. 1 for site and 1 for management panel.
root template:
<template name="root">
{{#if adminURL}}
{{> adminLogin}}
{{else}}
{{> site}}
{{/if}}
</template>
adminLogin template:
<template name="adminLogin">
{{#if currentUser}}
{{> management}}
{{else}}
admin login page.
<div style="float: right">
{{loginButtons align="right"}}
</div>
{{/if}}
</template>
management template:
<template name="management">
<div id="header" class="navbar">
....
</div>
<div id="container" class="row-fluid">
....
</div>
<link rel="stylesheet" href="/css/admin.css">
</template>
site template:
<template name="site">
<h1>Hello World!</h1>
<link rel="stylesheet" href="/css/site.css">
</template>
This is not actually html from my project but it is something like this. With this way, CSS links will appear at the end of body tag. And for admin panel and site itself will have different html structure and css files. Also you may want to add javasctipt files also.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
