Commit b440e596 authored by Lidor Cohen's avatar Lidor Cohen

- refactor manage page

parent d544bf78
......@@ -8,7 +8,7 @@
@import "{}/imports/ui/stylesheets/game-lobby.less";
@import "{}/imports/ui/stylesheets/instructions.less";
@import "{}/imports/ui/stylesheets/quiz-form.less";
@import "{}/imports/ui/stylesheets/quiz-management-main.less";
@import "{}/imports/ui/stylesheets/manage.less";
@import "{}/imports/ui/stylesheets/view-quiz.less";
@import "{}/imports/ui/stylesheets/question.less";
@import "{}/imports/ui/stylesheets/leaders.less";
......@@ -90,4 +90,4 @@ body {
.logo {
height: 100px;
}
}
\ No newline at end of file
}
......@@ -12,13 +12,13 @@ import LoginLayout from '/imports/ui/layouts/login.js';
import Home from '/imports/ui/pages/game/home';
import Login from '/imports/ui/pages/login/login';
import LoginError from '/imports/ui/pages/login/login-error';
import CreateQuiz from '/imports/ui/pages/management/my-quizes/create-quiz';
import EditQuiz from '/imports/ui/pages//management/my-quizes/edit-quiz.js';
import CreateQuiz from '/imports/ui/pages/manage/my-quizes/create-quiz';
import EditQuiz from '/imports/ui/pages//manage/my-quizes/edit-quiz.js';
import Search from '/imports/ui/pages/search/search.js';
import ViewQuiz from '/imports/ui/pages/search/view-quiz';
import Main from '/imports/ui/pages/management';
import Main from '/imports/ui/pages/manage';
import GameRouter from '/imports/ui/pages/game/router';
import HistoryRouter from '/imports/ui/pages/management/game-stats-router';
import HistoryRouter from '/imports/ui/pages/manage/game-stats-router';
import NotFound from '/imports/ui/pages/not-found/not-found';
......
......@@ -19,7 +19,7 @@ const Question = ({ game }) => {
<div className="row">
<GameNavbar text={question.text} num="" />
</div>
{game.quiz.isManager()
{game.isManager()
? <a href="javascript:void(0)" className="btn btn-primary show-leaders-btn" onClick={skipQuestion}>
עבור שאלה
</a>
......
import React from 'react';
import PropTypes from 'prop-types';
import { managementTabs } from '/imports/startup/both/constants.js';
import GameCardManaged from '/imports/ui/components/game-card-managed.js';
const GamesManaged = ({ activeTab, gamesManaged }) =>
<div className={`tab-pane fade in ${activeTab === managementTabs.gamesManaged ? 'active' : ''}`}>
{gamesManaged.length
? gamesManaged.map(game =>
<div className="row" key={game._id}>
<GameCardManaged game={game} />
</div>,
)
: <h3>עדיין לא ארגנת משחק לחברים?</h3>}
</div>;
GamesManaged.propTypes = {
activeTab: PropTypes.string.isRequired,
gamesManaged: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default GamesManaged;
import React from 'react';
import PropTypes from 'prop-types';
import { managementTabs } from '/imports/startup/both/constants';
import GameCardPlayed from '/imports/ui/components/game-card-played';
const GamesPlayed = ({ activeTab, gamesPlayed }) =>
<div className={`tab-pane fade in ${activeTab === managementTabs.gamesPlayed ? 'active' : ''}`}>
{gamesPlayed.length
? gamesPlayed.map(game =>
<div className="row" key={game._id}>
<GameCardPlayed game={game} />
</div>,
)
: <h3>איך עוד לא השתתפת באף משחק ? אתה לא רציני...</h3>}
</div>;
GamesPlayed.propTypes = {
activeTab: PropTypes.string.isRequired,
gamesPlayed: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default GamesPlayed;
......@@ -6,14 +6,13 @@ import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';
import Quiz from '/imports/api/quizes/quizes';
import Game from '/imports/api/games/games';
import QuizCard from '/imports/ui/components/quiz-card';
import Loading from '/imports/ui/components/loading';
import GameCardPlayed from '/imports/ui/components/game-card-played';
import GameCardManaged from '/imports/ui/components/game-card-managed.js';
import { managementTabs } from '/imports/startup/both/constants.js';
import MyQuizes from './my-quizes';
import GamesManaged from './games-managed';
import GamesPlayed from './games-played';
class Main extends React.Component {
class Manage extends React.Component {
constructor(props) {
super(props);
this.state = {
......@@ -67,76 +66,14 @@ class Main extends React.Component {
};
return (
<div id="quiz-management-main">
<div
className="tab-btns btn-pref btn-group btn-group-justified btn-group-lg"
id="tabs-area"
role="group"
>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.myQuizes
? 'btn-primary'
: 'btn-default'}`}
onClick={changeTab(managementTabs.myQuizes)}
>
<span className="glyphicon glyphicon-list-alt" aria-hidden="true" />
<div className="hidden-xs">השאלונים שלי</div>
</button>
</div>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.gamesManaged
? 'btn-primary'
: 'btn-default'}`}
onClick={changeTab(managementTabs.gamesManaged)}
>
<span className="glyphicon glyphicon-briefcase" aria-hidden="true" />
<div className="hidden-xs">משחקים שניהלתי</div>
</button>
</div>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.gamesPlayed
? 'btn-primary'
: 'btn-default'}`}
onClick={changeTab(managementTabs.gamesPlayed)}
>
<span className="glyphicon glyphicon-stats" aria-hidden="true" />
<div className="hidden-xs">משחקים ששיחקתי</div>
</button>
</div>
</div>
<div id="management">
<ManageTabs activeTab={activeTab} changeTab={changeTab} />
<div className="tab-content">
<MyQuizes activeTab={activeTab} myQuizes={myQuizes} actions={actions} />
<div
className={`tab-pane fade in ${activeTab === managementTabs.gamesManaged
? 'active'
: ''}`}
>
{gamesManaged.length
? gamesManaged.map(game =>
<div className="row" key={game._id}>
<GameCardManaged game={game} />
</div>,
)
: <h3>עדיין לא ארגנת משחק לחברים?</h3>}
</div>
<div
className={`tab-pane fade in ${activeTab === managementTabs.gamesPlayed
? 'active'
: ''}`}
>
{gamesPlayed.length
? gamesPlayed.map(game =>
<div className="row" key={game._id}>
<GameCardPlayed game={game} />
</div>,
)
: <h3>איך עוד לא השתתפת באף משחק ? אתה לא רציני...</h3>}
</div>
<GamesManaged activeTab={activeTab} gamesManaged={gamesManaged} />
<GamesPlayed activeTab={activeTab} gamesPlayed={gamesPlayed} />
</div>
<div id="snackbar" className={quizDeleted || quizForked ? 'show' : ''}>
{quizDeleted ? 'השאלון נמחק בהצלחה' : 'השאלון הועתק בהצלחה'}
......@@ -168,18 +105,18 @@ class Main extends React.Component {
}
}
Main.propTypes = {
Manage.propTypes = {
myQuizes: PropTypes.arrayOf(PropTypes.object).isRequired,
gamesManaged: PropTypes.arrayOf(PropTypes.object).isRequired,
gamesPlayed: PropTypes.arrayOf(PropTypes.object).isRequired,
};
const ManagementContainer = ({ loading, myQuizes, gamesPlayed, gamesManaged }) => {
const ManageContainer = ({ loading, myQuizes, gamesPlayed, gamesManaged }) => {
if (loading) return <Loading />;
return <Main myQuizes={myQuizes} gamesPlayed={gamesPlayed} gamesManaged={gamesManaged} />;
return <Manage myQuizes={myQuizes} gamesPlayed={gamesPlayed} gamesManaged={gamesManaged} />;
};
ManagementContainer.propTypes = {
ManageContainer.propTypes = {
loading: PropTypes.bool.isRequired,
myQuizes: PropTypes.arrayOf(PropTypes.object).isRequired,
gamesManaged: PropTypes.arrayOf(PropTypes.object).isRequired,
......@@ -187,26 +124,16 @@ ManagementContainer.propTypes = {
};
export default createContainer(() => {
const imagesHandle = Meteor.subscribe('images.all');
const tagsHandle = Meteor.subscribe('tags.all');
const usersHandle = Meteor.subscribe('users.names');
const quizesHandle = Meteor.subscribe('quizes.my-quizes');
const myQuizesHandle = Meteor.subscribe('quizes.my-quizes');
const gamesPlayedHandle = Meteor.subscribe('games.games-played');
const gamesManagedHandle = Meteor.subscribe('games.games-managed');
const loading =
!imagesHandle.ready() ||
!tagsHandle.ready() ||
!quizesHandle.ready() ||
!usersHandle.ready() ||
!gamesPlayedHandle.ready() ||
!gamesManagedHandle.ready();
!myQuizesHandle.ready() || !gamesPlayedHandle.ready() || !gamesManagedHandle.ready();
const myQuizes = Quiz.find().fetch(); // TODO: fix query
const gamesManaged = Game.find({ 'quiz.owner': Meteor.userId() }).fetch().reverse();
const gamesPlayed = Game.find({
gameLog: { $elemMatch: { playerId: Meteor.userId() } },
})
const gamesPlayed = Game.find({ gameLog: { $elemMatch: { playerId: Meteor.userId() } } })
.fetch()
.reverse();
return {
......@@ -215,4 +142,49 @@ export default createContainer(() => {
gamesPlayed,
gamesManaged,
};
}, ManagementContainer);
}, ManageContainer);
const ManageTabs = ({ activeTab, changeTab }) => (
<div
className="tab-btns btn-pref btn-group btn-group-justified btn-group-lg"
id="tabs-area"
role="group"
>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.myQuizes ? 'btn-primary' : 'btn-default'}`}
onClick={changeTab(managementTabs.myQuizes)}
>
<span className="glyphicon glyphicon-list-alt" aria-hidden="true" />
<div className="hidden-xs">השאלונים שלי</div>
</button>
</div>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.gamesManaged
? 'btn-primary'
: 'btn-default'}`}
onClick={changeTab(managementTabs.gamesManaged)}
>
<span className="glyphicon glyphicon-briefcase" aria-hidden="true" />
<div className="hidden-xs">משחקים שניהלתי</div>
</button>
</div>
<div className="btn-group" role="group">
<button
className={`btn ${activeTab === managementTabs.gamesPlayed
? 'btn-primary'
: 'btn-default'}`}
onClick={changeTab(managementTabs.gamesPlayed)}
>
<span className="glyphicon glyphicon-stats" aria-hidden="true" />
<div className="hidden-xs">משחקים ששיחקתי</div>
</button>
</div>
</div>
);
ManageTabs.propTypes = {
activeTab: PropTypes.string.isRequired,
changeTab: PropTypes.func.isRequired,
};
#quiz-management-main {
#management {
padding-top: 50px;
.tab-btns {
margin-bottom: 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment