Notes From Week of May 14

From this week onward, I will be keeping notes for some of the issues I encountered during work or developing some of my personal works.

Here are notes from my development last week:

  • This might be a quite simple one, but I found it might be useful for future reference. In the development of TIA, previous developer used to disable the checkbox in a form. The result of this is the value of the disabled checkboxes were not submitted with the form. The previous developer opt to set the checkboxes separately which I don't believe is an ideal solution. I thereby found another solution as follows:

    1
    <input type="checkbox" class="readonly" checked="checked" onclick="javascript:return false" />

    However, this is not enough in my case, I also need to have it gray out to make it looks like disabled. It turned out that this can be solved via simple CSS:

    1
    2
    3
    4
    5
    input.readonly {
    opacity : .50;
    filter : alpha(opacity=50); /* IE<9 */
    cursor : default;
    }

    Just make sure to give the checkbox proper class name.

  • This week, I was also asked to generate data from InterCAD. What I used to do was to copy the result of the query from database to a MS Excel worksheet and done the work there. This is especially easy when when there are not a lot of data. This time around, there were 16 days worth of data that I need to do statistics on. So, I decided to create a Bash script to do this task. The bash script is listed as follows, it is a pretty easy one and can be improved in the future:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    COUNTER=1
    TYPE=ACCIDENT
    while [ $COUNTER -lt 17 ]; do
    if [ $COUNTER -lt 10 ]
    then
    d='2017-05-0'
    else
    d='2017-05-'
    fi
    echo $d$COUNTER
    grep $d$COUNTER a.csv|grep $TYPE|wc -l
    let COUNTER=COUNTER+1
    done

    Basically, this time around, I exported the result of my query into a csv called a.csv and use grep to get what I want. This script can be improved in several ways:

    • Use awk instead of simple grep
    • Have the user input the type and the date from the command line.

    This will be for future improvements.

  • For my own project, I have set up a log watcher for the Flexget which I have installed on my Raspberry Pi 3. This log watcher runs 5 minutes after Flexget is ran and attach the error part of the log as an attachment and sent to my email address.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    SMTP_SERVER=YOUR_EMAIL_SMTP
    RECEPIENT=EMAIL_TO_RECEIVE
    SENDER="YOUR_EMAIL_USER_NAME"
    TEMPLOG="TEMP_FILE_TO_STORE_ERROR_LOG" #Will be deleted email is sent
    DATE=$(date -I)
    MESSAGE=$(cat $HOME/flexget/flexget.log |
    grep -v INFO |
    grep -v VERBOSE |
    grep $DATE)
    CONTENT="Attached is the error log from today, please check!"
    if [ ! -z "$MESSAGE" ]
    then
    printf "$MESSAGE"|dd of=$HOME/errorlog
    printf "$CONTENT"|mailx -vr $SENDER -a $TEMPLOG -s "[TRANSMISSION ERROR] Transmission has encountered error" -S smtp=$SMTP_SERVER -S smtp-use-starttls -S smtp-auth=login -S smtp-auth-user=$SENDER -S smtp-auth-password="YOUR_EMAIL_PASSWORD" -S ssl-verify=ignore $RECEPIENT
    rm $TEMPLOG
    fi

    This script finds the error from flexget.log and write to TEMPLOG. If there is indeed errors exists in the log. The file will be attached and sent through the SMTP server to the address of your choice.

  • Over the weekend, I also started to learn React. React is a web library developed and used by Facebook. It is similar to Angular JS, but uses more straight rather than the TypeScript used by Angular JS. There were several notes that I would like to write down for future reference:

    • React are composed of components, however, there were several ways to declare a component in React.

      • The first way is the way that I would prefer, which is to use the ES6 class declaration, shown as follows:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        import {Component} from 'react';
        export class SkiDayCount extends Component{
        constructor(props){
        super(props);
        }
        render(){
        return (<div></div>)
        }
        }
      • The second way is cleaner, it is a stateless way of declaring and declares the component as a function, it is shown as follows:

        1
        export const SkiDayCount = () => (<div></div>) 
      • The third way, however, is in the process of deprecation and is not recommended at this point, but it is still shown here:

        1
        2
        3
        4
        5
        6
        import React from 'react'
        export const SkiDayCount = React.createClass({
        render(){
        return (<div></div>)
        }
        })

        This will be deprecated in the future release and put here just for reference only.

    • To use the above mentioned newly created component in a page. You can use the following code:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      import React from 'react'
      import { render } from 'react-dom'
      //import the component, assuming it is in a folder called components and the source is called SkiDayCount.js
      import { SkiDayCount } from './components/SkiDayCount'

      window.React = React

      render(
      <SkiDayCount />,
      document.getElementById('react-container')
      )
  • These are the notes from last week, I will learn more about React this week and hopefully will come up with more notes for next week.