Skip to content

Commit

Permalink
Merge pull request #11 from antonKrizmanic/stage
Browse files Browse the repository at this point in the history 
MUI
  • Loading branch information
@antonKrizmanic
antonKrizmanic authored Oct 12, 2024
2 parents 16a3f29 + 3aca73f commit 274f887
Show file tree
Hide file tree
Showing 30 changed files with 1,390 additions and 860 deletions.
31 changes: 31 additions & 0 deletions .github/workflows/deploy.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
name: Deploy to GitHub Pages

on:
push:
branches:
- main # Change this to your default branch if it's not 'main'

jobs:
build-and-deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout the repository
uses: actions/checkout@v2

- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '14'

- name: Install dependencies
run: npm install

- name: Build and export the static site
run: npm run deploy

- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out
26 changes: 9 additions & 17 deletions app/(routes)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import BigRedButton from '@/components/Buttons/BigRedButton';
import { Button, Stack, Typography } from '@mui/material';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

Expand All @@ -14,22 +14,14 @@ const HomePage = () => {
};

return (
<div className="flex flex-col items-center justify-center min-h-screen">
<h2 className="text-2xl mb-4">Odaberite temu kviza</h2>
<div className="flex flex-col space-y-4">
<BigRedButton
onClick={() => handleThemeSelection('100')}
>
Prva pomoć
</BigRedButton>
<BigRedButton
className="border border-red-500 text-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white transition-colors duration-300"
onClick={() => handleThemeSelection('200')}
>
Pokret Crvenog križa
</BigRedButton>
</div>
</div>
<>
<Typography variant="h1" gutterBottom>Odaberite temu kviza</Typography>

<Stack spacing={1}>
<Button onClick={() => handleThemeSelection('100')} variant="outlined">Prva pomoć</Button>
<Button onClick={() => handleThemeSelection('200')} variant="outlined">Pokret Crvenog križa</Button>
</Stack>
</>
);
};

Expand Down
34 changes: 16 additions & 18 deletions app/categories/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@

import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import {get} from '../../services/HttpService';
import BigRedButton from '@/components/Buttons/BigRedButton';
import { get } from '../../services/HttpService';
import { Button, Stack, Typography } from '@mui/material';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';

interface Category {
id: number;
Expand All @@ -23,7 +25,7 @@ const CategoriesPage = () => {
useEffect(() => {
const fetchCategories = async () => {
try {
const response = await get(`Quizzes/PublicQuizCategory/GetList/1?QuizTheme=${theme}&ActiveStatusId=1&Page=0&SearchTerm=&Type=&Field=&IgnorePageSize=True&PerPage=10`);
const response = await get(`Quizzes/PublicQuizCategory/GetList/1?QuizTheme=${theme}&ActiveStatusId=1&Page=0&SearchTerm=&Type=&Field=&IgnorePageSize=True&PerPage=10`);
setCategories(response.data.list);
} catch (error) {
console.error('Error fetching categories:', error);
Expand All @@ -50,28 +52,24 @@ const CategoriesPage = () => {
}

return (
<div className="flex flex-col items-center justify-center min-h-screen">
<h2 className="text-2xl mb-4">Odaberite kategoriju kviza</h2>
<div className="flex flex-col space-y-4">
<>
<Typography variant="h1" gutterBottom>Odaberite kategoriju kviza</Typography>
<Stack spacing={1} sx={{marginBottom:3}}>
{categories.length === 0 ? (
<p>Nije dohvaćena ni jedna kategorija</p>
<Typography>Nije dohvaćena ni jedna kategorija</Typography>
) : (
categories.map((category) => (
<BigRedButton
key={category.id}
onClick={() => handleCategorySelection(category.name)}
>
<Button onClick={() => handleCategorySelection(category.id.toString())} variant="outlined" key={category.id}>
{category.name}
</BigRedButton>
</Button>
))
)}
<BigRedButton
onClick={handleBack}
>
<Button onClick={handleBack} variant="outlined">
<FontAwesomeIcon icon={faArrowLeft} /> &nbsp;
Natrag
</BigRedButton>
</div>
</div>
</Button>
</Stack>
</>
);
};

Expand Down
100 changes: 44 additions & 56 deletions app/init-quiz/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,20 @@

import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { get, post } from '../../services/HttpService';
import BigRedButton from '@/components/Buttons/BigRedButton';
import BigGrayButton from '@/components/Buttons/BigGrayButton';
import { post } from '../../services/HttpService';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { Button, Card, CardActions, CardContent, List, ListItem, Typography } from '@mui/material';
import CircleIcon from '@mui/icons-material/Circle';
import { red } from '@mui/material/colors';

interface QuizInitData {
quizId: number;
// Add other relevant fields if needed
}

const InitQuizPage = () => {
const router = useRouter();
const searchParams = useSearchParams();
const theme = searchParams.get('theme');
const category = searchParams.get('category');
const [quizInitData, setQuizInitData] = useState<QuizInitData | null>(null);
const [quizId, setQuizId] = useState<number | null>(null);
const [loading, setLoading] = useState<boolean>(true);

useEffect(() => {
Expand All @@ -26,10 +25,11 @@ const InitQuizPage = () => {
QuizCategoryId: category ? parseInt(category) : null,
QuizTheme: theme ? parseInt(theme) : null,
CityAssociationId: 1,
};

const response = await post('/quizzes/PublicQuiz', data);
setQuizInitData(response.data);
};

const response = await post('quizzes/PublicQuiz', data);
console.log(response.data);
setQuizId(response.data);
} catch (error) {
console.error('Error initializing quiz:', error);
} finally {
Expand All @@ -43,8 +43,8 @@ const InitQuizPage = () => {
}, [theme, category]);

const handleStartQuiz = () => {
if (quizInitData) {
router.push(`/quiz?quizId=${quizInitData.quizId}`);
if (quizId) {
router.push(`/quiz?quizId=${quizId}`);
}
};

Expand All @@ -56,52 +56,40 @@ const InitQuizPage = () => {
return <div>Loading...</div>;
}

const infoItems = [
"Nema vremenskog ograničenja",
"Moraš odgovoriti na sva pitanja",
"Ako napustiš ovu stranicu za vrijeme rješavanja kviza, morat ćeš početi ispočetka",
"Na kraju ćeš moći pregledati svoj rezultat"
];

return (
<div className="flex flex-col items-center justify-center min-h-screen">
<h2 className="text-2xl mb-4">Malo o pravilima</h2>
{quizInitData ? (
<div className="w-full max-w-screen-md mx-auto px-6">
<div className="flex justify-center p-4 px-3">
<div className="w-full">
<div className="bg-white shadow-md rounded-lg px-3 py-2 mb-4">
<div className="pb-3 text-sm">
<div className="flex justify-start text-gray-700 rounded-md px-2 py-2 my-2">
<span className="bg-red-400 h-2 w-2 m-2 rounded-full"></span>
<div className="flex-grow font-medium px-2">Nema vremenskog ograničenja</div>
</div>
<div className="flex justify-start text-gray-700 rounded-md px-2 py-2 my-2">
<span className="bg-red-400 h-2 w-2 m-2 rounded-full"></span>
<div className="flex-grow font-medium px-2">Moraš odgovoriti na sva pitanja</div>
</div>
<div className="flex justify-start text-gray-700 rounded-md px-2 py-2 my-2">
<span className="bg-red-400 h-2 w-2 m-2 rounded-full"></span>
<div className="flex-grow font-medium px-2">Ako napustiš ovu stranicu za vrijeme rješavanja kviza, morat ćeš početi ispočetka</div>
</div>
<div className="flex justify-start text-gray-700 rounded-md px-2 py-2 my-2">
<span className="bg-red-400 h-2 w-2 m-2 rounded-full"></span>
<div className="flex-grow font-medium px-2">Na kraju ćeš moći pregledati svoj rezultat</div>
</div>
</div>
<div className="block bg-white text-center mb-2 rounded-b-lg">
<BigGrayButton
onClick={handleBack}
>
Natrag
</BigGrayButton>
<BigRedButton
onClick={handleStartQuiz}
>
Start
</BigRedButton>
</div>
</div>
</div>
</div>
</div>
<>
{quizId ? (
<>
<Typography variant="h1" gutterBottom>Malo o pravilima</Typography>
<Card sx={{width:'100%'}}>
<CardContent>
<List>
{infoItems.map((item, index) => (
<ListItem key={index}>
<CircleIcon sx={{ color: red[500], fontSize: 12 }} /> &nbsp;
{item}
</ListItem>
))}
</List>
</CardContent>
<CardActions sx={{justifyContent: 'space-between'}}>
<Button onClick={handleBack} variant="outlined"><FontAwesomeIcon icon={faArrowLeft} /> &nbsp; Natrag</Button>
<Button onClick={handleStartQuiz} variant="outlined" sx={{marginLeft:'auto'}}>Start</Button>
</CardActions>
</Card>

</>
) : (
<p>Error initializing quiz. Please try again.</p>
)}
</div>
</>
);
};

Expand Down
42 changes: 30 additions & 12 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { Metadata } from 'next';
import { roboto } from '@/config/fonts';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import '@/styles/global.css';
import theme from '@/theme';
import { Box, Container } from '@mui/material';


// Checks whether the app is running in a production or development mode
const isProduction = process.env.NODE_ENV === 'production';
Expand All @@ -10,21 +15,15 @@ const isProduction = process.env.NODE_ENV === 'production';
*/
export const metadata: Metadata = {
title: {
default: `GDCK Buje kviz ${isProduction ? '' : '- development'}`,
default: `GDCK Buje kviz ${isProduction ? '' : '- development'}`,
template: `%s | GDCK Buje kviz`
},
description: 'Kviz za potrebe GDCK Buje. Kviz omogućava rješavanje kvizova iz područja prve pomoći i poznavanja pokreta Crvenog križa.',
icons: {
icon: [
{
media: '(prefers-color-scheme: light)',
url: '/icons/logo.svg',
href: '/icons/logo.svg'
},
{
media: '(prefers-color-scheme: dark)',
url: '/icons/logo-dark.svg',
href: '/icons/logo-dark.svg'
url: '/icons/logo.png',
href: '/icons/logo.png'
}
]
}
Expand All @@ -42,8 +41,27 @@ type RootLayoutProps = {
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<body className="min-h-screen flex flex-col bg-red-100 ">
{children}
<body>
<AppRouterCacheProvider options={{ enableCssLayer: true }}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Container maxWidth="md">
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: { xs: 'flex-start', lg: 'center' },
alignItems: 'center',
minHeight: { xs: 'auto', lg: '100vh' },
paddingTop: { xs: 2, md: 4 },
}}
>
{children}
</Box>
</Container>
</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
);
Expand Down
Loading

0 comments on commit 274f887

Please sign in to comment.