@@ -0,0 +1,29 @@ | |||
# dero-benchmark-vue | |||
## Project setup | |||
``` | |||
yarn install | |||
``` | |||
### Compiles and hot-reloads for development | |||
``` | |||
yarn run serve | |||
``` | |||
### Compiles and minifies for production | |||
``` | |||
yarn run build | |||
``` | |||
### Run your tests | |||
``` | |||
yarn run test | |||
``` | |||
### Lints and fixes files | |||
``` | |||
yarn run lint | |||
``` | |||
### Customize configuration | |||
See [Configuration Reference](https://cli.vuejs.org/config/). |
@@ -0,0 +1,5 @@ | |||
module.exports = { | |||
presets: [ | |||
'@vue/cli-plugin-babel/preset' | |||
] | |||
} |
@@ -0,0 +1,45 @@ | |||
{ | |||
"name": "dero-benchmark-vue", | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
"serve": "vue-cli-service serve", | |||
"build": "vue-cli-service build", | |||
"lint": "vue-cli-service lint" | |||
}, | |||
"dependencies": { | |||
"core-js": "^3.6.4", | |||
"material-design-icons": "^3.0.1", | |||
"material-design-icons-iconfont": "^5.0.1", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.1.6", | |||
"vuetify": "^2.2.16" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-babel": "^4.2.0", | |||
"@vue/cli-plugin-eslint": "^4.2.0", | |||
"@vue/cli-service": "^4.2.0", | |||
"babel-eslint": "^10.0.3", | |||
"eslint": "^6.7.2", | |||
"eslint-plugin-vue": "^6.1.2", | |||
"vue-template-compiler": "^2.6.11" | |||
}, | |||
"eslintConfig": { | |||
"root": true, | |||
"env": { | |||
"node": true | |||
}, | |||
"extends": [ | |||
"plugin:vue/essential", | |||
"eslint:recommended" | |||
], | |||
"parserOptions": { | |||
"parser": "babel-eslint" | |||
}, | |||
"rules": {} | |||
}, | |||
"browserslist": [ | |||
"> 1%", | |||
"last 2 versions" | |||
] | |||
} |
@@ -0,0 +1,17 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
<title>DERO Benchmarks</title> | |||
</head> | |||
<body> | |||
<noscript> | |||
<strong>We're sorry but DERO Benchmarks doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||
</noscript> | |||
<div id="app"></div> | |||
<!-- built files will be auto injected --> | |||
</body> | |||
</html> |
@@ -0,0 +1,51 @@ | |||
<template> | |||
<div id="app"> | |||
<v-app> | |||
<header class="header"> | |||
<h1>DERO BENCHMARKS</h1> | |||
</header> | |||
<v-content> | |||
<transition name="fade"> | |||
<router-view></router-view> | |||
</transition> | |||
</v-content> | |||
</v-app> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'App' | |||
} | |||
</script> | |||
<style> | |||
#app { | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
text-align: center; | |||
} | |||
.header { | |||
margin-top: 2%; | |||
} | |||
* { | |||
transition: background-color 200ms ease, color 150ms ease-in-out; | |||
} | |||
.fade-enter-active, | |||
.fade-leave-active { | |||
transition-property: opacity; | |||
transition-duration: 0.4s; | |||
} | |||
.fade-enter-active { | |||
transition-delay: 0.4s; | |||
} | |||
.fade-enter, | |||
.fade-leave-active { | |||
opacity: 0; | |||
} | |||
</style> |
@@ -0,0 +1,22 @@ | |||
import Vue from 'vue' | |||
import App from './App.vue' | |||
import Vuetify from 'vuetify' | |||
import router from './router' | |||
import 'vuetify/dist/vuetify.min.css' | |||
import 'material-design-icons-iconfont/dist/material-design-icons.css' | |||
Vue.config.productionTip = false | |||
Vue.use(Vuetify) | |||
new Vue({ | |||
render: h => h(App), | |||
router, | |||
vuetify: new Vuetify({ | |||
icons: { | |||
iconfont: 'md', | |||
}, | |||
theme: { | |||
dark: true, | |||
} | |||
}) | |||
}).$mount('#app') |
@@ -0,0 +1,16 @@ | |||
import VueRouter from 'vue-router' | |||
import Vue from 'vue' | |||
import Index from './views/Index.vue' | |||
import Sumbit from './views/Submit.vue' | |||
Vue.use(VueRouter) | |||
const routes = [ | |||
{ path: '/', component: Index }, | |||
{ path: '/submit', component: Sumbit } | |||
]; | |||
export default new VueRouter({ | |||
mode: 'history', | |||
routes | |||
}); |
@@ -0,0 +1,68 @@ | |||
<template> | |||
<div id="index"> | |||
<v-card class="bench" :loading="loading"> | |||
<v-card-title> | |||
<h2>Benchmarks</h2> | |||
<v-spacer></v-spacer> | |||
<v-text-field class="search" v-model="search" append-icon="magnify" label="Search" single-line hide-details></v-text-field> | |||
</v-card-title> | |||
<v-data-table :search="search" multi-sort :headers="headers" :items="benchmarks" :items-per-page="5" class="elevation-5"> | |||
<template v-slot:item.timestamp="{ item }"> | |||
<span>{{ new Date(item.timestamp).toLocaleDateString() }}</span> | |||
</template> | |||
</v-data-table> | |||
</v-card> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
loading: true, | |||
search: "", | |||
headers: [ | |||
{ | |||
text: "Vendor", | |||
align: "start", | |||
value: "vendor" | |||
}, | |||
{ | |||
text: "Model", | |||
value: "model" | |||
}, | |||
{ | |||
text: "Hashrate (h/s)", | |||
value: "hashrate" | |||
}, | |||
{ | |||
text: "Miner", | |||
value: "minerVersion" | |||
}, | |||
{ | |||
text: "Submitted On", | |||
value: "timestamp", | |||
class: "Date" | |||
}, | |||
{ | |||
text: "User", | |||
value: "owner" | |||
} | |||
], | |||
benchmarks: [] | |||
} | |||
}, | |||
mounted() { | |||
fetch("http://localhost:8081/api/benchmarks").then(result => result.json()).then(json => { | |||
this.benchmarks = json | |||
this.loading = false | |||
}) | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.bench { | |||
margin: 10%; | |||
} | |||
</style> |
@@ -0,0 +1,41 @@ | |||
<template> | |||
<div id="submit"> | |||
<v-card class="bench elevation-5"> | |||
<h2 class="bot">Submit new Benchmark</h2> | |||
<v-divider class="bot"></v-divider> | |||
<v-row align="center" justify="space-around"> | |||
<v-form> | |||
<v-text-field autocomplete="vendor" label="Vendor" required></v-text-field> | |||
<v-text-field autocomplete="model" label="Model" required></v-text-field> | |||
<v-text-field autocomplete="hashrate" label="Hashrate" required></v-text-field> | |||
<v-text-field autocomplete="miner" label="Miner" required></v-text-field> | |||
<v-text-field autocomplete="user" label="User" class="text-field" equired></v-text-field> | |||
<v-btn color="blue">Sumbit</v-btn> | |||
</v-form> | |||
</v-row> | |||
</v-card> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
} | |||
</script> | |||
<style scoped> | |||
.bot { | |||
margin-bottom: 5%; | |||
} | |||
.bench { | |||
padding: 2%; | |||
margin: auto; | |||
margin-top: 5%; | |||
margin-bottom: 5%; | |||
width: 30%; | |||
} | |||
.text-field { | |||
width: 100%; | |||
margin-bottom: 2%; | |||
} | |||
</style> |