diff --git a/client/src/components/Graph.vue b/client/src/components/Graph.vue index 7e98e0a..178d08d 100644 --- a/client/src/components/Graph.vue +++ b/client/src/components/Graph.vue @@ -6,6 +6,7 @@ import { defineComponent } from 'vue'; import { HasticPod, TimeRange } from "./hastic_pod"; import { getMetrics } from '../services/metrics.service'; +import { postSegment } from '../services/segments'; import { LineTimeSerie } from "@chartwerk/line-pod"; import _ from "lodash"; @@ -42,7 +43,12 @@ export default defineComponent({ // const startTime = endTime - 1000; // 1000 seconds // TODO: fill segmentArray from service var s = new SegmentArray(); - var pod = new HasticPod(document.getElementById('chart'), resolveData.bind(this), s); + var pod = new HasticPod( + document.getElementById('chart'), + resolveData.bind(this), + postSegment, + s + ); pod.render(); } }); diff --git a/client/src/components/hastic_pod/index.ts b/client/src/components/hastic_pod/index.ts index 3937232..4bfabfe 100644 --- a/client/src/components/hastic_pod/index.ts +++ b/client/src/components/hastic_pod/index.ts @@ -6,16 +6,20 @@ import { Segment, SegmentId } from "@/types/segment"; export type TimeRange = { from: number, to: number }; export type UpdateDataCallback = (range: TimeRange) => Promise; +export type UpdateSegmentCallback = (segment: Segment) => Promise; export class HasticPod extends LinePod { private _udc: UpdateDataCallback; + private _usc: UpdateSegmentCallback; + private _ctrlKeyIsDown: boolean; private _ctrlBrush: boolean; - - - constructor(el: HTMLElement, udc: UpdateDataCallback, private _segmentSet: SegmentsSet) { + constructor( + el: HTMLElement, udc: UpdateDataCallback, usc: UpdateSegmentCallback, + private _segmentSet: SegmentsSet + ) { super(el, undefined, { renderLegend: false, eventsCallbacks: { @@ -25,6 +29,7 @@ export class HasticPod extends LinePod { } }); + this._usc = usc; this._ctrlKeyIsDown = false; this._ctrlBrush = false; @@ -97,6 +102,7 @@ export class HasticPod extends LinePod { const startTimestamp = this.xScale.invert(extent[0]); const endTimestamp = this.xScale.invert(extent[1]); + this.addLabeling(startTimestamp, endTimestamp); } } @@ -104,9 +110,13 @@ export class HasticPod extends LinePod { protected addLabeling(from: number, to: number) { // TODO: implement // TODO: persistance of the label - const id = this.getNewTempSegmentId(); - const segment = new Segment(id, from, to); + // const id = this.getNewTempSegmentId(); + from = Math.floor(from); + to = Math.ceil(to); + + const segment = new Segment(undefined, from, to); this._segmentSet.addSegment(segment); + this._usc(segment); this.renderSegment(segment); } @@ -118,7 +128,6 @@ export class HasticPod extends LinePod { } protected renderSegment(segment: Segment) { - const x = this.xScale(segment.from); const y = 0; const w = this.xScale(segment.to) - x; @@ -152,7 +161,6 @@ export class HasticPod extends LinePod { console.log(m); } - // TODO: move to "controller" private _tempIdCounted = -1; public getNewTempSegmentId(): SegmentId { diff --git a/client/src/services/segments.ts b/client/src/services/segments.ts new file mode 100644 index 0000000..08bf122 --- /dev/null +++ b/client/src/services/segments.ts @@ -0,0 +1,27 @@ +import { API_URL } from "@/config"; +import { Segment, SegmentId } from "@/types/segment"; +import axios from 'axios'; + +import _ from 'lodash'; + +const SEGMENTS_API_URL = API_URL + "segments/"; + +export async function getSegments(from: number, to: number) { + if(from >= to) { + throw new Error("`from` can`t be less than `to`"); + } + + const uri = SEGMENTS_API_URL + `?from=${from}&to=${to}`; + const res = await axios.get(uri); + + const target = _.keys(res["data"]["data"])[0]; + const values = res["data"]["data"][target]; + return [target, values]; +} + +export async function postSegment(segment: Segment): Promise { + delete segment.id; // because we post a new segment + const resp = await axios.post(SEGMENTS_API_URL, segment); + console.log(resp); + return 10 + ""; +} diff --git a/client/src/types/segment.ts b/client/src/types/segment.ts index 82cc200..8a2664b 100644 --- a/client/src/types/segment.ts +++ b/client/src/types/segment.ts @@ -1,10 +1,10 @@ export type SegmentId = string; export class Segment { - constructor(private _id: SegmentId, public from: number, public to: number) { - if(this._id === undefined) { - throw new Error('id is undefined'); - } + constructor(private _id: SegmentId | undefined, public from: number, public to: number) { + // if(this._id === undefined) { + // throw new Error('id is undefined'); + // } if(isNaN(+from)) { throw new Error('from can`t be NaN'); } @@ -23,8 +23,8 @@ export class Segment { } expandDist(allDist: number, portion: number): Segment { - var p = Math.round(this.middle - allDist * portion / 2); - var q = Math.round(this.middle + allDist * portion / 2); + let p = Math.round(this.middle - allDist * portion / 2); + let q = Math.round(this.middle + allDist * portion / 2); p = Math.min(p, this.from); q = Math.max(q, this.to); return new Segment(this._id, p, q); diff --git a/server/src/services/data_service.rs b/server/src/services/data_service.rs index 4206926..5647092 100644 --- a/server/src/services/data_service.rs +++ b/server/src/services/data_service.rs @@ -7,8 +7,8 @@ use std::sync::{Arc, Mutex}; #[derive(Debug, Serialize, Deserialize)] pub struct Segment { pub id: Option, - pub start: u64, - pub end: u64, + pub from: u64, + pub to: u64, } // TODO: find a way to remove this unsafe @@ -39,7 +39,7 @@ impl DataService { // TODO: merge with other segments self.connection.lock().unwrap().execute( "INSERT INTO segment (start, end) VALUES (?1, ?2)", - params![segment.start, segment.end], + params![segment.from, segment.to], )?; Ok(10) } @@ -53,8 +53,8 @@ impl DataService { .query_map(params![from, to], |row| { Ok(Segment { id: row.get(0)?, - start: row.get(1)?, - end: row.get(2)?, + from: row.get(1)?, + to: row.get(2)?, }) })? .map(|e| e.unwrap())