ui issue for herbivore

surya’s been helping me wrap my brain around vue/vuex so i can do more coding work on herbivore. i filed what i thought would be an easy issue in order to get started:

in my head, i was like, “oh, change the css :hover styling and call it a day.” did not take me long to discover that: no. u see, we’re changing the ui dynamically based on information we’re getting from the network. vue and vuex let you manage all this information by setting the starting state and then defining stuff you want to happen based on new information you get (with getters), actions you do, and mutations that occur to the state based on those actions. what follows is a walk-through of my process, written in present tense even though it’s already done because tense is confusing sometimes. here we go.

what i want to do is: based on which node’s mac address matches my own mac address, change styling to show who i am in relation to other nodes.

i start with the Network.vue file, the vue component that defines what table values you see when you use the network tool. this, reasonably, lives in the app’s ‘components’ folder. we already have some styling here that says “if the node is active, style it with a blue background and white text.” i use the same logic to say “if the node is the homeNode (me), style it with black background and white text.”

gotta add the css to correspond to the .homeNode class i just created:

cool! but none of this is connected to anything. how do i trigger node.homeNode to be true and therefore highlighted black? i have to register the change in state from not-homeNode to homeNode. to do this, we have to make the homeNode property part of the initial state. this happens in a file called network-info.js, inside the ‘store’ part of the app (as opposed to the ‘components’ part of the app where Network.vue lives). the ‘store’ is where you say “this is the default behavior of these properties; any changes to that default have to be committed and updated as needed.” okay, so the initial state of homeNode, within network-info.js:

in order to get the state of the particular homeNode property, we create a getter:

then we say “the action you can do to change the homeNode property is: set it with a function we’re naming ‘setHomeNode’. you commit this change to the state object based on the function we pass in.” in this case, the function is called SET_HOME_NODE. this is the mutation function and it’s defined further down the page, in the ‘mutations’ section.

the mutation that happens upon acting on homeNode is defined in the ‘mutations’ section:

it says:

  1. for each of the nodes listed in the state’s ‘nodes’ array,
  2. if the mac address is equal to mac address you pass in,
    1. then, the node you passed in is the homeNode!
    2. and the homeNode’s state is no longer null (which is how it was defined in the original state object).
  3. otherwise,
    1. the node you passed in is not the homeNode.

cool! one more tricky thing and then we’re done.

part of initializing the network info in the mutation ‘UPDATE_NETWORK_INFO’ is defining some properties of the router’s state and the user’s (my) device’s state. in that mutation, we have to add homeNode as a property and set it to ‘true’:

woohoo! now, when we’re in network view, my device in the table view has different styling from other devices:

next, gotta style the home device icon to match…

shoutout: these vue.js tutorials were non-trivial in getting this tiny but important change implemented.


Leave a Reply