pingu_98/cosmicpi-rpi_V1.5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize for mobile devices

Browse source
This commit is contained in:
Darko Lukic 2018-03-24 21:16:19 +01:00
parent bf840d5961
commit 599cf4375e
8 changed files with 83 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/index.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>Cosmic Pi UI</title>
</head>

2
ui/package.json
View file

@ -4,7 +4,7 @@
"description": "Web interface for Cosmic Pi",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"dev": "webpack-dev-server --open --mode development --disable-host-check --host 0.0.0.0",
"build": "webpack --progress --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},

9
ui/src/assets/css/main.css
View file

@ -108,13 +108,10 @@ hr {
#sidebar .hideable {
display: none;
}
}
.box {
border: 1px solid #ddd;
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
.card {
margin: 0 -25px;
}
}
.card-narrow {

38
ui/src/components/Login.vue
View file

@ -1,22 +1,28 @@
<template>
<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
<h3 class="text-center">Login</h3>
<hr />
<div v-if="!authFail" class="alert alert-warning" role="alert">
Login is required to access to settings
</div>
<div v-if="authFail" class="alert alert-danger" role="alert">
Username or password is not correct
</div>
<form @submit.prevent="onLoginSubmit">
<div class="form-group">
<input type="text" ref="username" value="cosmicpi" class="form-control" placeholder="Username">
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
<div class="card card-default">
<div class="card-header">
<h3>Login</h3>
</div>
<div class="form-group">
<input type="password" ref="password" value="MuonsFROMSp8ce" class="form-control" placeholder="Password">
<div class="card-body">
<div v-if="!authFail" class="alert alert-warning" role="alert">
Login is required to access to settings
</div>
<div v-if="authFail" class="alert alert-danger" role="alert">
Username or password is not correct
</div>
<form @submit.prevent="onLoginSubmit">
<div class="form-group">
<input type="text" ref="username" value="cosmicpi" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" ref="password" value="MuonsFROMSp8ce" class="form-control" placeholder="Password">
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</form>
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</form>
</div>
</div>
</template>

45
ui/src/components/Science.vue
View file

@ -1,26 +1,31 @@
<template>
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-12 box">
<h3>Export Data</h3>
<hr />
<div class="row">
<div class="form-group col">
<label for="fromDate">From date:</label>
<datetime @input="rangeUpdated" v-model="from" id="fromDate" type="datetime" input-class="form-control"></datetime>
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2">
<div class="card card-default">
<div class="card-header">
<h3>Export Data</h3>
</div>
<div class="form-group col">
<label for="toDate">To date:</label>
<datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
</div>
</div>
<div class="row">
<img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
<img ref="graph" style="width: 100%; height: 100%" />
</div>
<div class="row">
<div class="col">
<a href="#" target="_blank" ref="csvButton" class="btn btn-primary btn-block">Download CSV</a>
<div class="card-body">
<div class="row">
<div class="form-group col">
<label for="fromDate">From date:</label>
<datetime @input="rangeUpdated" v-model="from" id="fromDate" type="datetime" input-class="form-control"></datetime>
</div>
<div class="form-group col">
<label for="toDate">To date:</label>
<datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
</div>
</div>
<div class="row">
<img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
<img ref="graph" style="width: 100%; height: 100%" />
</div>
<div class="row">
<div class="col">
<a href="#" target="_blank" ref="csvButton" class="btn btn-primary btn-block">Download CSV</a>
</div>
</div>
</div>
</div>
</div>

4
ui/src/components/dashboard/Dashboard.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="row">
<div class="col-6">
<div class="col-sm-12 col-md-6">
<Histogram></Histogram>
</div>
<div class="col-6">
<div class="col-sm-12 col-md-6">
<Location :longitude=lastLongitude :latitude=lastLatitude></Location>
</div>
</div>

4
ui/src/components/dashboard/Histogram.vue
View file

@ -3,14 +3,14 @@
<div class="card-header">
<h5>Histogram</h5>
<div class="row">
<div class="col-10">
<div class="col-sm-9 col-md-10">
<p class="small">
Showing data in period {{from}} - {{to}} ({{period}}s),
<b>{{ numberOfEvents }}</b> events with
bin size <b>{{ binSize }}s</b>
</p>
</div>
<div class="col-2">
<div class="col-sm-3 col-md-2">
<input v-model="binSize" class="form-control" min="1" type="number"/>
</div>
</div>

57
ui/src/components/settings/Wifi.vue
View file

@ -1,27 +1,33 @@
<template>
<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
<h3 class="text-center">Wifi</h3>
<hr />
<div v-if="connected" class="alert alert-success">
Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
</div>
<div v-if="response" class="alert alert-warning">
{{ response }}
</div>
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
<div class="card card-default">
<div class="card-header">
<h3>Wifi</h3>
</div>
<form @submit.prevent="onFormSubmit">
<div class="form-group">
<label for="inputSSID">SSID:</label>
<select class="form-control" ref="ssid" id="inputSSID">
<option v-for="wifi in wifiList" :key="wifi" :value="wifi">{{ wifi }}</option>
</select>
<div class="card-body">
<div v-if="connected" class="alert alert-success">
Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
</div>
<div v-if="response" class="alert alert-warning">
{{ response }}
</div>
<form @submit.prevent="onFormSubmit">
<div class="form-group">
<label for="inputSSID">SSID:</label>
<select class="form-control" ref="ssid" id="inputSSID">
<option v-for="wifi in wifiList" :key="wifi" :value="wifi">{{ wifi }}</option>
</select>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" ref="pass" class="form-control" id="inputPassword">
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
</form>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" ref="pass" class="form-control" id="inputPassword">
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
</form>
</div>
</div>
</template>
@ -72,12 +78,3 @@ export default {
},
}
</script>
<style>
.box {
border: 1px solid #ddd;
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
}
</style>