CSR - JS Link - Status Indicators for Task Type

Question

I have a SharePoint workflow that is creating a task when a document is uploaded. There are four stages of tasks and what I am looking for is a replacement of the text with a visual icon/status bar (not percentage). Client is requesting the following:

1st step - 1 green "light" icon 2nd step - 2 green light icons 3rd step - 3 green light icons 4th step - 4 green light icons

I tried using CSR with JS link but I'm having difficulty. I'm sure I butchered the code, can someone give me a hand?

Here is my code:

(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Fields = {
        'Task_x0020_Type': { 'View': MyTasks }
    };

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function priorityIndicatorFiledTemplate(ctx) {
    var _Task_x0020_TypeText = ctx.CurrentItem.Task_x0020_Type;


    switch (_ProrityText.toLowerCase()) {
        case "Budget Preparation":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='10px' height='10px' /> </span>";
            break;
        case "normal":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='13px' height='13px' /> </span>";
            break;
        case "low":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='10px' height='10px' /> </span>";
            break;
        case "low":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='10px' height='10px' /> </span>";
    }
}

Answer 1

(function () {
    // Initialize the variable that stores the objects.
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Fields = {
        'Task_x0020_Type': { 'View': priorityIndicatorFiledTemplate }
    };

    // Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function priorityIndicatorFiledTemplate(ctx) {
    var _Task_x0020_TypeText = ctx.CurrentItem.Task_x0020_Type;


    switch (_Task_x0020_TypeText.toLowerCase()) {
        case "budget preparation":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='10px' height='10px' /> </span>";
            break;
        case "normal":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='13px' height='13px' /> </span>";
            break;
        case "low":
            return "<span style='color :#4bd942'><img src='/SiteAssets/Trafficlight-green-icon.png' width='10px' height='10px' /> </span>";

    }
}