JavaScript

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function LoginToAccount() {
    window.open("LogIn/LoginForm.html", "","width=350,height=150")
}
//-->
</SCRIPT>

[Route("api/PeakTimeRebate")]
public class PeakTimeRebateController : Controller
{
    [HttpGet("GetTransactionStatus")]
    [DecryptoFilter]
    public IActionResult GetTransactionStatus(string EncryptedAccountNumber)
    {
        this.Response.ContentType = "text/html";
        int randVal = new Random().Next(0, 10);

        if ((randVal == 1) || (randVal == 2) || (randVal == 3) || (randVal == 5) || (randVal == 7))
            return new ObjectResult("Prime");
        if (randVal % 2 == 0)
        {
            return new ObjectResult("Even");
        }
        else
        {
            return new ObjectResult("Odd");
        }
    }
}

@Injectable()
export class PeakTimeRebatesService extends ServiceBase {
    private _peaktimerebateTransactionStatusUrl: string = '/api/PeakTimeRebate/GetTransactionStatus';

    constructor(public _http: PgeCustomHttp) {
        super(_http);
    }

    public peakTimeRebateTransactionStatus(encryptedAccountNumber: string): Observable<string> {
        debugger;
        const params: URLSearchParams = new URLSearchParams(); //'EncryptedAccountNumber', new PgeCustomQueryEncoder()
        params.set('EncryptedAccountNumber', encryptedAccountNumber);

        const options = new RequestOptions({ search: params });

        return this._http.get(this._peaktimerebateTransactionStatusUrl, options)
            .map(this.extractBoolean)
            .catch(this.handleError);
    };
};

import { PeakTimeRebatesService } from '../peakTimeRebates/peakTimeRebates.service'; //Importing my Service


@Component({
    selector: 'transactionSuccessful-message',
    templateUrl: 'transactionSuccessful.component.html'
})

export class TransactionSuccessfulComponent extends ComponentBase {
    @Input()
    public TransactionMessage: string = '';
    public TransactionSuccessStatus = false;
    public TransactionExceptionStatus = false;
    private max: number = 10; private min: number = 0; private randVal: number; private checkStatMessage: string;

    @Input()
    public get EncryptedAccountNumber() {
        debugger;
        return this._encryptedAccountNumber;
    }

    public set EncryptedAccountNumber(value: string) {
        debugger;
        if ((value == null) || (value == '')) {
            value = 'XYZ'
        }
        this._encryptedAccountNumber = value;
        if (this.EncryptedAccountNumber !== '') {
            this.peakTimeRebateTransactionStatus(this.EncryptedAccountNumber);            
        }
    }

    private _encryptedAccountNumber: string = '';

    public constructor(
        private _service: PeakTimeRebatesService       
    ) {        
        super();
        debugger;
    }


    private peakTimeRebateTransactionStatus(encryptedAccountNumber: string): void {
        debugger;
        this._service.peakTimeRebateTransactionStatus(encryptedAccountNumber).subscribe((peakTimeRebateTransactionStatus: any) => {
            this.TransactionMessage = peakTimeRebateTransactionStatus;           
        });
    }


    ngOnInit(): void {
        debugger;
        this.EncryptedAccountNumber = '';      
        if (this.TransactionMessage == "Prime")
        {
            this.TransactionSuccessStatus = true;
        }
        else if (this.TransactionMessage == "Even")
        {
            this.TransactionSuccessStatus = false;
        }
        else
        {
            this.TransactionExceptionStatus = true;
        }
    }
}	

<div class="layout-two-column">
    <section class="layout-primary">
        <form #payBillSuccessForm="ngForm" id="payBillSuccessForm" name="payBillSuccessForm" novalidate>

            <div *ngIf="TransactionSuccessStatus">
                <h2 id="transactionSucessfulText">{{ 'Common.EnrollmentSuccessful' | Translate }}</h2>
            </div>

            <div *ngIf="!TransactionSuccessStatus">
                <h2 id="transactionFailedText">{{ 'PeakTimeRebatesView.EnrollmentSuccessMessage' | Translate }}</h2>
            </div>

            <div *ngIf="TransactionExceptionStatus">
                <h2 id="transactionExceptionText">{{ 'PeakTimeRebatesView.PeakTimeRebatesHeader' | Translate }}</h2>
            </div>

            <div class="divider-invisible text-right">
                <a class="btn" routerLink="/AccountInformation" id="doneButton">{{ 'Common.Done' | Translate }}</a>
            </div>
        </form>
    </section>
</div>
<browser-back [lastpage]="true"></browser-back>

<style>

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

<div id="injection"></div>

<script>
    $(document).ready(function () {
       PageInjector('targetURL');
    });

    function PageInjector(url) {
        $("#injection").html('');
        $.ajax({
            url: url,
            method: "get",
            success: function (data) {
                $("#injection").html(data);
            }
        });
    }
</script>

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"></div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941">^__em>^__strong><a href="#">Some question</a></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942">^__strong>Some answer</p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>

define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function (exports, _jquery) {

  function RevealContent($el) {
    this.el = $el;

    this.interactionData = $el.find(".interaction_data");
    this.container = $el.find(".interaction_content");
  }

  RevealContent.prototype = {
    init: function init() {
      var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
      var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

      this.container = this.container.parent().find('.RevealContent');

      this.container.append(initialContent);
      this.container.append(contentToReveal.hide());

      initialContent.click(function () {
        (0, _jquery["default"])(contentToReveal).slideToggle('slow');
      });

      // prevent any links within initialContent from navigating anywhere
      initialContent.find('a').click(function (e) {
        e.preventDefault();
      });
    }
  };

  exports["default"] = RevealContent;
});

$(document).ready(function() {
    $(this).on('click', '.interaction_booted', function () {
    //console.log('made it here');
     
        interactionData = $(this).find(".interaction_data");
        this.container = $(this).find(".interaction_content");
        
        var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
        var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());

        this.container = this.container.parent().find('.RevealContent');

        this.container.append(initialContent);
        this.container.append(contentToReveal.hide());

        initialContent.click(function () {
            $(contentToReveal).slideToggle('slow');
        });

    });
  
    
});

var contentToReveal = $('<div />').append($(interactionData.find('tdd')[1]).detach());
var initialContent = $('<div class="pointer" />').append($(interactionData.find('tdd')[0]).detach());

var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());

[HttpPut("{id}")]
public int Edit(int id, TblEmployee employee)
{
    return objemployee.UpdateEmployee(employee);
}

[Produces("application/json")]
[Route("api/Employee")]
public class EmployeeController : Controller
{
    EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

    [HttpGet("[action]")]
    //[Route("api/Employee/Index")]
    public IEnumerable<TblEmployee> Index()
    {
        return objemployee.GetAllEmployees();
    }

    [HttpPost]
    public int Create(TblEmployee employee)
    {
        return objemployee.AddEmployee(employee);
    }

    [HttpGet("{id}")]
    //[HttpGet("{id}", Name = "Details")]
    public TblEmployee Details(int id)
    {
        return objemployee.GetEmployeeData(id);
    }

    [HttpPut("{id}")]
    public int Edit(int id, TblEmployee employee)
    {
        return objemployee.UpdateEmployee(employee);
    }

    [HttpDelete("{id}")]
    public int Delete(int id)
    {
        return objemployee.DeleteEmployee(id);
    }

    [HttpGet("[action]")]
    public IEnumerable<TblCities> GetCityList()
    {
        return objemployee.GetCities();
    }
}

private renderEmployeeTable(empList: EmployeeData[]) {
    return <table className='table'>
        <thead>
            <tr>
                <th></th>
                <th>EmployeeId</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Department</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            {empList.map(emp =>
                <tr key={emp.employeeId}>
                    <td></td>
                    <td>{emp.employeeId}</td>
                    <td>{emp.name}</td>
                    <td>{emp.gender}</td>
                    <td>{emp.department}</td>
                    <td>{emp.city}</td>
                    <td>
                        <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                        <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                    </td>
                </tr>
            )}
        </tbody>
    </table>;
}

private handleEdit(id: number) {
    this.props.history.push("api/employee/edit/" + id);
}

[HttpDelete("{id}")]
public int Delete(int id)
{
    return objemployee.DeleteEmployee(id);
}

[HttpPost]
       public int Create(TblEmployee employee)
       {
           return objemployee.AddEmployee(employee);
       }

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';
import { EmployeeData } from './FetchEmployee';
interface AddEmployeeDataState {
    title: string;
    loading: boolean;
    cityList: Array<any>;
    empData: EmployeeData;
}
export class AddEmployee extends React.Component<RouteComponentProps<{}>, AddEmployeeDataState> {
    constructor(props) {
        super(props);
        this.state = { title: "", loading: true, cityList: [], empData: new EmployeeData };
        fetch('api/Employee/GetCityList')
            .then(response => response.json() as Promise<Array<any>>)
            .then(data => {
                this.setState({ cityList: data }                
                );

                console.log(data);
            });
        var empid = this.props.match.params["empid"];
        // This will set state for Edit employee  
        if (empid > 0) {
            fetch('api/Employee/Details/' + empid)
                .then(response => response.json() as Promise<EmployeeData>)
                .then(data => {
                    this.setState({ title: "Edit", loading: false, empData: data });
                });
        }
        // This will set state for Add employee  
        else {
            this.state = { title: "Create", loading: false, cityList: [], empData: new EmployeeData };
        }
        // This binding is necessary to make "this" work in the callback  
        this.handleSave = this.handleSave.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }
    public render() {
        let contents = this.state.loading
            ? <p>Loading...</p>
            : this.renderCreateForm(this.state.cityList);
        return <div>
            <h1>{this.state.title}</h1>
            <h3>Employee</h3>
            <hr />
            {contents}
        </div>;
    }
    // This will handle the submit form event.  
    private handleSave(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        // PUT request for Edit employee.  
        if (this.state.empData.employeeId) {
            fetch('api/Employee/Edit', {
                method: 'PUT',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
        // POST request for Add employee.  
        else {
            fetch('api/Employee/Create', {
                method: 'POST',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
    }
    // This will handle Cancel button click event.  
    private handleCancel(e) {
        e.preventDefault();
        this.props.history.push("/fetchemployee");
    }
    // Returns the HTML Form to the render() method.  
    private renderCreateForm(cityList: Array<any>) {
        return (
            <form onSubmit={this.handleSave} >
                <div className="form-group row" >
                    <input type="hidden" name="employeeId" value={this.state.empData.employeeId} />
                </div>
                < div className="form-group row" >
                    <label className=" control-label col-md-12" htmlFor="Name">Name</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="name" defaultValue={this.state.empData.name} required />
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Gender">Gender</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="gender" defaultValue={this.state.empData.gender} required>
                            <option value="">-- Select Gender --</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Department" >Department</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="Department" defaultValue={this.state.empData.department} required />
                    </div>
                </div>
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="City">City</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="City" defaultValue={this.state.empData.city} required>
                            <option value="">-- Select City --</option>
                            {cityList.map(city =>
                                <option key={city.cityId} value={city.cityName}>{city.cityName}</option>
                            )}
                        </select>
                    </div>
                </div >
                <div className="form-group">
                    <button type="submit" className="btn btn-default">Save</button>
                    <button className="btn" onClick={this.handleCancel}>Cancel</button>
                </div >
            </form >
        )
    }
}