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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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> <title>Cosmic Pi UI</title>
</head> </head>

2
ui/package.json
View file

@ -4,7 +4,7 @@
"description": "Web interface for Cosmic Pi", "description": "Web interface for Cosmic Pi",
"main": "webpack.config.js", "main": "webpack.config.js",
"scripts": { "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", "build": "webpack --progress --mode production",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },

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

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

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

@ -1,22 +1,28 @@
<template> <template>
<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box"> <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
<h3 class="text-center">Login</h3> <div class="card card-default">
<hr /> <div class="card-header">
<div v-if="!authFail" class="alert alert-warning" role="alert"> <h3>Login</h3>
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>
<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> </div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button> </div>
</form>
</div> </div>
</template> </template>

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

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

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

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

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

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

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

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