Added libs
This commit is contained in:
Lucas
259
lockbox/vue/components/tabs/TabProofOfWork.vue
Normal file
259
lockbox/vue/components/tabs/TabProofOfWork.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<script setup>
|
||||
import { TabPanel} from '@headlessui/vue'
|
||||
import { KeyIcon, BoltIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, ClipboardDocumentListIcon} from '@heroicons/vue/24/solid'
|
||||
|
||||
import Card from '@/components/cards/Card.vue';
|
||||
import CardHeader from '@/components/cards/CardHeader.vue';
|
||||
import CardTitle from '@/components/cards/CardTitle.vue';
|
||||
import CardDescription from '@/components/cards/CardDescription.vue';
|
||||
import CardContent from '@/components/cards/CardContent.vue';
|
||||
import Label from '@/components/labels/Label.vue';
|
||||
import InputText from '@/components/inputs/InputText.vue';
|
||||
import Button from '@/components/buttons/Button.vue';
|
||||
import CardFooter from '@/components/cards/CardFooter.vue';
|
||||
import { ref } from 'vue';
|
||||
import { getSocket } from '@/plugins/socketioManager'
|
||||
|
||||
import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
|
||||
|
||||
var socket = null
|
||||
const publicKey = ref("")
|
||||
const targetDifficulty = ref("4")
|
||||
|
||||
const lockboxServiceApiMineUrl = "/api/lockbox";
|
||||
const tasks = ref(null)
|
||||
|
||||
// TODO Create api file
|
||||
|
||||
function start_mining(){
|
||||
const data = {"public_key":publicKey.value, "force":targetDifficulty.value};
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
fetch(lockboxServiceApiMineUrl+"/start", requestOptions)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error
|
||||
|
||||
('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function list_tasks(){
|
||||
fetch(lockboxServiceApiMineUrl+"/list")
|
||||
.then(response => {
|
||||
if (!response.ok){
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
tasks.value = data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function pause_task(taskId){
|
||||
const data = {};
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
fetch(lockboxServiceApiMineUrl+"/pause/"+taskId, requestOptions)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error
|
||||
|
||||
('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function resume_task(taskId){
|
||||
const data = {};
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
fetch(lockboxServiceApiMineUrl+"/resume/"+taskId, requestOptions)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error
|
||||
|
||||
('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function cancel_task(taskId){
|
||||
const data = {};
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
|
||||
fetch(lockboxServiceApiMineUrl+"/cancel/"+taskId, requestOptions)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error
|
||||
|
||||
('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function onTaskUpdated(data){
|
||||
console.log(data)
|
||||
tasks.value[data.task_id] = data.result
|
||||
}
|
||||
|
||||
onActivated(async () => {
|
||||
list_tasks();
|
||||
|
||||
socket = await getSocket("lockbox_miner")
|
||||
socket.on('taskUpdated', onTaskUpdated);
|
||||
});
|
||||
|
||||
onDeactivated(()=>{
|
||||
socket.off('taskUpdated', onTaskUpdated);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TabPanel class=" space-y-5">
|
||||
<!-- Mining user -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<BoltIcon class="h-5 w-5" />
|
||||
Proof of Work
|
||||
</CardTitle>
|
||||
<CardDescription class="text-slate-200">
|
||||
Generate proof of work for a data
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div class="flex flex-row w-full space-x-5 items-center justify-center text-center">
|
||||
<div class="flex flex-col space-y-2 w-full">
|
||||
<Label forId="publicKey" class="text-slate-300">Data</Label>
|
||||
<div class="flex gap-2">
|
||||
<InputText id="publicKey" v-model="publicKey" placeholder="" class="border-gray-700 bg-slate-300 w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 w-full">
|
||||
<Label forId="targetDifficulty" class="text-slate-300">Target Difficulty (Leading Zeros)</Label>
|
||||
<div class="flex gap-2">
|
||||
<InputText id="targetDifficulty" v-model="targetDifficulty" placeholder="" class="border-gray-700 bg-slate-300 w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button @click="start_mining()" class="flex items-center gap-2 w-full">
|
||||
Start Mining
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<!-- Active jobs -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2 text-yellow-400">
|
||||
Active Jobs
|
||||
</CardTitle>
|
||||
<CardDescription class="text-slate-200">
|
||||
Monitor and control proof of work jobs
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="overflow-y-auto rounded-md p-4">
|
||||
<CardContent v-for="([taskId, task]) in Object.entries(tasks)" :key="taskId" class="border border-slate-300 rounded mb-2 pt-2">
|
||||
<div class="grid md:grid-cols-5 gap-4 items-center">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-sm text-gray-300 w-full">Data</p>
|
||||
<p class=" text-gray-300">{{task.data}}</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-sm text-gray-300 w-full">Difficulty</p>
|
||||
<p class=" text-gray-300">{{task.best_force}}/{{task.target_force}}</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-sm text-gray-300 w-full">Nonce</p>
|
||||
<p class=" text-gray-300">{{task.best_nonce}}</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-sm text-gray-300 w-full">Status</p>
|
||||
<p :class="{
|
||||
'text-yellow-400': task.status === 'paused',
|
||||
'text-blue-400': task.status === 'running',
|
||||
'text-green-400': task.status === 'completed',
|
||||
'text-red-400': task.status === 'cancelled',
|
||||
'text-gray-300': !['paused', 'running', 'completed', 'cancelled'].includes(task.status)
|
||||
}">
|
||||
{{ task.status }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row space-x-3 items-center mt-2">
|
||||
<div v-if="!['completed', 'cancelled', 'error'].includes(task.status)" class="space-x-3">
|
||||
<!-- TODO Change to Icons -->
|
||||
<Button v-if="['running'].includes(task.status)" @click="pause_task(taskId)">Pause</Button>
|
||||
<Button v-if="['paused'].includes(task.status)" @click="resume_task(taskId)">Play</Button>
|
||||
<Button @click="cancel_task(taskId)">Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</TabPanel>
|
||||
</template>
|
||||
Reference in New Issue
Block a user