<!DOCTYPE html> <html> <head> <title>Essam - Project 2</title> <meta charset="utf-8" /> <link rel="stylesheet" href="main.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script language="JavaScript" type="text/JavaScript"> //Base or Super Class called device class device{ //Constructor with required arguements constructor(deployed, replacementCost, supplierName, serialNum) { this._deployed = deployed; this._replacementCost = replacementCost; this._supplierName = supplierName; this._serialNum = serialNum; } //sets deployed set deployed(deployed){ this._deployed = deployed; } //gets deployed get deployed(){ return this._deployed; } //sets replacement cost set replacementCost(replacementCost){ this._replacementCost = replacementCost; } //gets repalcement cost get replacementCost(){ return this._replacementCost; } //set supplier name set supplierName(supplierName){ this._supplierName = supplierName; } //get supplier name get supplierName(){ return this._supplierName; } //set serial number set serialNum(serialNum){ this._serialNum = serialNum; } //get serial number get serialNum(){ return this._serialNum; } } //VideoDevice sub-class class VideoDevice extends device { //Constructor with required variables constructor(deployed, replacementCost, supplierName, serialNum, resolution, type) { super(deployed, replacementCost, supplierName, serialNum); this._resolution = resolution; this._type = type; } //Set resolution set resolution (resolution) { this._resolution = resolution; } //Get resolution get resolution (){ return this._resolution; } //Set type set type(type){ this._type = type; } //Get type get type(){ return this._type; } } //DiskDevice subclass class DiskDevice extends device { //Constructor with required variables constructor (deployed, replacementCost, supplierName, serialNum, size, transferRate){ super(deployed, replacementCost, supplierName, serialNum); this._transferRate = transferRate; this._size = size; } //Set transfer rate set transferRate(transferRate){ this._transferRate = transferRate; } //Get transfer rate get transferRate(){ return this._transferRate; } //Set size set size(size){ this._size = size; } //Get size get size(){ return this._size; } } //HardDisk sub class class HardDisk extends DiskDevice { //Constructor with required variables constructor (deployed, replacementCost, supplierName, serialNum, size, transferRate, platterSize, numOfPlatters){ super(deployed, replacementCost, supplierName, serialNum, size, transferRate); this._platterSize = platterSize; this._numOfPlatters = numOfPlatters; } //Set platter size set platterSize(platterSize){ this._platterSize = platterSize; } //Get platter size get platterSize(){ return this._platterSize; } //Set num of platters set numOfPlatters (numOfPlatters){ this._numOfPlatters = numOfPlatters; } //Get num of platters get numOfPlatters(){ return this._numOfPlatters; } } //SSD sub class class SSD extends DiskDevice { //Constructor with required variables constructor (deployed, replacementCost, supplierName, serialNum, size, transferRate, type, wearLevel){ super(deployed, replacementCost, supplierName, serialNum, size, transferRate); this._type = type; this._wearLevel = wearLevel; } //Set type set type(type){ this._type = type; } //Get type get type(){ return this._type; } //Set wear level set wearLevel(wearLevel){ this._wearLevel = wearLevel; } //Get wear level get wearLevel(){ return this._wearLevel; } } //This function handles the next button click function next(button){ if(button == 'VD') { if(VDCount < VDArr.length - 1) { VDCount++; $gel("deployedVD").value = VDArr[VDCount].deployed; $gel("replacementVD").value = VDArr[VDCount].replacementCost; $gel("supplierVD").value = VDArr[VDCount].supplierName; $gel("serialVD").value = VDArr[VDCount].serialNum; $gel("resolutionVD").value = VDArr[VDCount].resolution; $gel("typeVD").value = VDArr[VDCount].type; } } else if(button == 'HD') { if(HDCount < HDArr.length - 1) { HDCount++; $gel("deployedHD").value = HDArr[HDCount].deployed; $gel("replacementHD").value = HDArr[HDCount].replacementCost; $gel("supplierHD").value = HDArr[HDCount].supplierName; $gel("serialHD").value = HDArr[HDCount].serialNum; $gel("sizeHD").value = HDArr[HDCount].size; $gel("transferHD").value = HDArr[HDCount].transferRate; $gel("platterHD").value = HDArr[HDCount].platterSize; $gel("platterNumHD").value = HDArr[HDCount].numOfPlatters; } } else if(button == 'SSD') { if(SSDCount < SSDArr.length - 1) { SSDCount++; $gel("deployedSSD").value = SSDArr[SSDCount].deployed; $gel("replacementSSD").value = SSDArr[SSDCount].replacementCost; $gel("supplierSSD").value = SSDArr[SSDCount].supplierName; $gel("serialSSD").value = SSDArr[SSDCount].serialNum; $gel("sizeSSD").value = SSDArr[SSDCount].size; $gel("transferSSD").value = SSDArr[SSDCount].transferRate; $gel("typeSSD").value = SSDArr[SSDCount].type; $gel("wearLevelSSD").value = SSDArr[SSDCount].wearLevel; } } } //Handles the previous button click function previous(button){ if(button == 'VD') { if(VDCount > 0) { VDCount--; $gel("deployedVD").value = VDArr[VDCount].deployed; $gel("replacementVD").value = VDArr[VDCount].replacementCost; $gel("supplierVD").value = VDArr[VDCount].supplierName; $gel("serialVD").value = VDArr[VDCount].serialNum; $gel("resolutionVD").value = VDArr[VDCount].resolution; $gel("typeVD").value = VDArr[VDCount].type; } } else if(button == 'HD') { if(HDCount > 0) { HDCount--; $gel("deployedHD").value = HDArr[HDCount].deployed; $gel("replacementHD").value = HDArr[HDCount].replacementCost; $gel("supplierHD").value = HDArr[HDCount].supplierName; $gel("serialHD").value = HDArr[HDCount].serialNum; $gel("sizeHD").value = HDArr[HDCount].size; $gel("transferHD").value = HDArr[HDCount].transferRate; $gel("platterHD").value = HDArr[HDCount].platterSize; $gel("platterNumHD").value = HDArr[HDCount].numOfPlatters; } } else if(button == 'SSD') { if(SSDCount > 0) { SSDCount--; $gel("deployedSSD").value = SSDArr[SSDCount].deployed; $gel("replacementSSD").value = SSDArr[SSDCount].replacementCost; $gel("supplierSSD").value = SSDArr[SSDCount].supplierName; $gel("serialSSD").value = SSDArr[SSDCount].serialNum; $gel("sizeSSD").value = SSDArr[SSDCount].size; $gel("transferSSD").value = SSDArr[SSDCount].transferRate; $gel("typeSSD").value = SSDArr[SSDCount].type; $gel("wearLevelSSD").value = SSDArr[SSDCount].wearLevel; } } } //Handles the new button click function newIt(button){ if(button == 'VD') { VDArr.push(new VideoDevice($gel("deployedVD").value, $gel("replacementVD").value, $gel("supplierVD").value, $gel("serialVD").value, $gel("resolutionVD").options[$gel("resolutionVD").selectedIndex].text, $gel("typeVD").options[$gel("typeVD").selectedIndex].text)); } else if(button == 'HD') { HDArr.push(new HardDisk($gel("deployedHD").value, $gel("replacementHD").value, $gel("supplierHD").value, $gel("serialHD").value, $gel("sizeHD").options[$gel("sizeHD").selectedIndex].text, $gel("transferHD").options[$gel("transferHD").selectedIndex].text, $gel("platterHD").options[$gel("platterHD").selectedIndex].text, $gel("platterNumHD").options[$gel("platterNumHD").selectedIndex].text)); } else if(button == 'SSD') { SSDArr.push(new SSD($gel("deployedSSD").value, $gel("replacementSSD").value, $gel("supplierSSD").value, $gel("serialSSD").value, $gel("sizeSSD").options[$gel("sizeSSD").selectedIndex].text, $gel("transferSSD").options[$gel("transferSSD").selectedIndex].text, $gel("typeSSD").options[$gel("typeSSD").selectedIndex].text, $gel("wearLevelSSD").value)); } } //Handles the update button click function update(button){ if(button == 'VD') { VDArr[VDCount].deployed = $gel("deployedVD").value; VDArr[VDCount].replacementCost = $gel("replacementVD").value; VDArr[VDCount].supplierName = $gel("supplierVD").value; VDArr[VDCount].serialNum = $gel("serialVD").value; VDArr[VDCount].resolution = $gel("resolutionVD").value; VDArr[VDCount].type = $gel("typeVD").value; } else if(button == 'HD') { HDArr[HDCount].deployed = $gel("deployedHD").value; HDArr[HDCount].replacementCost = $gel("replacementHD").value; HDArr[HDCount].supplierName = $gel("supplierHD").value; HDArr[HDCount].serialNum = $gel("serialHD").value; HDArr[HDCount].size = $gel("sizeHD").value; HDArr[HDCount].transferRate = $gel("transferHD").value; HDArr[HDCount].platterSize = $gel("platterHD").value; HDArr[HDCount].numOfPlatters = $gel("platterNumHD").value; } else if(button == 'SSD') { SSDArr[SSDCount].deployed = $gel("deployedSSD").value; SSDArr[SSDCount].replacementCost = $gel("replacementSSD").value; SSDArr[SSDCount].supplierName = $gel("supplierSSD").value; SSDArr[SSDCount].serialNum = $gel("serialSSD").value; SSDArr[SSDCount].size = $gel("sizeSSD").value; SSDArr[SSDCount].transferRate = $gel("transferSSD").value; SSDArr[SSDCount].type = $gel("typeSSD").value; SSDArr[SSDCount].wearLevel = $gel("wearLevelSSD").value; } } //Helps save time writing document.getElementById() function $gel(id) { return document.getElementById(id); } //Arrays to hold each object type so we can switch through them const VDArr = []; const HDArr = []; const SSDArr = []; //Counters to track which objects we are on var VDCount = 0, HDCount = 0, SSDCount = 0; </script> </head> <body> <div id="wrap"> <header> <h1>Computer Spec Editor</h1> </header> <div class="outterDiv"><h3>Video Device</h3><div class="innerDiv"> <label>Deployed?</label><input type="checkbox" id="deployedVD"/><br> <label>Replacement Cost: </label><input type="text" id="replacementVD" size="8" /><br> <label>Supplier Name: </label><input type="text" id="supplierVD" size="8" /><br> <label>Serial Number: </label><input type="text" id="serialVD" size="8" /><br> <label>Resolution: </label><select id="resolutionVD"> <option>1280x720</option> <option>1920x1080</option> <option>2560x1440</option> <option>2048x1080</option> <option selected>3840x2160</option> <option>7680x4320</option> </select><br> <label>Type: </label><select id="typeVD"> <option>LCD</option> <option>LED</option> <option>Plasma</option> </select> </div><button onclick="previous('VD');">Previous</button><button onclick="next('VD');">Next</button><br> <button onclick="newIt('VD');">New</button><button onclick="update('VD');">Update</button> </div> <div class="outterDiv"><h3>Hard Disk</h3><div class="innerDiv"><label>Deployed?</label><input type="checkbox" id="deployedHD"/><br> <label>Replacement Cost: </label><input type="text" id="replacementHD" size="8" /><br> <label>Supplier Name: </label><input type="text" id="supplierHD" size="8" /><br> <label>Serial Number: </label><input type="text" id="serialHD" size="8" /><br> <label>Size: </label><select id="sizeHD"> <option>500 GB</option> <option>1 TB</option> <option>2 TB</option> <option>3 TB</option> </select><br> <label>Transfer Rate: </label><select id="transferHD"> <option>1GB/Second</option> <option>3GB/Second</option> <option>7GB/Second</option> </select> <label>Platter Size: </label><select id="platterHD"> <option>2.5 inches</option> <option>3 inches</option> <option>3.5 inches</option> </select><br> <label># of Platters: </label><select id="platterNumHD"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </div><button onclick="previous('HD');">Previous</button><button onclick="next('HD');">Next</button><br><button onclick="newIt('HD');">New</button><button onclick="update('HD');">Update</button></div> <div class="outterDiv"><h3>SSD</h3><div class="innerDiv"><label>Deployed?</label><input type="checkbox" id="deployedSSD"/><br> <label>Replacement Cost: </label><input type="text" id="replacementSSD" size="8" /><br> <label>Supplier Name: </label><input type="text" id="supplierSSD" size="8" /><br> <label>Serial Number: </label><input type="text" id="serialSSD" size="8" /><br> <label>Size: </label><select id="sizeSSD"> <option>500 GB</option> <option>1 TB</option> <option>2 TB</option> <option>3 TB</option> </select><br> <label>Transfer Rate: </label><select id="transferSSD"> <option>7GB/Second</option> <option>10GB/Second</option> <option>20GB/Second</option> </select> <label>Type: </label><select id="typeSSD"> <option>Flash</option> <option>DRAM</option> </select><br> <label>Wear Leveling: </label><input type="checkbox" id="wearLevelSSD"/></div><button onclick="previous('SSD');">Previous</button><button onclick="next('SSD');">Next</button><br><button onclick="newIt('SSD');">New</button><button onclick="update('SSD');">Update</button></div> </div> </body> </html>