Browse Source

updated table

master
Fradl 2 years ago
parent
commit
c39baf0ab9
3 changed files with 48 additions and 14 deletions
  1. +18
    -1
      src/App.css
  2. +18
    -1
      src/Components/Inputs.js
  3. +12
    -12
      src/Components/Table.js

+ 18
- 1
src/App.css View File

@@ -34,4 +34,21 @@

.highlighted {
background-color: grey;
}
}

table {
width: 500px;
border: 1px solid black;
height: 50vh;
justify-content: space-between;
}

tr {
justify-content: space-between;
border: 1px solid black;
}

td {
border: 1px solid black;
}


+ 18
- 1
src/Components/Inputs.js View File

@@ -11,6 +11,7 @@ class Inputs extends React.Component{

this.setSelected = this.setSelected.bind(this)
this.keyPressHandler = this.keyPressHandler.bind(this)
this.clickSuggestion = this.clickSuggestion.bind(this)
}

changeHandler = (e) => {
@@ -65,6 +66,22 @@ class Inputs extends React.Component{
return suggestions
}

clickSuggestion = (e) => {
this.setState({
moduleCode: e.target.getAttribute("suggestion"),
selectedSuggestion: -1,
})
}

suggestionPress = (e) => {
if(e.key === 'Enter'){
this.setState({
moduleCode: e.target.getAttribute("suggestion"),
selectedSuggestion: -1,
})
}
}

render(){

const displaySearchSuggestions = () => {
@@ -76,7 +93,7 @@ class Inputs extends React.Component{
if(i === this.state.selectedSuggestion)
highlighted = "highlighted"
display.push(
<div className={"autocomplete-suggestion "+ highlighted} id={"suggestion-"+i+1} role="option">{suggestion}</div>
<div className={"autocomplete-suggestion "+ highlighted} key={suggestion} suggestion={suggestion} onClick={this.clickSuggestion} onKeyPress={this.suggestionPress} tabIndex={0} id={"suggestion-"+i+1} role="option">{suggestion}</div>
)
})
return display


+ 12
- 12
src/Components/Table.js View File

@@ -12,7 +12,7 @@ class Table extends React.Component{
<caption>Timetable For:{this.props.for}</caption>
<thead>
<tr>
<td></td>
<td>Timetable</td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
@@ -22,20 +22,20 @@ class Table extends React.Component{
</thead>
<tbody>
<tr>
<th scope="row">09:00 - 11:00</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<th scope="row">11:00 - 13:00</th>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>Free</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
</tr>
<tr>
<th scope="row">11:00 - 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
<td>Free</td>
<td>CA357 @ XG19<br /> Donal Fitzpatrick</td>
</tr>
</tbody>
</table>


Loading…
Cancel
Save