Northgate Repairs Content

Repairs Summary - Property Based

This will provide a row for each outstanding and completed repair.

Where details of the contractor for the works order are provided this will be displayed in a popout modal:

This table of repairs uses a unique HTML structure to ensure that it is highly mobile responsive. With a card being generated for each table row:

<div class="RepairBanner">

<p>You have the following repairs in progress:</p>

<table class="table table-striped">
    <thead>
      <tr>
        <th class="hidden mobile">Reference</th>        
        <th>Description</th>

        <th class="hidden mobile">Raised Date</th>

        <th>Target Date</th>
      </tr>
    </thead>
    <tbody>
    
 {{#each Tenancy.WorksOrders}}
{{if_ne Status 'CLO'}}
      <tr>
        <td class="hidden mobile">{{WorksOrderReference}}</td>
        <td>{{DescriptionOfWork}}</td>

        <td class="hidden mobile">{{formatToString RaisedDateTime "dddd dd-MM-yyyy"}}</td>
  <td>{{formatToString TargetDateTime "dddd dd-MM-yyyy"}}</td>
      </tr>
{{/if_ne}}
{{/each}} 
       
    </tbody>
  </table>  

</div>

<div class="RepairBannerGreen">

<p>You have the following completed repairs:</p>


<table class="table table-striped">
    <thead>
      <tr>
        <th class="hidden mobile">Reference</th>        
        <th>Description</th>

        <th class="hidden mobile">Raised Date</th>

        <th>Completed Date</th>
      </tr>
    </thead>
    <tbody>
    
 {{#each Tenancy.WorksOrders}}
    {{if_eq Status 'COM'}}
      <tr>
        <td class="hidden mobile">{{WorksOrderReference}}</td>
        <td>{{DescriptionOfWork}}</td>

        <td class="hidden mobile">{{formatToString RaisedDateTime "dddd dd-MM-yyyy"}}</td>
        <td>{{formatToString ReportedCompleteDate "dddd dd-MM-yyyy"}}</td>
  </tr>
   {{/if_eq}}

    {{if_eq Status 'CLO'}}
      <tr>
        <td class="hidden mobile">{{WorksOrderReference}}</td>
        <td>{{DescriptionOfWork}}</td>

        <td class="hidden mobile">{{formatToString RaisedDateTime "dddd dd-MM-yyyy"}}</td>
        <td>{{formatToString ReportedCompleteDate "dddd dd-MM-yyyy"}}</td>
  </tr>
   {{/if_eq}}

{{/each}} 
       
    </tbody>
  </table>

</div>

Repairs Summary - Admin Unit Based

This will provide a row for each outstanding and completed repair for communal repairs:

<div class="communal PC">
	<div class="RepairBanner">
		<p>You have 1 outstanding repair/scheduled work</p>
		<div class="table">
			<div class="rownew header">
				<div class="cell"> Description of work </div>
				<div class="cell"> Date Raised </div>
				<div class="cell"> Target Date </div>
			</div>
			<div class="rownew">
				<div class="cell" data-title="Description of work">Flickering light in 3rd floor landing</div>
				<div class="cell" data-title="Date Raised">05/09/2019 </div>
				<div class="cell" data-title="Target Date"> 31/10/2020 </div>
			</div>
		</div>
		<a href="#/do-it-online/form/22" class="btn btn-sm btn-primary">Request a new Repair</a>
	</div>
	<div class="RepairBanner Green">
		<p>We have completed 1 repair in the past 3 years</p>
		<div class="table">
			<div class="rownew header">
				<div class="cell"> Description of work </div>
				<div class="cell"> Date Raised </div>
				<div class="cell"> Date Completed </div>
			</div>
			<div class="rownew">
				<div class="cell" data-title="Description of work"> Repair and/or refix the metal handrail to the external steps / path. </div>
				<div class="cell" data-title="Date Raised"> 23/07/2019 </div>
				<div class="cell" data-title="Date Completed"> 23/01/2019 </div>
			</div>
		</div>
	</div>
</div>
<!----Mobile Repairs---->
<div class="housing">
	<div class="card novel">
		<div id="slide-1 new">
			<div class="slide answer card">1 outstanding repair</div>
			<div class="hero">Flickering Light
</div>
			<div class="slide answer">3rd Floor</div>
			<div class="slide answer">Estimated Fix Date 
				<strong>31/10/2020</strong>
			</div>
			<hr>
				<button class="card-button" au-target-id="94" title="Remove from My Account">Report a new repair</button>
			</div>
		</div>