Page MenuHomec4science

groupDashboard.Dart
No OneTemporary

File Metadata

Created
Tue, May 21, 21:30

groupDashboard.Dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:Teacher_Dashboard/widgets/custom_app_bar.dart';
import 'package:Teacher_Dashboard/widgets/celluloMap.Dart';
import 'dart:convert';
import 'package:Teacher_Dashboard/config/palette.dart';
import 'dart:async';
import 'package:Teacher_Dashboard/model/Class.dart';
import 'package:Teacher_Dashboard/model/Group.dart';
import 'package:Teacher_Dashboard/model/activities/activity.Dart';
import 'package:Teacher_Dashboard/config/palette.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:step_progress_indicator/step_progress_indicator.dart';
import 'package:Teacher_Dashboard/widgets/mapShapeMaker.dart';
//import 'package:Teacher_Dashboard/model/core/models/productModel.dart';
//import 'package:Teacher_Dashboard/model/core/viewmodels/CRUDModel.dart';
import 'package:provider/provider.dart';
class GroupDashboard extends StatefulWidget {
final int currentgroupID;
GroupDashboard({Key key, this.currentgroupID}) : super(key: key);
@override
GroupDashboardState createState() => GroupDashboardState();
}
class GroupDashboardState extends State<GroupDashboard> {
final TextStyle whiteText = TextStyle(color: Colors.white, fontSize: 20);
Timer timer;
final FirebaseDatabase _database = FirebaseDatabase.instance;
var progress;
int groupID = 0;
int studentListIndex = 0;
int activityID = 0;
int activityListIndex = 0;
int turnID = 0;
List<int> gColor;
static List<Offset> pointPosition = [
Offset(80, 80),
Offset(760, 80),
Offset(80, 760),
Offset(760, 760)
];
var mapShape = [
[
{
'numCircles': 4,
'originCircles': [
Offset(390, 300),
Offset(190, 170),
Offset(60, 360),
Offset(560, 690)
],
'radiuosCircles': [60.0, 70.0, 60.0, 60.0],
'numRectangles': 2,
'originRectangles': [Offset(300, 30), Offset(300, 560)],
'widthRectangles': [150.0, 100.0],
'heightRectangles': [50.0, 250.0],
'numPolygons': 5,
'sidesofPolygon': [3, 3, 5, 4, 4],
'radiusPolygon': [60.0, 70.0, 70.0, 60.0, 80.0],
'centerPolygon': [
Offset(60, 230),
Offset(600, 90),
Offset(600, 250),
Offset(600, 500),
Offset(780, 400)
],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
{
'numCircles': 2,
'originCircles': [
Offset(380, 320),
Offset(160, 290),
],
'radiuosCircles': [60.0, 70.0],
'numRectangles': 3,
'originRectangles': [
Offset(100, 500),
Offset(700, 560),
Offset(500, 360)
],
'widthRectangles': [150.0, 100.0, 80.0],
'heightRectangles': [50.0, 250.0, 230.0],
'numPolygons': 4,
'sidesofPolygon': [3, 5, 4, 4],
'radiusPolygon': [70.0, 80.0, 70.0, 70.0],
'centerPolygon': [
Offset(300, 90),
Offset(600, 60),
Offset(500, 650),
Offset(780, 300)
],
'startCenter': pointPosition[0],
'endCenter': pointPosition[3]
},
{
'numCircles': 3,
'originCircles': [
Offset(260, 170),
Offset(490, 560),
Offset(690, 590),
],
'radiuosCircles': [80.0, 70.0, 70.0],
'numRectangles': 2,
'originRectangles': [Offset(500, 30), Offset(350, 560)],
'widthRectangles': [150.0, 100.0],
'heightRectangles': [80.0, 300.0],
'numPolygons': 3,
'sidesofPolygon': [3, 4, 4],
'radiusPolygon': [70.0, 90.0, 80.0],
'centerPolygon': [
Offset(40, 630),
Offset(70, 390),
Offset(620, 220),
],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
],
[
{
'numCircles': 0,
'originCircles': [
Offset(390, 300),
Offset(160, 70),
Offset(60, 360),
Offset(560, 690)
],
'radiuosCircles': [60.0, 50.0, 50.0, 40.0],
'numRectangles': 5,
'originRectangles': [
Offset(300, 30),
Offset(200, 560),
Offset(400, 760),
Offset(780, 460),
Offset(650, 500)
],
'widthRectangles': [150.0, 100.0, 50.0, 100.0, 100.0],
'heightRectangles': [50.0, 250.0, 300.0, 50.0, 100.0],
'numPolygons': 4,
'sidesofPolygon': [4, 4, 4, 4],
'radiusPolygon': [70.0, 70.0, 50.0, 60.0, 50.0],
'centerPolygon': [
Offset(60, 280),
Offset(500, 140),
Offset(600, 200),
Offset(500, 500),
Offset(680, 400)
],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
{
'numCircles': 0,
'originCircles': [
Offset(390, 300),
Offset(160, 70),
Offset(60, 360),
Offset(560, 690)
],
'radiuosCircles': [60.0, 50.0, 50.0, 40.0],
'numRectangles': 4,
'originRectangles': [
Offset(300, 30),
Offset(300, 560),
Offset(500, 560),
Offset(750, 360)
],
'widthRectangles': [
150.0,
100.0,
50.0,
150.0,
],
'heightRectangles': [50.0, 250.0, 250.0, 300.0],
'numPolygons': 4,
'sidesofPolygon': [4, 4, 4, 4],
'radiusPolygon': [80.0, 60.0, 50.0, 60.0],
'centerPolygon': [
Offset(100, 330),
Offset(600, 90),
Offset(500, 200),
Offset(400, 350),
],
'startCenter': pointPosition[0],
'endCenter': pointPosition[3]
},
{
'numCircles': 0,
'originCircles': [
Offset(390, 300),
Offset(160, 70),
Offset(60, 360),
Offset(560, 690)
],
'radiuosCircles': [60.0, 50.0, 50.0, 40.0],
'numRectangles': 3,
'originRectangles': [
Offset(350, 70),
Offset(300, 560),
Offset(700, 520)
],
'widthRectangles': [350.0, 300.0, 100.0],
'heightRectangles': [50.0, 250.0, 100.0],
'numPolygons': 3,
'sidesofPolygon': [4, 4, 4],
'radiusPolygon': [100.0, 60.0, 70.0],
'centerPolygon': [
Offset(80, 230),
Offset(650, 190),
Offset(400, 250),
],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
],
[
{
'numCircles': 0,
'originCircles': [Offset(0, 0)],
'radiuosCircles': [0.0],
'numRectangles': 7,
'originRectangles': [
Offset(300, 30),
Offset(100, 560),
Offset(600, 630),
Offset(780, 360),
Offset(300, 300),
Offset(500, 260),
Offset(300, 560)
],
'widthRectangles': [150.0, 100.0, 50.0, 80.0, 150.0, 100.0, 100.0],
'heightRectangles': [70.0, 100.0, 200.0, 300.0, 40.0, 300.0, 200.0],
'numPolygons': 0,
'sidesofPolygon': [0],
'radiusPolygon': [0.0],
'centerPolygon': [Offset(0, 0)],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
{
'numCircles': 0,
'originCircles': [Offset(0, 0)],
'radiuosCircles': [0.0],
'numRectangles': 6,
'originRectangles': [
Offset(690, 430),
Offset(500, 560),
Offset(430, 130),
Offset(300, 760),
Offset(100, 230),
Offset(100, 460)
],
'widthRectangles': [150.0, 100.0, 200.0, 100.0, 210.0, 210.0],
'heightRectangles': [150.0, 250.0, 50.0, 250.0, 50.0, 300.0],
'numPolygons': 0,
'sidesofPolygon': [3, 3, 5, 4, 4],
'radiusPolygon': [30.0, 40.0, 40.0, 40.0, 50.0],
'centerPolygon': [
Offset(40, 130),
Offset(700, 90),
Offset(600, 200),
Offset(600, 500),
Offset(780, 400)
],
'startCenter': pointPosition[0],
'endCenter': pointPosition[3]
},
{
'numCircles': 0,
'originCircles': [Offset(0, 0)],
'radiuosCircles': [0.0],
'numRectangles': 7,
'originRectangles': [
Offset(300, 130),
Offset(500, 460),
Offset(750, 530),
Offset(600, 130),
Offset(600, 730),
Offset(100, 530),
Offset(350, 460)
],
'widthRectangles': [160.0, 90.0, 150.0, 100.0, 150.0, 300.0, 50.0],
'heightRectangles': [130.0, 270.0, 150.0, 250.0, 100.0, 70.0, 250.0],
'numPolygons': 0,
'sidesofPolygon': [0],
'radiusPolygon': [0.0],
'centerPolygon': [Offset(0, 0)],
'startCenter': pointPosition[2],
'endCenter': pointPosition[1]
},
]
];
List<String> gridAcsPath = [
"assets/images/GridOnlyPositive.svg",
"assets/images/Grid.svg",
"assets/images/Grid_Ac5_Screen.svg",
"assets/images/Grid_Ac6_Screen.svg",
"assets/images/Grid_Ac5_Screen.svg",
"assets/images/Grid_Ac6_Screen.svg",
"assets/images/Grid_Ac7_Screen.svg",
"assets/images/Grid_Ac8_Screen.svg",
];
double _currentSliderValue = 0;
String pauseButtonText = 'Pause';
@override
void initState() {
super.initState();
if (widget.currentgroupID != null) groupID = widget.currentgroupID;
}
//@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: CustomAppBar(),
body: SingleChildScrollView(
// padding: const EdgeInsets.all(10.0),
child: Row(children: <Widget>[
Consumer<Classroom>(
builder: (context, model, child) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 200,
decoration: BoxDecoration(
color: Palette.primaryColor,
border: Border.all(color: Colors.purple),
// borderRadius: new BorderRadius.circular(25.0),
),
child: Text(
'Groups',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
Container(
height: 480,
width: 200,
// margin: const EdgeInsets.all(15.0),
// padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Palette.primaryColor,
border: Border.all(color: Colors.purple),
// borderRadius: new BorderRadius.circular(25.0),
),
child: ListView.builder(
itemCount: thisClass.groups.length,
itemBuilder: (context, int position) {
return ListTile(
leading: Icon(
Icons.group_work,
color: Colors.white,
),
onTap: () {
setState(() {
studentListIndex = position;
groupID = position;
});
},
title: Text(
thisClass.groups[position].id,
style: TextStyle(
color: (studentListIndex == position)
? Colors.blue
: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18),
),
);
})),
Container(
width: 200,
decoration: BoxDecoration(
color: Palette.primaryColor,
border: Border.all(color: Colors.purple),
// borderRadius: new BorderRadius.circular(25.0),
),
child: Text(
'Activities',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18),
)),
Container(
height: 330,
width: 200,
// margin: const EdgeInsets.all(15.0),
// padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Palette.primaryColor,
border: Border.all(color: Colors.purple),
// borderRadius: new BorderRadius.circular(25.0),
),
child: ListView.builder(
itemCount: acList.length,
itemBuilder: (context, int position) {
return ListTile(
leading: Icon(
Icons.description,
color: Colors.white,
),
onTap: () {
setState(() {
activityListIndex = position;
// print(acList.length);
activityID = position;
});
},
title: Text(
acListD[position],
style: TextStyle(
color: (activityListIndex == position)
? Colors.blue
: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18),
),
);
}))
])),
SizedBox(width: 20),
Consumer<Classroom>(
builder: (context, model, child) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 1,
),
Row(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Stack(children: <Widget>[
CircularStepProgressIndicator(
totalSteps: 3,
// currentStep:
// thisClass.groups[position].activities[0].progress,
width: 100,
customColor: (index) => (thisClass.groups.length > 0)
? (thisClass
.groups[groupID]
.activities[activityID]
.progress[index] >
-2
? (thisClass
.groups[groupID]
.activities[activityID]
.progress[index] >
-1
? (thisClass
.groups[groupID]
.activities[activityID]
.progress[index] >
0
? Colors.green
: Colors.blue)
: Colors.red)
: Colors.grey)
: Colors.grey,
),
Positioned(
bottom: 45,
right: 18,
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15),
)),
]),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.group),
Text(
(thisClass.groups.length > 0)
? (' ' + thisClass.groups[groupID].id)
: '',
style: TextStyle(
fontSize: 30.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
],
),
SizedBox(height: 25),
Row(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(children: <Widget>[
Icon(Icons.person),
Text(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID].member1name
: '',
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
]),
SizedBox(width: 20),
Row(children: <Widget>[
Icon(Icons.person),
Text(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID].member2name
: '',
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
]),
SizedBox(width: 20),
Row(children: <Widget>[
Icon(Icons.person),
Text(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID].member3name
: '',
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w500),
),
])
]),
]),
]),
SizedBox(
height: 20,
),
Container(
width: 500,
child: StepProgressIndicator(
totalSteps: 50,
// currentStep: thisClass.groups[position].inactivity.length,
size: 10,
padding: 0,
customColor: (index) => Palette.primaryColor)),
SizedBox(
height: 20,
),
Row(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
infoTile(
(thisClass.groups.length > 0)
? thisClass.groups[groupID].activities[activityID]
.turns[turnID].numAttempts
.toString()
: '0',
'Attempts',
Colors.blue),
infoTileTime(
'Performing in',
(thisClass.groups.length > 0)
? thisClass.groups[groupID].activities[activityID]
.turns[turnID].elapsedTime
: 0,
Colors.blue),
]),
SizedBox(
height: 20,
),
Row(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 400,
height: 400,
child: (activityID > 2)
? celluloMap(
gridAcsPath[activityID],
turnID + 1,
activityID,
true,
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.cellulov
.x
.sublist(
0,
(_currentSliderValue *
thisClass
.groups[groupID]
.activities[
activityID]
.turns[turnID]
.cellulov
.x
.length)
.toInt())
: [0, 0],
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.cellulov
.y
.sublist(
0,
(_currentSliderValue *
thisClass
.groups[groupID]
.activities[
activityID]
.turns[turnID]
.cellulox
.x
.length)
.toInt())
: [0, 0],
400,
400,
)
: Container(
width: 400,
height: 400,
child: Stack(children: <Widget>[
CustomPaint(
//size: Size(200, 200),
painter: MapShapeMaker(
400 / 860,
400 / 860,
mapShape[activityID][turnID]
['numRectangles'],
mapShape[activityID][turnID]
['originRectangles'],
mapShape[activityID][turnID]
['widthRectangles'],
mapShape[activityID][turnID]
['heightRectangles'],
mapShape[activityID][turnID]
['numCircles'],
mapShape[activityID][turnID]
['originCircles'],
mapShape[activityID][turnID]
['radiuosCircles'],
mapShape[activityID][turnID]
['numPolygons'],
mapShape[activityID][turnID]
['sidesofPolygon'],
mapShape[activityID][turnID]
['radiusPolygon'],
mapShape[activityID][turnID]
['centerPolygon'],
mapShape[activityID][turnID]
['startCenter'],
mapShape[activityID][turnID]
['endCenter'])),
celluloMap2(
turnID + 1,
activityID,
true,
(thisClass.groups.length > 0)
? thisClass.groups[groupID].activities[activityID].turns[turnID].cellulov.x
.sublist(
0,
(_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length)
.toInt())
: [0, 0],
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.cellulov
.y
.sublist(
0,
(_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length)
.toInt())
: [0, 0],
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.cellulox
.x
.sublist(
0,
(_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length)
.toInt())
: [0, 0],
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.cellulox
.y
.sublist(
0,
(_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length)
.toInt())
: [0, 0],
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.celluloy
.x
.sublist(0, (_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length).toInt())
: [0, 0],
(thisClass.groups.length > 0) ? thisClass.groups[groupID].activities[activityID].turns[turnID].celluloy.y.sublist(0, (_currentSliderValue * thisClass.groups[groupID].activities[activityID].turns[turnID].cellulox.x.length).toInt()) : [0, 0],
400,
400),
])),
),
Text(
((turnID + 1 > 1)
? ((turnID + 1 > 2)
? 'Third '
: 'Second ')
: 'First ') +
"Turn ",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
Slider(
activeColor: Colors.purple,
value: _currentSliderValue,
min: 0,
max: 1,
// divisions: 5,
// label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
}),
]),
/*
Column(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
infoTile(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.mistakes['slope']
.toString()
: '0',
'Mistakes in finding slope',
Colors.blue),
(activityID == 0)
? infoTile(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.mistakes['initialPoint']
.toString()
: '0',
'Mistakes in finding initial Point',
Colors.blue)
: infoTile(
(thisClass.groups.length > 0)
? thisClass
.groups[groupID]
.activities[activityID]
.turns[turnID]
.mistakes['intercept']
.toString()
: '0',
'Mistakes in finding intercept',
Colors.blue),
])
*/
]),
SizedBox(height: 10),
Row(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(width: 140),
FloatingActionButton(
heroTag: "prevButton",
tooltip: 'Previous Turn',
onPressed: () {
if (turnID > 0) {
setState(() {
turnID = turnID - 1;
});
}
},
child: Icon(Icons.skip_previous),
backgroundColor: Palette.primaryColor,
),
SizedBox(width: 10),
FloatingActionButton(
heroTag: "nextButton",
tooltip: 'Next Turn',
onPressed: () {
// print('turnID' + turnID.toString());
if (turnID < 2) {
setState(() {
turnID = turnID + 1;
});
}
},
child: Icon(Icons.skip_next),
backgroundColor: Palette.primaryColor,
),
]),
SizedBox(height: 40),
Row(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(width: 325),
Container(
width: 200,
child: MaterialButton(
color: Colors.red,
elevation: 0,
onPressed: () {
if (pauseButtonText == 'Pause') {
pauseButtonText = 'Resume';
} else {
pauseButtonText = 'Pause';
// dbRef.child("1").child("isPaused").set(true);
}
if (pauseButtonText == 'Pause')
_database
.reference()
.child(thisClass.sessionID)
.child('groups')
.child(thisClass.groupIDs[groupID])
.child('isPaused')
.set(false);
if (pauseButtonText == 'Resume')
_database
.reference()
.child(thisClass.sessionID)
.child('groups')
.child(thisClass.groupIDs[groupID])
.child('isPaused')
.set(true);
},
child: Container(
padding: EdgeInsets.all(15.0),
child: Text(
pauseButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.w500),
),
),
),
),
SizedBox(width: 20),
],
)
],
),
)
]),
),
);
}
Container infoTile(String title, String count, MaterialColor color) {
return Container(
width: 120,
// margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
Text(
count,
style: const TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.w600,
),
),
],
),
);
}
Container infoTileTime(String title, int count, MaterialColor color) {
return Container(
width: 220,
// margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: color,
// borderRadius: BorderRadius.circular(10.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
((count > 60000)
? ((count / 60000).round().toString() + ' miutes')
: '') +
' ' +
((count % 60000) / 1000).round().toString() +
' Seconds',
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w600,
),
),
],
),
);
}
}

Event Timeline