bunch of functionlity

This commit is contained in:
Edin Dazdarevic
2015-05-28 13:44:14 +02:00
parent 02a556408c
commit e35f78a45b
25 changed files with 583 additions and 64 deletions

1
web/client/confighub.css Normal file
View File

@@ -0,0 +1 @@
/* CSS declarations go here */

View File

@@ -0,0 +1,8 @@
<head>
<title>confighub</title>
</head>
<body>
</body>

79
web/client/confighub.js Normal file
View File

@@ -0,0 +1,79 @@
// pages
// / => home
// /:machineName => machineDetails
// .
Machines = new Mongo.Collection("machines");
Router.route('/', function() {
this.render('Home')
});
Router.route('machine/:machineId', function() {
this.render('machinePage', {
data: function() {
return Machines.findOne({
machineId: this.params.machineId
});
}
});
});
Router.route('/machine/:machineId/config/:configId', function() {
this.render('configPage', {
data: function() {
var config = Machines.find({
"machineId": this.params.machineId,
"configurations._id": this.params.configId
}, {
'configurations.$': 1
});
var machine = Machines.findOne({machineId: this.params.machineId});
return {
machine: machine,
config: config
};
// return config;
}
});
});
// this.render('Post', {
// // we don't really need this since we set the data context for the
// // the entire layout above. But this demonstrates how you can set
// // a new data context for each specific region.
// data: function () { return Posts.findOne({_id: this.params._id})
// });
if (Meteor.isServer) {
Meteor.startup(function() {
// code to run on server at startup
// Global API configuration
Restivus.configure({
prettyJson: true
});
Restivus.addRoute('machines', {
authRequired: false
}, {
get: function() {
var allMaMachines = Machines.find({});
return {
data: allMaMachines
};
// var post = Posts.findOne(this.urlParams.id);
// if (post) {
// return {status: 'success', data: post};
// }
// return {
// statusCode: 404,
// body: {status: 'fail', message: 'Post not found'}
// };
}
});
});
}

View File

@@ -0,0 +1,22 @@
<template name='configPage'>
<div class='container'>
<div class='row'>
<h1>confighub.io</h1>
<div class='col-lg-12'>
<h2>
Configuration page for {{ machine.machineId}} {{ config.type }} {{ config.description }}
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{{> CodeMirror id="config-content" name="config-content" options=editorOptions code=editorCode reactiveVar="varName"}}
</div>
</div>
<div class="row">
<button class="save-config-details-btn">Save</button>
</div>
</div>
</template>

View File

@@ -0,0 +1,5 @@
Template.configPage.events({
"click .save-config-details-btn": function(event, template) {
console.log('should save config!!!');
}
})

View File

@@ -0,0 +1,21 @@
<template name='home'>
<div class='container'>
<div class='row'>
<h1>confighub.io</h1>
<div class='col-lg-12'>
<h2>
Your machines
</h2>
</div>
</div>
{{> machineList machines=machines}}
{{#unless newMachineRequested}}
<div class="row">
<div class='col-lg-12'>
<button type='button' class='add-new-machine-btn'>Add new machine</button>
</div>
</div>
{{/unless}} {{#if newMachineRequested}} {{> newMachine }} {{/if}}
</div>
</template>

View File

@@ -0,0 +1,85 @@
// var Machines = new Mongo.Collection("machines");
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
// counter starts at 0
// Session.setDefault('counter', 0);
Template.home.helpers({
machines: function() {
return Machines.find({});
},
newMachineRequested: function() {
return Session.get('newMachineRequested');
}
});
Template.home.events({
"click .add-new-machine-btn": function() {
Session.set('newMachineRequested', true);
}
});
// Template.hello.helpers({
// counter: function() {
// return Session.get('counter');
// }
// });
// Template.hello.events({
// 'click button': function() {
// // increment the counter when button is clicked
// Session.set('counter', Session.get('counter') + 1);
// }
// });
Template.newMachine.helpers({
// because the Session variable will most probably
// be undefined the first time
// return true;
newMachineAdded: function() {
return Session.get("newMachineJustAdded");
}
});
Template.newMachine.events({
"click .close-new-machine-btn": function() {
Session.set('newMachineJustAdded', false);
Session.set('newMachineRequested', false);
},
"submit .new-machine": function(event) {
event.preventDefault();
return false;
},
"click .new-machine-save-btn": function(event, template) {
// This function is called when the new task form is submitted
// console.log('saving!!!!!!');
// event.preventDefault();
// return false;
//
var text = template.find('.machine-name').value; //vent.target.machineName.value;
var machineId = guid();
Machines.insert({
name: text,
status: 'init pending',
configurations: [],
machineId: machineId,
createdAt: new Date() // current time
});
// Clear form
template.find('.machine-name').value = "";
Session.set('newMachineJustAdded', machineId);
// Prevent default form submit
return false;
}
});

View File

@@ -0,0 +1,27 @@
<template name='machinePage'>
<div class='container'>
<div class='row'>
<h1>confighub.io</h1>
<div class='col-lg-12'>
<h2>
Machine details: {{ name }}
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Machine status: {{status}}
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3>Configurations</h3>
{{> configurationList configurations=configurations machineId=machineId}}
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,20 @@
<template name='configurationList'>
<div class="row">
{{#each configurations}}
{{> configurationListItem}}
{{else}}
You don't have any configurations for this machine.
{{/each}}
</div>
{{#unless newConfigurationRequested}}
<div class="row">
<div class="col-lg-12">
<button class='add-new-config-btn'>Add new configuration</button>
</div>
</div>
{{/unless}}
{{#if newConfigurationRequested}}
{{> newConfigurationDialog machineId=machineId}}
{{/if}}
</template>

View File

@@ -0,0 +1,12 @@
Template.configurationList.events({
"click .add-new-config-btn": function(event, template) {
console.log('should add new configuration');
Session.set('newConfigurationRequested', true);
}
});
Template.configurationList.helpers({
newConfigurationRequested: function() {
return Session.get('newConfigurationRequested');
}
});

View File

@@ -0,0 +1,13 @@
<template name='configurationListItem'>
<div class="col-lg-4" style='text-align: center'>
<a href=/machine/{{machineId}}/config/{{_id}}>
<img src="http://gopherwarestudios.com/wp-content/uploads/2015/05/apache-icon.gif" alt="">
<div>
{{ type }}
</div>
<div>
{{ description }}
</div>
</a>
</div>
</template>

View File

@@ -0,0 +1,15 @@
<template name="machineDetails">
<div class="col-lg-4" style="text-align: center;">
<a href=machine/{{ machineId }}>
<img src='https://d13yacurqjgara.cloudfront.net/users/595800/screenshots/1702094/linux_1x.png' style="width: 200px; 130px;" />
<br />
<div style="text-align: center;" class="machine-name">
{{name}}
</div>
</a>
<div style="text-align: center;" class="machine-status">
status: {{status}}
</div>
</div>
</template>

View File

@@ -0,0 +1,5 @@
<template name='machineList'>
<div class="row">
{{#each machines}} {{> machineDetails}} {{/each}}
</div>
</template>

View File

@@ -0,0 +1,29 @@
<template name='newConfigurationDialog'>
<div class="row">
<div class="col-lg-3">
Configuration type
</div>
<div class="col-lg-3">
<select name="configurationTypes" class='config-type'>
<option value="apache">Apache</option>
<option value="nginx">Nginx</option>
<option value="elasticsearch">Elasticsearch</option>
<option value="unicorn">Unicorn</option>
<option value="passenger">Passenger</option>
<option value="hosts">HOSTS file</option>
</select>
</div>
<div class="colg-lg-3">
<input type="text" class='configuration-description form-control' placeholder="Description" />
</div>
<div class="col-lg-3">
<button class="save-config-btn">Save</button>
<button class="cancel-save-config-btn">Cancel</button>
</div>
</div>
</template>

View File

@@ -0,0 +1,36 @@
Template.newConfigurationDialog.events({
"click .save-config-btn": function(event, template) {
// console.log(template.data.machineId);
// var text = template.find('.machine-name').value; //vent.target.machineName.value;
var machine = Machines.findOne({
machineId: template.data.machineId
});
var configDescription = template.find('.configuration-description').value;
var configType = template.find('.config-type').value;
if (machine) {
Machines.update({
_id: machine._id
}, {
$push: {
configurations: {
machineId: machine.machineId,
_id: (new Mongo.ObjectID()).toHexString(),
description: configDescription,
type: configType
}
}
});
// db.students.update(
// { _id: 1 },
// { $push: { scores: 89 } }
// )
}
Session.set('newConfigurationRequested', false);
},
"click .cancel-save-config-btn": function(event, template) {
Session.set('newConfigurationRequested', false);
}
});

View File

@@ -0,0 +1,16 @@
<template name="newMachine">
<div class="row">
<div class="col-lg-12">
<h3>Add new machine</h3>
<form class="new-machine">
<input type="text" name="machineName" class='machine-name' placeholder="Machine Name" />
<button type='button' name='btnAddNewMachine' class='new-machine-save-btn'>Add new machine</button>
{{#if newMachineAdded}}
<div>You have successfully added a new machine. Please run <b>'chub init {{newMachineAdded}}'</b> on your computer. </div>
<button type='button' class='close-new-machine-btn'>Ok! Got It.</button>
{{/if}}
</form>
</div>
</div>
</template>