Currently, I am trying to create an auditorium viewer and seat selector screen using Material-UI. However, I have not been able to find a similar control for this specific task.
Do you have any suggestions on how I could go about implementing this screen?
Feeling a bit bored, I decided to create a quick example for you. This example includes components from the TicToc Tutorial on React.com:
To organize the columns, I used <Grid> from Material-UI. Then, each row is built using:
<Board init={4} end={9}/> where "init" and "end" props determine the starting and ending positions of each row.
With these combinations, you have the flexibility to create the layout you desire, allowing you to explore different possibilities:
https://i.stack.imgur.com/pkd9p.png
The JavaScript file implementation looks like this:
import React from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(Math.abs(1+this.props.end-this.props.init)).fill(null),
};
}
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = squares[i] ? 0 : 1;
this.setState({squares: squares});
}
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i) }
id={i}
/>
);
}
renderBoard(init,end) {
var line = [];
for(let i=init; i<=end; i++) {
line.push(this.renderSquare(i));
}
return (
line
);
}
render() {
return (
<div>
<Grid container>
{this.renderBoard(this.props.init,this.props.end)}
</Grid>
</div>
);
}
}
class Square extends React.Component {
render() {
return (
<button
className="square"
onClick={() => this.props.onClick()}
style={{ backgroundColor: this.props.value ? 'green' : 'black'}}
>
{this.props.id}
</button>
);
}
}
class Scene extends React.Component {
render() {
return (
<Grid container>
<Grid item xs="6">
<Board init={1} end={11}/>
<Board init={2} end={11}/>
<Board init={3} end={10}/>
<Board init={4} end={9}/>
<Board init={2} end={11}/>
<Board init={0} end={11}/>
</Grid>
<Grid item xs="6">
<Board init={10} end={1}/>
<Board init={6} end={12}/>
<Board init={9} end={13}/>
</Grid>
</Grid>
);
}
}
export default Scene;
The CSS rules in the App.css file are as follows:
.square {
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
color: #fff;
}
Recently, I encountered an issue while using the react-microsoft-login package from npm. I included a button in the children property and received a typescript error stating that "property 'children' does not exist on type 'intrinsicattribut ...
I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...
I run a website dedicated to music instruments, and I have implemented a carousel feature that displays images at intervals. However, I encountered an issue when converting my high-resolution images to base64 for storage in the database ...
Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...
Can anyone help me figure out how to display clustered items in the same way as shown in the vanilla js sample available at https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Expanding%20Spider%20Clusters/Expanding%20Spi ...
I am struggling to update the state and component in my code. When I press a button and change the value of one of the props in the popup component, the prop value does not get updated. I suspect this issue is due to using setState. I researched a possible ...
Here is a code snippet that creates a POST request using the aws amplify api. I've stored the API.post promise in a variable called promiseToCancel, and when the cancel button is clicked, the cancelRequest() function is called. The promiseToCancel va ...
The documentation for MUI(v5) includes an example highlighting the use of global style overrides: const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { // How to use pseudo-class here? // I ...
Here is an example of a higher order component: // HigherOrderComponent.js const withLogging = WrappedComponent => class extends React.Component { componentDidMount() { console.log('Component has mounted'); } render () { return ...
I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...
Recently, I created a Next.js v13 typescript app using npx create-next-app. After removing all the default css and html, I started incorporating Material UI into my project. However, when I added the CssBaseline, it resulted in numerous errors related to m ...
I'm having trouble grasping the concept of triggering a state update that can be confirmed. My focus is on testing 2 specific cases related to the visual appearance of a button. 1) Testing if the button changes visually when selected 2) Testing if th ...
I am currently working with a server component that looks like this: const ContentSubmissions = async () => { const blogsData: any = await getBlogsData(); const galleryData: any = await getGalleryData(); const questionsData: any = await getQuestio ...
I've been utilizing create-react-app for some time now. Autoreloading with 'npm start' or 'yarn start' has been working well on its own, but now I'm facing another issue. Currently, I am running the app on an Express server th ...
Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...
I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...
I feel like using an image would help better illustrate my question. https://i.stack.imgur.com/LJN12.png Whenever I enable crosshairs, they extend from the bottom of the chart to the top. Is there a way to create a crosshair that only intersects at the x ...
Seeking guidance on passing React component props to another component: interface IMyComponent { props: Props<any> } const MyComponent: FC = ({ props }) => { } Previously, I attempted to utilize the React.Props type after consulting this que ...
I attempted to import a function because I want to click on <il> servies</il> and scroll to the services section on the home page. However, I simply want to click on the li element in the navbar and scroll to the service section on the home pag ...
Currently, I am encountering an issue with react router v6. While on the detail page, if I press the arrow in Chrome to go back to the previous page, it takes me to the page before the previous one. I checked the history by long pressing on the back arrow, ...