Browse Source

Add simple front end

pull/1/head
Slixe 1 year ago
parent
commit
546020da12
12 changed files with 8490 additions and 0 deletions
  1. +29
    -0
      dero-benchmark-vue/README.md
  2. +5
    -0
      dero-benchmark-vue/babel.config.js
  3. +45
    -0
      dero-benchmark-vue/package.json
  4. BIN
      dero-benchmark-vue/public/favicon.ico
  5. +17
    -0
      dero-benchmark-vue/public/index.html
  6. +51
    -0
      dero-benchmark-vue/src/App.vue
  7. BIN
      dero-benchmark-vue/src/assets/logo.png
  8. +22
    -0
      dero-benchmark-vue/src/main.js
  9. +16
    -0
      dero-benchmark-vue/src/router.js
  10. +68
    -0
      dero-benchmark-vue/src/views/Index.vue
  11. +41
    -0
      dero-benchmark-vue/src/views/Submit.vue
  12. +8196
    -0
      dero-benchmark-vue/yarn.lock

+ 29
- 0
dero-benchmark-vue/README.md View File

@@ -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/).

+ 5
- 0
dero-benchmark-vue/babel.config.js View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

+ 45
- 0
dero-benchmark-vue/package.json View File

@@ -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"
]
}

BIN
dero-benchmark-vue/public/favicon.ico View File

Before After

+ 17
- 0
dero-benchmark-vue/public/index.html View File

@@ -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>

+ 51
- 0
dero-benchmark-vue/src/App.vue View File

@@ -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>

BIN
dero-benchmark-vue/src/assets/logo.png View File

Before After
Width: 200  |  Height: 200  |  Size: 6.7KB

+ 22
- 0
dero-benchmark-vue/src/main.js View File

@@ -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')

+ 16
- 0
dero-benchmark-vue/src/router.js View File

@@ -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
});

+ 68
- 0
dero-benchmark-vue/src/views/Index.vue View File

@@ -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>

+ 41
- 0
dero-benchmark-vue/src/views/Submit.vue View File

@@ -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>

+ 8196
- 0
dero-benchmark-vue/yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save