Browse Source

better design for homepage

master
Will Webberley 4 years ago
parent
commit
da7b283520
4 changed files with 51 additions and 26 deletions
  1. 40
      src/home.vue
  2. 4
      src/instance.vue
  3. 22
      src/new.vue
  4. 11
      static/main.css

40
src/home.vue

@ -3,22 +3,37 @@
<h1>Welcome</h1>
<div class="row">
<div class="col s6">
<div class="col m6">
<p></strong>Choose a CENode instance to manage</strong> or <router-link to="/new">launch a new one</router-link>.</p>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">About</span>
<p>CENode Explorer is a web-based front-end for CENode. In particular it manages CENode instances running on the server.</p>
<p>It allows users to interact with the standard CENode APIs through a graphical interface, simply adding the ability to start and stop instances when required.</p>
</div>
<div class="card-action">
<a href="https://github.com/flyingsparx/CENode-explorer" target="_blank"><i class="fa fa-github"></i> View project</a>
<a href="http://cenode.io" target="_blank"><i class="fa fa-globe"></i> About CENode</a>
</div>
</div>
</div>
<div class="col s6">
<div class="col m6">
<div class="card-panel orange lighten-4" v-if="!servers || !servers.length"><i class="fa fa-exclamation-triangle"></i> Looks like there aren't any CENodes running yet. Get started by <router-link to="/new">launching a new instance</router-link>.</div>
<ul v-else class="collection">
<li class="collection-item avatar" v-for="server in servers">
<img src="/static/node.png" alt="" class="circle">
<span class="title">{{server.name}}</span>
<div class="card" v-for="server in servers">
<div class="card-content">
<span class="card-title">{{server.name}}</span>
<p>Running on port {{server.port}}</p>
<div class="chip">{{server.conceptCount}} concepts</div>
<div class="chip">{{server.instanceCount}} instances</div>
<router-link :to="{ name: 'node', params: { name: server.name }}" class="btn-flat white-text"><i class="fa fa-cogs"></i> Manage</router-link>
<button class="secondary-content btn-flat red-text" v-on:click="deleteServer(server)"><i class="fa fa-trash"></i> Stop</button>
</li>
</ul>
</div>
<div class="card-action">
<router-link :to="{ name: 'node', params: { name: server.name }}"><i class="fa fa-cogs"></i> Manage</router-link>
<a class="red-text text-darken-2" href="#" v-on:click="deleteServer(server)"><I class="fa fa-trash"></i> Stop</a>
</div>
</div>
</div>
</div>
</template>
@ -45,11 +60,8 @@
</script>
<style>
.collection .collection-item.avatar span.title{
font-size:20px;
}
.chip{
margin:10px 5px;
margin:10px 5px 0px 0px;
}
</style>

4
src/instance.vue

@ -11,7 +11,7 @@
<p v-if="!(instance.values && instance.values.length) && !(instance.relationships && instance.relationships.length)"><i>None</i></p>
<div v-for="value of instance.values" class="card teal lighten-4"><div class="card-content">
<strong>{{value.label}}</strong>:
<strong>{{value.label}}</strong>
<span v-if="value.targetId">
<span class="instance inline labelled">
<router-link :to="{name: 'instance', params: {name: server.name, id: value.targetId}}">{{value.targetName}}</router-link>
@ -19,7 +19,7 @@
</span>
</span>
</span>
<span v-else="value.targetName"><i>{{value.targetName}}</i></span>
<span v-else="value.targetName"><br><span class="raw">{{value.targetName}}</span></span>
</div></div>
<div v-for="relationship of instance.relationships" class="card teal lighten-4"><div class="card-content">

22
src/new.vue

@ -1,7 +1,7 @@
<template>
<div class="container">
<h2>Launch new CENode instance</h2>
<p>Specify an agent name and a port number to continue.</p>
<p>Specify an agent name and a port number.</p>
<div class="row">
<div class="col m6">
<div class="row">
@ -16,15 +16,17 @@
<label for="port">Port number (1024 - 65536)</label>
</div>
<p>Select CE models to bundle with the launch.<br><span class="amber-text text-lighten-2">You can always add more later.</span>
<p>
<input v-model="preloadedModels" value="core" type="checkbox" id="core_model">
<label for="core_model">Core</label>
</p>
<p>
<input v-model="preloadedModels" value="server" type="checkbox" id="server_model">
<label for="server_model">Server</label>
</p>
<div class="input-field col s12">
<p>Select CE models to bundle with the launch.</p>
<p>
<input v-model="preloadedModels" value="core" type="checkbox" id="core_model">
<label for="core_model">Core (recommended) - <small>includes the basics to get up-and running with cards, policies, and rules</small></label>
</p>
<p>
<input v-model="preloadedModels" value="server" type="checkbox" id="server_model">
<label for="server_model">Server - <small>adds extra policy information to enable the node to act as a relay for other nodes. <span class="amber-text">Requires the core model</span></small></label>
</p>
</div>
</div>

11
static/main.css

@ -46,3 +46,14 @@
margin:5px 0px 5px 8px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}
.raw{
display:block;
padding:6px 9px;
margin-top:5px;
box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);
background: white;
border-radius:8px;
color:rgb(100,100,100);
font-family: 'Courier New', 'Courier', 'Monospace';
}
Loading…
Cancel
Save