Browse Source

init

master
fraz 2 years ago
parent
commit
4e68cc295e
5 changed files with 186 additions and 20 deletions
  1. +15
    -0
      src/App.css
  2. +19
    -20
      src/App.js
  3. +105
    -0
      src/Components/Inputs.js
  4. +46
    -0
      src/Components/Table.js
  5. +1
    -0
      timetable/dcu-opentimetable

+ 15
- 0
src/App.css View File

@@ -20,3 +20,18 @@
.App-link {
color: #09d3ac;
}

.hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

.highlighted {
background-color: grey;
}

+ 19
- 20
src/App.js View File

@@ -1,26 +1,25 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Table from './Components/Table';
import Inputs from './Components/Inputs';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends React.Component{
constructor(){
super()

this.modules = ['CA1', 'CASE2', 'CASE3', 'CASE4', 'EC1','EC2','EC3','EC4']

}

render(){
return(
<div>
<Inputs modules={this.modules} />
<hr />
<Table />
</div>
)
}
}

export default App;

+ 105
- 0
src/Components/Inputs.js View File

@@ -0,0 +1,105 @@
import React from 'react';
import '../App.css';

class Inputs extends React.Component{
constructor(props){
super(props)
this.state = {
moduleCode: "",
selectedSuggestion: -1,
}

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

changeHandler = (e) => {
this.setState({
[e.target.name] : e.target.value,
selectedSuggestion: -1
})
}

keyPressHandler = (e) => {
let i = this.state.selectedSuggestion
let maxlim = this.getSearchSuggestions().length - 1
switch(e.key){
case 'Enter':
e.preventDefault()
this.setSelected()
return
case 'ArrowUp':
e.preventDefault()
this.setState({
selectedSuggestion: i > 0 ? i - 1 : i
})
return
case 'ArrowDown':
e.preventDefault()
this.setState({
selectedSuggestion: i < maxlim ? i + 1 : i
})
return
default:
return undefined
}
}

setSelected = () => {
if(this.state.selectedSuggestion !== -1){
this.setState({
moduleCode: this.getSearchSuggestions()[this.state.selectedSuggestion],
selectedSuggestion: -1
})
}
}

getSearchSuggestions = () => {
if(this.state.moduleCode === "")
return []
let suggestions = []
this.props.modules.map((mod) => {
if (mod.indexOf(this.state.moduleCode) === 0 && suggestions.length < 5)
suggestions.push(mod)
})
return suggestions
}

render(){

const displaySearchSuggestions = () => {
if(this.state.moduleCode === "")
return ''
let display = []
this.getSearchSuggestions().map((suggestion, i) => {
let highlighted = ""
if(i === this.state.selectedSuggestion)
highlighted = "highlighted"
display.push(
<div className={"autocomplete-suggestion "+ highlighted} id={"suggestion-"+i+1} role="option">{suggestion}</div>
)
})
return display
}


return(
<div>
<div id="searchFields">
<label htmlFor="moduleCode">Module Code:</label>
<input value={this.state.moduleCode} onChange={this.changeHandler} onKeyDown={this.keyPressHandler} type="text" autoComplete="off" role="combobox" aria-autocomplete="both" aria-activedescendant="suggestion-1" aria-owns="results" id="search" name="moduleCode"></input>
</div>
<div className="autocomplete" id="search-autocomplete">
<div id="results" role="listbox">
{displaySearchSuggestions()}
</div>
</div>
<div id='announce' className="hidden" aria-live="assertive">
{displaySearchSuggestions().length} suggestions found, use up and down arrows to review.
</div>
</div>
)
}
}

export default Inputs;

+ 46
- 0
src/Components/Table.js View File

@@ -0,0 +1,46 @@
import React from 'react';
import '../App.css';

class Table extends React.Component{
constructor(){
super()
}

render(){
return(
<table>
<caption>Timetable For:{this.props.for}</caption>
<thead>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</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>
</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>
</tr>
</tbody>
</table>
)
}
}

export default Table;

+ 1
- 0
timetable/dcu-opentimetable

@@ -0,0 +1 @@
Subproject commit 2e1b8a8966e7573118587e6d04a3a3dbfe98eae4

Loading…
Cancel
Save