0

I'm trying to make a simple log viewer for a personal project.

Basically I have a log file that looks like this:

D16,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D17,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D18,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D19,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D20,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D21,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D22,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D23,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976
D24,2020-10-11T17:13:00.507897,2020-10-11T17:13:00.701859,0:00:00.193976

The first thing is the ID such as D16, D17.

So when you load a log file it creates a object that looks like this:

{
  D15: [array of information],
  D16: [array of information],
  D17: [array of information],
}

And in the UI you see this: ID viewer in ui

The ids are draggable and are meant to be dragged in to a container that looks like this:

enter image description here

And on release of the id it should show the information from the object I created earlier.

What I have working now is when on release I can get the ID and which element it was dropped on.

I don't know how I would add the information to this element.

My functions:

StartDrag:

startDrag(evt, id){
  evt.dataTransfer.dropEffect = 'move'
  evt.dataTransfer.effectAllowed = 'move'
  evt.dataTransfer.setData('logId', id)
},

onDrop:

onDrop(evt) {
  const logId = evt.dataTransfer.getData('logId')
  console.log(evt.srcElement.classList.add(logId))
  console.log(logId)
},

enter image description here

isherwood
  • 58,414
  • 16
  • 114
  • 157
bappobrad
  • 21
  • 3
  • on drop, just access the log object like this `logObject[ID]` and it will give you the value for that key (id), which then you can simply print. – vsync Oct 15 '20 at 15:43
  • https://stackoverflow.com/q/5000953/104380 – vsync Oct 15 '20 at 15:45
  • Yes but I need to show the information from `logObject[ID]` in the container. – bappobrad Oct 15 '20 at 15:47
  • so what is the actual question? how to place text inside a DOM node? you said you are working with VUE, don't you know how to work with vuejs data to load things dynamically in your template? – vsync Oct 15 '20 at 15:56
  • in your vuejs component simply create a state for which row index holds which id, and then when you actually render the list you would know how to match the content of each row (by index) to what data (by id/key), [see here the basics of vue](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists) – vsync Oct 15 '20 at 15:59
  • I want to do this : `
    {{ date.elapsedTime }}
    ` But I don't know how to get the `log` variable on the drop function.     – bappobrad Oct 15 '20 at 15:59
  • You are using vue, you need to work with the state and not call functions directly from one to another. the "drop" function should update the state, as i said before, and then the component will re-render, and since your `log` object (data) should be included in your component's state, you'll have access to it. just work with the state to create an index-based list of what should go where, and then vue will render it – vsync Oct 15 '20 at 16:02
  • I understand. I do return the logs object to the component. But I don't understand how the container would be selfaware of what ID was dropped in it. – bappobrad Oct 15 '20 at 16:09
  • the container is not aware, it is your vue component who is "aware" by updating the state (global/local) when `onDrop` is called. it depends on what scope that function is called, relative to your list component. there are a few possibilities to solve it, depending on your project. do you know how `vuex` works? do you know how to work with a store? I think you should watch some vue tutorials and get a firmer base on the fundamentals of state-manegement – vsync Oct 15 '20 at 16:14
  • I figured it out, I just had to eat dinner and regain energi. It was alot simpler than i thought. – bappobrad Oct 15 '20 at 17:54
  • I had the same thing now also. ate two pieces of pork with some nice cheese and was back in business. what did you eat? – vsync Oct 15 '20 at 19:53

0 Answers0