Advertisement
FiringBlanks

Autocomplete Search (3) HTML

Oct 27th, 2019
134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.55 KB | None | 0 0
  1.  
  2. <!-- <div class="ui centered grid" style="margin-top: 56px;"> -->
  3. <!-- <div class="ui centered grid" style="margin-top: 8vh;"> -->
  4.  
  5. <!-- <span *ngIf="!userExists || ( user.pins < 1 && (user.moderations < 1) ); then splash else dash;"></span> -->
  6.  
  7. <!-- <div>userExists: {{userExists}}</div>
  8. <div>pinsFetched: {{pinsFetched}}</div>
  9. <div>modsFetched: {{modsFetched}}</div> -->
  10.  
  11. <span *ngIf="userExists == false && pinsFetched == 'stopped' && modsFetched == 'stopped'; then splash;"></span>
  12. <span *ngIf="userExists && ( !(user.pins > 0) && !(user.moderations > 0) ); then splash;"></span>
  13. <span *ngIf="userExists && ( user.pins > 0 || (user.moderations > 0) ); then dash;"></span>
  14.  
  15. <ng-template #splash>
  16.  
  17. <iframe style="display: none;" (load)="toggleDisplayGradient(true)" src="" frameborder="0"></iframe>
  18. <iframe style="display: none;" (load)="toggleElevateToolbar(false)" src="" frameborder="0"></iframe>
  19.  
  20. <span *ngIf="windowWidth > 1000; then desktopLayout else mobileLayout"></span>
  21.  
  22. <ng-template #desktopLayout>
  23. <div class="ui two column grid" style="margin-top: 5vh; margin-bottom: 3vh; transform: translateY(7%);">
  24. <div class="column">
  25.  
  26. <!-- <div class="ui icon message" style="margin-top: -64px; transform: translateX(50%);">
  27. <i class="violet rocket icon"></i>
  28. <div class="content">
  29. <div class="ui grid">
  30. <div class="ten wide column">
  31. <div class="header">We're launching soon</div>
  32. <p>Support us on our Product Hunt launch with a vote and earn 200 points!</p>
  33. </div>
  34. <div class="five wide column">
  35. <span *ngIf="userExists; then notifiable else notNotifiable"></span>
  36. <ng-template #notifiable><button class="ui blue button" style="margin-top: 12px;">Notify Me</button></ng-template>
  37. <ng-template #notNotifiable>
  38. <div matTooltip="Must be signed in">
  39. <button class="ui disabled blue button" style="margin-top: 12px;">Notify Me</button>
  40. </div>
  41. </ng-template>
  42. </div>
  43. </div>
  44. </div>
  45. </div> -->
  46.  
  47. <h1 class="ui violet header" style="margin-top: 6vh;">
  48. <span class="ui large text" style="color: #afb1fc; font-family: 'Source Sans Pro'; letter-spacing: 8px;">FIND UPLOADED </span>
  49. <div style="margin-top: 24px;"></div>
  50. <span style="font-family: 'Source Sans Pro'; font-size: 350%;">ANSWERS</span>
  51. <h3 class="sub header" style="margin-top: 14px; font-family: 'Source Sans Pro';">
  52. QuizMeNot is a database of schoolwork assignments, uploaded by students around the world.
  53. <span *ngIf="windowWidth > 890">Find your school in the search box below to search for uploaded classwork.
  54. Click <strong><a (click)="navigateToAboutPage()">here</a></strong> to learn more.
  55. </span>
  56. </h3>
  57. </h1>
  58.  
  59. <form>
  60. <mat-form-field style="width: 50vw; max-width: 400px;" appearance="outline">
  61. <input matInput placeholder="Search for your school..." aria-label="School" [matAutocomplete]="auto" (input)="filterSchools()" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(schoolInput.value)" name="inputField" id="searchInput">
  62. <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
  63. <mat-autocomplete #auto="matAutocomplete">
  64. <mat-option *ngFor="let school of schoolsObs | async" [value]="school.name" (click)="searchButton(school.name)">
  65. <span class="ui tiny header">{{ school.schoolNameDisplay }}</span>
  66. <span *ngIf="school.country == 'United States'; then withState else withoutState"></span>
  67. <ng-template #withState><small> {{school.city}}, {{school.state}}</small></ng-template>
  68. <ng-template #withoutState><small> {{school.city}}, {{school.country}}</small></ng-template>
  69. </mat-option>
  70. <span *ngIf="user; then addSchoolEnabled else addSchoolDisabled"></span>
  71. <ng-template #addSchoolEnabled>
  72. <mat-option (click)="openDialogAddSchool()" style="font-style: italic; padding-bottom: 4px; margin-bottom: 0px;">
  73. <!-- <button class="ui basic violet tertiary button" style="margin-top:6px;"><i class="plus icon"></i>Add school</button> -->
  74. <div class="ui center aligned basic segment" style="padding-bottom: 8px;">
  75. <i class="violet plus icon"></i>
  76. <span class="ui violet text" style="font-style: normal;">Add School</span>
  77. </div>
  78. </mat-option>
  79. </ng-template>
  80. <ng-template #addSchoolDisabled>
  81. <mat-option (click)="addSchoolDisabledClick()" style="font-style: italic; padding-bottom: 4px; margin-bottom: 0px;">
  82. <!-- <button class="ui disabled basic violet tertiary button" style="margin-top:6px;"><i class="plus icon"></i>Add school</button> -->
  83. <div class="ui center aligned basic segment" matTooltip="Must be signed in" style="padding-bottom: 8px;">
  84. <i class="violet plus icon" style="opacity: 0.5;"></i>
  85. <span class="ui violet text" style="font-style: normal; opacity: 0.5;">Add School</span>
  86. </div>
  87. </mat-option>
  88. </ng-template>
  89. </mat-autocomplete>
  90. </mat-form-field>
  91. </form>
  92.  
  93. </div>
  94. <div class="column">
  95. <img class="ui image" style="transform: translateY(-7%);" src="../../assets/images/607-edited_2.png" alt="" oncontextmenu="return false;" onmousedown="return false" (click)="splashPicClicked()">
  96. </div>
  97.  
  98. </div>
  99. </ng-template>
  100.  
  101. <ng-template #mobileLayout>
  102. <div class="ui centered grid" style="margin-bottom: 8vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  103.  
  104. <img class="ui medium fluid image" style="background-size: cover; display: block;" src="../../assets/images/607-edited_2.png">
  105.  
  106. <div class="ui center aligned basic segment">
  107. <h2 class="ui header">
  108. <span class="ui violet text">FIND YOUR SCHOOL</span>
  109. <div class="sub header">
  110. QuizMeNot is a database of schoolwork assignments
  111. uploaded by students around the world.
  112. </div>
  113. </h2>
  114. </div>
  115.  
  116. <form>
  117. <mat-form-field style="width: 50vw; max-width: 400px;" appearance="outline">
  118. <input matInput placeholder="Search schools..." aria-label="School" [matAutocomplete]="auto" (input)="filterSchools()" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(schoolInput.value)" name="inputField" id="searchInput">
  119. <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
  120. <mat-autocomplete #auto="matAutocomplete">
  121. <mat-option *ngFor="let school of schoolsObs | async" [value]="school.name" (click)="searchButton(school.name)">
  122. <span class="ui tiny header">{{ school.schoolNameDisplay }}</span>
  123. <span *ngIf="school.country == 'United States'; then withState else withoutState"></span>
  124. <ng-template #withState><small> {{school.city}}, {{school.state}}</small></ng-template>
  125. <ng-template #withoutState><small> {{school.city}}, {{school.country}}</small></ng-template>
  126. </mat-option>
  127. <mat-option *ngIf="user" (click)="openDialogAddSchool()" style="font-style: italic; padding: 4px; margin: 0px;">
  128. <!-- <button class="ui basic fluid violet tertiary button" style="margin-top:6px;"><i class="plus icon"></i>Add school</button> -->
  129. <div class="ui center aligned basic segment" style="padding-bottom: 8px;">
  130. <i class="violet plus icon"></i>
  131. <span class="ui violet text" style="font-style: normal;">Add School</span>
  132. </div>
  133. </mat-option>
  134. </mat-autocomplete>
  135. </mat-form-field>
  136. </form>
  137.  
  138.  
  139.  
  140. </div>
  141. </ng-template>
  142.  
  143. </ng-template>
  144.  
  145. <ng-template #dash>
  146.  
  147. <!-- <span *ngIf="user.usersMeta.currency; then showCurr else noCurr"></span>
  148. <ng-template #showCurr>
  149. <div>User's currency: {{user.usersMeta.currency}}</div>
  150. </ng-template>
  151. <ng-template #noCurr>
  152. <div>No currency on user</div>
  153. </ng-template> -->
  154.  
  155. <iframe style="display: none;" (load)="toggleDisplayGradient(false)" src="" frameborder="0"></iframe>
  156. <iframe style="display: none;" (load)="toggleElevateToolbar(true)" src="" frameborder="0"></iframe>
  157.  
  158. <div class="ui center aligned basic segment">
  159. <form>
  160. <mat-form-field style="width: 50vw; max-width: 400px;" appearance="outline">
  161. <input matInput placeholder="Search schools..." aria-label="School" [matAutocomplete]="auto" (input)="filterSchools()" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(schoolInput.value)" name="inputField" id="searchInput">
  162. <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
  163. <mat-autocomplete #auto="matAutocomplete">
  164. <mat-option *ngFor="let school of schoolsObs | async" [value]="school.name" (click)="searchButton(school.name)">
  165. <span class="ui tiny header">{{ school.schoolNameDisplay }}</span>
  166. <span *ngIf="school.country == 'United States'; then withState else withoutState"></span>
  167. <ng-template #withState><small> {{school.city}}, {{school.state}}</small></ng-template>
  168. <ng-template #withoutState><small> {{school.city}}, {{school.country}}</small></ng-template>
  169. </mat-option>
  170. <mat-option *ngIf="user" (click)="openDialogAddSchool()" style="font-style: italic; padding-bottom: 4px; margin-bottom: 12px;">
  171. <!-- <button class="ui basic fluid violet tertiary button" style="margin-top:6px;"><i class="plus icon"></i>Add school</button> -->
  172. <div class="ui center aligned basic segment" style="padding-bottom: 8px;">
  173. <i class="violet plus icon"></i>
  174. <span class="ui violet text" style="font-style: normal;">Add School</span>
  175. </div>
  176. </mat-option>
  177. </mat-autocomplete>
  178. </mat-form-field>
  179. </form>
  180. </div>
  181.  
  182. <div class="ui centered grid" style="margin-top: 3vh;">
  183. <div class="twelve wide column">
  184. <h3 class="ui header" *ngIf="(pinnedClasses | async)?.length > 0" style="margin-bottom: 32px; position: relative; left: 57%; transform: translateX(-50%);">
  185. Pinned Classes
  186. </h3>
  187.  
  188. <div class="ui grid" *ngFor="let class of pinnedClasses | async" style="margin-left: -2px;">
  189.  
  190. <div class="column" style="padding-right: 0px; margin-right: -8px;">
  191. <i class="pin icon" matTooltip="Unpin class" matTooltipPosition="before" (click)="unpinClass(class.school, class.teacher, class.className, class.classUID)" style="position: relative; top: 0%; transform: translateY(-50%); transform: rotate(-45deg);"></i>
  192. </div>
  193.  
  194. <div class="thirteen wide column" style="padding-top: 0px; padding-bottom: 0px; padding-right: 4px;">
  195. <mat-expansion-panel class="mat-elevation-z1" style="margin-bottom: 16px;">
  196. <mat-expansion-panel-header>
  197. <mat-panel-title>
  198. <h4 class="ui header">{{class.className}}</h4>
  199. </mat-panel-title>
  200. <mat-panel-description>
  201. {{class.teacher}}
  202. </mat-panel-description>
  203. </mat-expansion-panel-header>
  204. <mat-panel-description>
  205. <table class="ui very basic table">
  206. <tbody>
  207. <tr *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  208. <td class="collapsing">{{assignment.weekDue}}</td>
  209.  
  210. <span *ngIf="assignment.submissions > 0; then bold else unbold"></span>
  211. <ng-template #bold>
  212. <td class="selectable" (click)="openPinnedClassAssignment(class, assignment)"><strong style="margin-left: 12px;">{{assignment.title}}</strong></td>
  213. </ng-template>
  214. <ng-template #unbold>
  215. <td>{{assignment.title}}</td>
  216. </ng-template>
  217.  
  218. <td class="right aligned">{{assignment.type}}</td>
  219. </tr>
  220. </tbody>
  221. </table>
  222. </mat-panel-description>
  223. </mat-expansion-panel>
  224. </div>
  225.  
  226. <div class="column">
  227. <button class="ui basic circular icon button" (click)="navigateToClass(class.school, class.teacher, class.className)" style="position: relative; top: 20%; transform: translateY(-50%);">
  228. <i class="right arrow icon"></i>
  229. </button>
  230. </div>
  231.  
  232. </div>
  233.  
  234. <h3 class="ui header" *ngIf="(moderatingClasses | async)?.length > 0" style="margin-top: 36px; margin-bottom: 28px; position: relative; left: 57%; transform: translateX(-50%);">
  235. Moderating Classes
  236. </h3>
  237.  
  238. <div class="ui grid" *ngFor="let class of moderatingClasses | async; index as i" style="padding-top: 0px; padding-bottom: 0px;">
  239.  
  240. <div class="column" style="padding-top: 4px; padding-bottom: 0px;">
  241. <!-- <i *ngIf="i == 1 || i == 3 || i == 5;" class="info icon" style="position: relative; top: 40%; transform: translateY(-50%); cursor: pointer;"></i> -->
  242. </div>
  243.  
  244. <div class="thirteen wide column" style="padding-top: 4px; padding-bottom: 0px;">
  245. <mat-card style="margin-bottom: 12px; padding-top:0px; height: 52px;" >
  246. <div class="ui grid">
  247. <div class="seven wide column" style="padding-top: 16px;">
  248. <h4 class="ui header">{{class.class}}</h4>
  249. </div>
  250. <div class="four wide column" style="padding-top: 16px;">
  251. <div class="meta"><span class="category">{{class.teacher}}</span></div>
  252. </div>
  253. <div class="five wide column" style="padding-top: 12px;">
  254. <span matTooltip="Current owner" matTooltipPosition="after">
  255. <img src="{{class.currentOwnerPhotoURL}}" alt="" class="ui avatar image" style="padding-top: -8px;">
  256. {{class.currentOwnerName}}
  257. </span>
  258. </div>
  259. </div>
  260. </mat-card>
  261. </div>
  262.  
  263. <div class="column" style="padding-top: 4px; padding-bottom: 0px;">
  264. <button class="ui circular basic icon button" (click)="navigateToClass(class.school, class.teacher, class.className)" style="position: relative; top: 40%; transform: translateY(-50%);">
  265. <i class="right arrow icon"></i>
  266. </button>
  267. </div>
  268.  
  269. </div>
  270.  
  271.  
  272.  
  273. <h3 class="ui header" *ngIf="(createdSchools | async)?.length > 0" style="margin-top: 36px; margin-bottom: 28px; position: relative; left: 57%; transform: translateX(-50%);">
  274. Created Schools
  275. </h3>
  276.  
  277. <div class="ui grid" *ngFor="let school of createdSchools | async">
  278.  
  279. <div class="column" style="padding-top: 4px; padding-bottom: 0px;">
  280. <i class="right floated cog icon" (click)="editSchool(school)" style="position: relative; top: 35%; transform: translateY(-50%) translateX(80%);"></i>
  281. </div>
  282.  
  283. <div class="thirteen wide column" style="padding-top: 4px; padding-bottom: 0px;">
  284. <mat-card style="margin-bottom: 12px; padding-top:0px; height: 52px;">
  285. <div class="ui grid">
  286. <div class="ten wide column" style="padding-top: 16px;">
  287. <h4 class="ui header">{{school.schoolNameDisplay}}</h4>
  288. </div>
  289. <div class="five wide column" style="padding-top: 16px;">
  290. <span *ngIf="school.state; then withState else withCountry"></span>
  291. <ng-template #withState><div class="meta">{{school.city}}, {{school.state}}</div></ng-template>
  292. <ng-template #withCountry><div class="meta">{{school.city}}, {{school.country}}</div></ng-template>
  293. </div>
  294. </div>
  295. </mat-card>
  296. </div>
  297.  
  298. <div class="column" style="padding-top: 4px; padding-bottom: 0px;">
  299. <button class="ui circular basic icon button" (click)="searchButton(school.schoolName)" style="position: relative; top: 40%; transform: translateY(-50%);">
  300. <i class="right arrow icon"></i>
  301. </button>
  302. </div>
  303.  
  304. </div>
  305.  
  306.  
  307. </div>
  308. </div>
  309.  
  310.  
  311. <button class="ui fluid basic button" *ngIf="user.userRole == 'super admin' " style="margin-top: 32px;" (click)="openAdminPanel()">Admin Panel</button>
  312.  
  313.  
  314.  
  315.  
  316. <!-- <div class="ui grid" style="margin-top: 3vh;">
  317.  
  318. <div class="four wide column" style="margin-bottom: 32px;">
  319. <h4 class="ui header" style="position: relative; left: 75%; transform: translateX(-50%);">Moderating Classes</h4>
  320.  
  321. <div class="ui link card" *ngFor="let class of moderatingClasses | async; index as i" (click)="navigateToClass(class.school, class.teacher, class.className)">
  322. <div class="content">
  323. <div class="header">{{class.class}}</div>
  324. <div class="meta"><span class="category">{{class.teacher}}</span></div>
  325. </div>
  326. <div class="extra content">
  327. <div class="center aligned author">
  328. <img src="{{class.currentOwnerPhotoURL}}" alt="" class="ui avatar image"> {{class.currentOwnerName}}
  329. </div>
  330. </div>
  331. </div>
  332.  
  333. </div>
  334. <div class="eight wide column">
  335. <h4 class="ui header" style="position: relative; left: 85%; transform: translateX(-50%); padding-bottom: 14px;">Pinned Classes</h4>
  336.  
  337. <div class="ui grid" *ngFor="let class of pinnedClasses | async">
  338.  
  339. <div class="column" style="padding-right: 0px; margin-right: -8px;">
  340. <i class="pin icon" matTooltip="Unpin class" matTooltipPosition="before" (click)="unpinClass(class.school, class.teacher, class.className, class.classUID)" style="position: relative; top: 0%; transform: translateY(-50%); transform: rotate(-45deg);"></i>
  341. </div>
  342.  
  343. <div class="thirteen wide column" style="padding-top: 0px; padding-bottom: 0px;">
  344. <mat-expansion-panel class="mat-elevation-z1" style="margin-bottom: 16px;">
  345. <mat-expansion-panel-header>
  346. <mat-panel-title><h4 class="ui header">{{class.className}}</h4></mat-panel-title>
  347. <mat-panel-description>{{class.teacher}}</mat-panel-description>
  348. </mat-expansion-panel-header>
  349. <mat-panel-description>
  350. <table class="ui very basic table">
  351. <tbody>
  352. <tr *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  353. <td class="collapsing">{{assignment.weekDue}}</td>
  354. <td>{{assignment.title}}</td>
  355. <td class="right aligned">{{assignment.type}}</td>
  356. </tr>
  357. </tbody>
  358. </table>
  359. </mat-panel-description>
  360. </mat-expansion-panel>
  361. </div>
  362.  
  363. <div class="column">
  364. <button class="ui basic circular icon button" (click)="navigateToClass(class.school, class.teacher, class.className)" style="position: relative; top: 20%; transform: translateY(-50%);">
  365. <i class="right arrow icon"></i>
  366. </button>
  367. </div>
  368.  
  369. </div>
  370.  
  371. </div>
  372. <div class="four wide column">
  373.  
  374. <h4 class="ui header" style="position: relative; left: 85%; transform: translateX(-50%);">Created Schools</h4>
  375.  
  376. <div class="ui card" *ngFor="let school of createdSchools | async">
  377. <div class="content">
  378. <i class="right floated cog icon" (click)="editSchool(school)"></i>
  379. <div class="header">{{school.schoolName}}</div>
  380. <span *ngIf="school.state; then withState else withCountry"></span>
  381. <ng-template #withState><div class="meta">{{school.city}}, {{school.state}}</div></ng-template>
  382. <ng-template #withCountry><div class="meta">{{school.city}}, {{school.country}}</div></ng-template>
  383. </div>
  384. <div class="ui bottom attached button" (click)="searchButton(school.schoolName)">View</div>
  385. </div>
  386. </div>
  387. </div> -->
  388.  
  389.  
  390.  
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397. <!-- <div class="ui center aligned two column grid" style="margin-top: 3vh;">
  398.  
  399. <div class="ui basic center aligned segment">
  400. <h1 class="ui violet header">
  401. Find your school
  402. <h3 class="sub header" style="margin-top: 8px;">
  403. QuizMeNot is a library of schoolwork assignments uploaded by students around the world.
  404. <span *ngIf="windowWidth > 660">Find your school in the search box below.</span>
  405. </h3>
  406. </h1>
  407.  
  408. <form>
  409. <mat-form-field style="width: 50vw; max-width: 400px;" appearance="outline">
  410. <input matInput placeholder="Search schools..." aria-label="School" [matAutocomplete]="auto" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(schoolInput.value)" name="inputField" id="searchInput">
  411. <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
  412. <mat-autocomplete #auto="matAutocomplete">
  413. <mat-option *ngFor="let school of schools | async" [value]="school.name">
  414. <span class="ui tiny header">{{ school.name }}</span>
  415. <span *ngIf="school.country == 'United States'; then withState else withoutState"></span>
  416. <ng-template #withState><small> {{school.city}}, {{school.state}}</small></ng-template>
  417. <ng-template #withoutState><small> {{school.city}}, {{school.country}}</small></ng-template>
  418. </mat-option>
  419. <mat-option *ngIf="user" (click)="openDialogAddSchool()" style="font-style: italic; padding-bottom: 4px; margin-bottom: 12px;">
  420. <button class="ui basic fluid violet button" style="margin-top:6px;"><i class="plus icon"></i>Add school</button>
  421. </mat-option>
  422. </mat-autocomplete>
  423. </mat-form-field>
  424. </form>
  425.  
  426. </div>
  427.  
  428.  
  429.  
  430. <div class="column">
  431. <h3 class="ui violet header">Pinned Classes</h3>
  432.  
  433. <iframe style="display: none;" (load)="toggleDisplayGradient(false)" src="" frameborder="0"></iframe>
  434.  
  435. <mat-tab-group disableRipple="true" style="min-width: 15vw; max-width: 50vw;">
  436. <mat-tab *ngFor="let class of pinnedClasses | async" label="{{class.className}}">
  437.  
  438. <div class="ui basic segment" style="margin-bottom: 0px;">
  439. <h4 class="ui header" style="margin-top: 2px;">{{class.teacher}}</h4>
  440. </div>
  441.  
  442. <table class="ui selectable table" style="margin-top: 0px;">
  443. <tbody>
  444. <tr *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  445. <td class="collapsing">{{assignment.weekDue}}</td>
  446. <td>{{assignment.title}}</td>
  447. <td class="right aligned">{{assignment.type}}</td>
  448. </tr>
  449. </tbody>
  450. </table>
  451.  
  452. <iframe (load)="setCurrentPinnedVariables(class)" style="display: none;"></iframe>
  453.  
  454. </mat-tab>
  455. </mat-tab-group>
  456.  
  457. <div class="ui row" style="padding-top: 0px;" *ngIf="(pinnedClasses | async)?.length > 0">
  458. <button class="ui circular icon button" style="margin-right: 8px;" matTooltip="Unpin class" matTooltipPosition="before" (click)="unpinClass(currentlySelectedPinnedSchool, currentlySelectedPinnedTeacher, currentlySelectedPinnedClass, currentlySelectedPinnedClassUID)"><i class="right floated pin icon" style="transform: rotate(45deg);"></i></button>
  459. <button class="ui circular violet button" (click)="navigateToClass(currentlySelectedPinnedSchool, currentlySelectedPinnedTeacher, currentlySelectedPinnedClass)">View Teacher</button>
  460. <button class="ui icon button" *ngIf="user.userRole == 'super admin' " (click)="openAdminPanel()">
  461. <i class="cloud icon"></i>
  462. </button>
  463. </div>
  464.  
  465.  
  466. </div>
  467. <div class="column">
  468. <h3 class="ui violet header">Moderating Classes</h3>
  469.  
  470. <div class="ui two link centered cards" style="margin-top: 52px;">
  471.  
  472. <div class="card" id="moderatingClasses" *ngFor="let class of moderatingClasses | async; index as i" (click)="navigateToClass(class.school, class.teacher, class.className)">
  473. <div *ngIf="!class">Not moderating any classes yet.</div>
  474. <div class="content">
  475. <div class="center aligned grid">
  476. <h4 class="header" style="margin-bottom: 8px;">{{class.class}}</h4>
  477. <div class="description">{{class.teacher}}</div>
  478. </div>
  479. </div>
  480. </div>
  481.  
  482. </div>
  483.  
  484. </div>
  485.  
  486. </div> -->
  487.  
  488.  
  489.  
  490.  
  491.  
  492.  
  493.  
  494.  
  495.  
  496.  
  497.  
  498. <!-- --------------------- -->
  499.  
  500. <!-- <div class="ui center aligned basic segment" *ngIf="(pinnedClasses | async)?.length > 0">
  501. <h3 class="ui violet header">Pinned Classes</h3>
  502. </div> -->
  503.  
  504. <!-- <div class="ui centered grid" style="margin-bottom: 24px;" >
  505.  
  506. <mat-tab-group disableRipple="true" style="min-width: 40vw; max-width: 50vw;">
  507. <mat-tab *ngFor="let class of pinnedClasses | async" label="{{class.className}}">
  508.  
  509. <div class="ui basic segment" style="margin-bottom: 0px;">
  510. <h4 class="ui header" style="margin-top: 2px;">{{class.teacher}}</h4>
  511. </div>
  512.  
  513. <table class="ui selectable table" style="margin-top: 0px;">
  514. <tbody>
  515. <tr *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  516. <td class="collapsing">{{assignment.weekDue}}</td>
  517. <td>{{assignment.title}}</td>
  518. <td class="right aligned">{{assignment.type}}</td>
  519. </tr>
  520. </tbody>
  521. </table>
  522.  
  523. <iframe (load)="setCurrentPinnedVariables(class)" style="display: none;"></iframe>
  524.  
  525. </mat-tab>
  526. </mat-tab-group>
  527.  
  528. <div class="ui row" style="padding-top: 0px;" *ngIf="(pinnedClasses | async)?.length > 0">
  529. <button class="ui circular icon button" style="margin-right: 8px;" matTooltip="Unpin class" matTooltipPosition="before" (click)="unpinClass(currentlySelectedPinnedSchool, currentlySelectedPinnedTeacher, currentlySelectedPinnedClass, currentlySelectedPinnedClassUID)"><i class="right floated pin icon" style="transform: rotate(45deg);"></i></button>
  530. <button class="ui circular violet button" (click)="navigateToClass(currentlySelectedPinnedSchool, currentlySelectedPinnedTeacher, currentlySelectedPinnedClass)">View Teacher</button>
  531. </div>
  532.  
  533.  
  534. </div> -->
  535.  
  536.  
  537. <!-- <div class="ui center aligned basic segment" *ngIf="(moderatingClasses | async)?.length > 0">
  538. <h3 class="ui violet header">Moderating Classes</h3>
  539. </div> -->
  540.  
  541. <!-- [ngClass]="color" (mouseover)="color='violet' " (mouseout)="color=none" -->
  542.  
  543. <!-- <div class="ui centered link cards" style="margin-bottom: 32px;">
  544. <div class="card" id="moderatingClasses" *ngFor="let class of moderatingClasses | async; index as i" (click)="navigateToClass(class.school, class.teacher, class.className)">
  545. <div class="content">
  546. <div class="center aligned grid">
  547. <h4 class="header" style="margin-bottom: 8px;">{{class.class}}</h4>
  548. <div class="description">{{class.teacher}}</div>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553.  
  554. <div *ngIf="user.userRole == 'super admin' " style="margin-top: 64px;">
  555. <button class="ui button" (click)="openAdminPanel()">Admin Panel</button>
  556. </div> -->
  557.  
  558.  
  559. </ng-template>
  560.  
  561. <!-- </div> -->
  562.  
  563. <!-- <button class="ui button" (click)="testButton()">Test Button</button> -->
  564.  
  565.  
  566.  
  567. <div *ngIf="userExists" style="margin-top: 32px;">
  568.  
  569.  
  570.  
  571. <!-- <div class="ui three cards">
  572.  
  573. <div class="ui card" *ngFor="let class of pinnedClasses | async">
  574. <div class="content">
  575. <i class="right floated pin icon" matTooltip="Unpin class" matTooltipPosition="after" (click)="unpinClass(class.school, class.teacher, class.className, class.classUID)"></i>
  576. <div class="ui grid">
  577. <div class="two column row">
  578. <div class="column">
  579. <div class="ui content">
  580. <h4 class="header" style="margin-bottom: 0px;">{{class.className}}</h4>
  581. <div class="meta">{{class.teacher}}</div>
  582. </div>
  583. </div>
  584. <div class="column">
  585. <button class="ui basic icon button" matTooltip="Syllabus" matTooltipPosition="above"><i class="list icon"></i></button>
  586. <button class="ui basic icon button" matTooltip="Files" matTooltipPosition="above"><i class="folder icon"></i></button>
  587. <button class="ui basic icon button" matTooltip="Links" matTooltipPosition="above"><i class="external icon"></i></button>
  588. </div>
  589. </div>
  590. </div>
  591. <div>
  592. </div>
  593.  
  594.  
  595. <div class="ui list">
  596. <div class="item" *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  597. <div class="content">
  598. <table class="ui very basic table">
  599. <tbody>
  600. <tr>
  601. <td>{{assignment.weekDue}}</td>
  602. <td>{{assignment.title}}</td>
  603. <td>{{assignment.type}}</td>
  604. </tr>
  605. </tbody>
  606. </table>
  607.  
  608. </div>
  609. </div>
  610. </div>
  611.  
  612. </div>
  613.  
  614. <div class="ui bottom attached blue button" (click)="navigateToClass(class.school, class.teacher, class.className)">
  615. View Teacher
  616. </div>
  617. </div>
  618.  
  619. </div> -->
  620.  
  621.  
  622. <!-- ------------------------------- -->
  623.  
  624. <!-- <mat-card *ngFor="let class of pinnedClasses | async" style="width: 350px; display: inline-block; margin: 4px; justify-content: center; ">
  625.  
  626. <div class="ui grid">
  627. <div class="thirteen wide column" style="padding: 0px;">
  628. <mat-card-header>
  629. <mat-card-title>
  630. <h4 class="ui header">
  631. {{class.className}}
  632. <div class="sub header">{{class.teacher}}</div>
  633. </h4>
  634. </mat-card-title>
  635. </mat-card-header>
  636. </div>
  637. <div class="one wide column" style="padding: 0px;">
  638. <div class="ui basic right aligned segment" style="padding: 0px; margin-right: -16px;">
  639. <i class="right floated pin icon" style="margin-right: 0px; transform: rotate(45deg);" matTooltip="Unpin class" matTooltipPosition="after" (click)="unpinClass(class.school, class.teacher, class.className, class.classUID)"></i>
  640. </div>
  641. </div>
  642. </div>
  643.  
  644. <mat-card-content style="margin-top: 4px;">
  645. <table class="ui very basic table">
  646. <tbody>
  647. <tr *ngFor="let assignment of class.assignmentsObj | orderBy : ['weekDue'] ">
  648. <td>{{assignment.weekDue}}</td>
  649. <td>{{assignment.title}}</td>
  650. <td>{{assignment.type}}</td>
  651. </tr>
  652. </tbody>
  653. </table>
  654. </mat-card-content>
  655. <mat-card-actions style="padding-top: 0px;">
  656. <button class="ui violet fluid button" (click)="navigateToClass(class.school, class.teacher, class.className)">View Teacher</button>
  657. </mat-card-actions>
  658. </mat-card> -->
  659.  
  660. <!-- ------------------------------- -->
  661.  
  662.  
  663. </div>
  664.  
  665. <!-- <button class="ui button" (click)="showNewUserDialog()">Show New User Dialog</button> -->
  666.  
  667. <!-- <button class="ui button" (click)="asyncTest()">Test Async</button>
  668. <button class="ui button" (click)="updateCounts(null, null, 0)">Test AFS Counts</button>
  669. <button class="ui button" (click)="generateDate()">Generate Today's Date</button> -->
  670. <!-- <div class="ui button" (click)="updateTokenTest()">Update token</div> -->
  671.  
  672. <!-- Current Date: {{ date | date: 'MM/dd/yyyy'}} -->
  673.  
  674. <!-- <div style="margin-top: 100px;"></div>
  675.  
  676. <button class="ui button" (click)="sendAlertTest()">Send Alert</button>
  677. <button class="ui button" (click)="sendAlertTestWithoutSettingMassDelete()">Send Alert WO setting MD</button>
  678.  
  679. <button class="ui button" (click)="doAsync()">Do something async</button> -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement