reimplement eventlineup slots, eventsheet refinements

fixed the loop in eventlineup slots so they will show duplicate eventlineupentries if they exist
refined some styling in eventsheet

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@teamsnap/teamsnap-ui": "^3.12.3",
-        "better-sqlite3": "^9.4.1",
+        "better-sqlite3": "^9.6.0",
         "better-sqlite3-session-store": "^0.1.0",
         "bootstrap": "^5.3.1",
         "bootstrap-icons": "^1.10.5",
@@ -813,9 +813,9 @@
       }
     },
     "node_modules/better-sqlite3": {
-      "version": "9.4.1",
+      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-9.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-9.6.0.tgz",
-      "integrity": "sha512-QpqiQeMI4WkE+dQ68zTMX5OzlPGc7lXIDP1iKUt4Omt9PdaVgzKYxHIJRIzt1E+RUBQoFmkip/IbvzyrxehAIg==",
+      "integrity": "sha512-yR5HATnqeYNVnkaUTf4bOP2dJSnyhP4puJN/QPRyx4YkBEEUxib422n2XzPqDEHjQQqazoYoADdAm5vE15+dAQ==",
       "hasInstallScript": true,
       "dependencies": {
         "bindings": "^1.5.0",
@@ -1618,9 +1618,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
       "engines": {
         "node": ">=8"
       }
@@ -3270,9 +3270,9 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/node-abi": {
-      "version": "3.54.0",
+      "version": "3.62.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.54.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.62.0.tgz",
-      "integrity": "sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==",
+      "integrity": "sha512-CPMcGa+y33xuL1E0TcNIu4YyaZCxnnvkVaEXrsosR3FxN+fV8xvb7Mzpb7IgKler10qeMkE6+Dp8qJhpzdq35g==",
       "dependencies": {
         "semver": "^7.3.5"
       },
@@ -3719,9 +3719,9 @@
       }
     },
     "node_modules/prebuild-install": {
-      "version": "7.1.1",
+      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
-      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
       "dependencies": {
         "detect-libc": "^2.0.0",
         "expand-template": "^2.0.3",

package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@teamsnap/teamsnap-ui": "^3.12.3",
-    "better-sqlite3": "^9.4.1",
+    "better-sqlite3": "^9.6.0",
     "better-sqlite3-session-store": "^0.1.0",
     "bootstrap": "^5.3.1",
     "bootstrap-icons": "^1.10.5",

src/controllers/eventlineup.js

@@ -5,100 +5,7 @@ const tsUtils = require('../lib/utils')
 const { loadEventLineupEntries } = require('teamsnap.js')
 
 exports.partials = path.join(__dirname, "../views/eventlineup/partials")
-
+exports.helpers = require('../helpers/eventlineup.js')
-const statusCodeIcons = {
-  1: embeddedSvgFromPath("/teamsnap-ui/assets/icons/check.svg"),
-  0: embeddedSvgFromPath("/teamsnap-ui/assets/icons/dismiss.svg"),
-  2: embeddedSvgFromPath("/bootstrap-icons/question-lg.svg"),
-  null: embeddedSvgFromPath("/bootstrap-icons/question.svg"),
-  undefined: embeddedSvgFromPath("/bootstrap-icons/question-lg.svg")
-}
-
-const statusCodeClasses = {
-  1: "u-colorPositive",
-  0: "u-colorNegative",
-  2: "u-colorPrimary",
-  null: "u-colorGrey",
-  undefined: "u-colorGrey"
-}
-
-const statusCodeButtonClasses = {
-  1: "Button--yes",
-  0: "Button--no",
-  2: "Button--maybe",
-  null: "",
-  undefined: ""
-}
-
-exports.helpers = {
-  flagsString: (flags) => {
-    return flags != null ? Array.from(flags).join(",") : ''
-  },
-  plus1: (i) => Number(i)+1,
-  positions: () => ["P", "C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "EH", "DH", "DR"],
-  defense_positions: () => ["C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "P"],
-  avail_status_code_class: (status_code) => statusCodeButtonClasses[status_code],
-  avail_status_code_icon: (status_code) => statusCodeIcons[status_code],
-  positionLabelWithoutFlags: (label) => {
-    const {positionLabelWithoutFlags} = parsePositionLabel(label);
-    return positionLabelWithoutFlags
-  },
-  positionLabelWithoutPOFlag: (label) => {
-    const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
-    positionFlags.delete('PO')
-    return compilePositionLabel(positionLabelWithoutFlags, positionFlags)
-  },
-  positionFlags: (label)=> {
-    const {positionFlags} = parsePositionLabel(label);
-    return `[${Array.from(positionFlags).join(",")}]`
-  },
-  hasPositionFlags: (label) => {
-    const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
-    return positionFlags.size > 0;
-  },
-  comparePositionWithFlags: (labelWithoutFlags, eventLineupEntry, options) => {
-    labelWithFlags = eventLineupEntry?.label
-    const {positionLabelWithoutFlags} = parsePositionLabel(labelWithFlags);
-    return positionLabelWithoutFlags == labelWithoutFlags;
-  },
-  isStarting: (member) => {
-    return (member.benchcoach?.eventLineupEntry != null);
-  },
-  isInStartingLineup: (member) => {
-    if (member.benchcoach.eventLineupEntry == null || member.benchcoach.eventLineupEntry.label == '') return false;
-    const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
-    return (!positionFlags.has("PO"))
-  },
-  isInPositionOnly: (member) => {
-    if (!member.benchcoach || member.benchcoach.eventLineupEntry == null) return false;
-    const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
-    return (member.benchcoach.eventLineupEntry != null && positionFlags.has("PO"))
-  },
-  isInBench: (member) => {
-    if ((member.benchcoach.eventLineupEntry != null && member.benchcoach.eventLineupEntry.label != '') || member.isNonPlayer) return false;
-    return (member.benchcoach.availability?.statusCode != 0 && member.benchcoach.availability?.statusCode != null)
-  },
-  isInOut: (member) => {
-    if ((member.benchcoach.eventLineupEntry != null && member.benchcoach.eventLineupEntry.label != '') || member.isNonPlayer) return false;
-    return (member.benchcoach.availability?.statusCode == 0 || member.benchcoach.availability?.statusCode == null)
-  },
-  availabilityStatusShort: (availability) => {
-    const {YES, MAYBE, NO, NONE} = teamsnap.AVAILABILITIES
-    const statusShortLookup = {}
-    statusShortLookup[YES] = "YES"
-    statusShortLookup[MAYBE] = "MAY"
-    statusShortLookup[NO] = "NO"
-    statusShortLookup[NONE] = "UNK"
-    statusShortLookup[undefined] = "UNK"
-    return (statusShortLookup[availability?.statusCode])
-  },
-  filterNonPlayers: (members) => {
-    return members.filter(m=>!m.isNonPlayer)
-  },
-  joinMemberEmailAddresses: (members) => {
-    return members.map(m=>m.emailAddresses.join(',')).join(',')
-  }
-}
 
 exports.getEventLineup = async (req, res)=>{
   await Promise.all(req.promises)
@@ -110,7 +17,7 @@ exports.getEventLineup = async (req, res)=>{
     "/js/eventlineup.js",
     "/js/tinymce.min.js"
   ]
-  res.render("eventlineup/edit", {user, team, members, event, scripts, layout, event_lineup, event_lineup_entries, availabilitySummary, csrfToken})
+  res.render("eventlineup/edit", {user, team, members, event, availabilities, scripts, layout, event_lineup, event_lineup_entries, availabilitySummary, csrfToken})
 }
 
 exports.getAdjacentEventLineup = async (req, res) => {

src/helpers/eventlineup.js

@@ -0,0 +1,119 @@
+const {embeddedSvgFromPath, parsePositionLabel, compilePositionLabel} = require("../lib/utils")
+var hb = require('hbs').create();
+
+const statusCodeIcons = {
+  1: embeddedSvgFromPath("/teamsnap-ui/assets/icons/check.svg"),
+  0: embeddedSvgFromPath("/teamsnap-ui/assets/icons/dismiss.svg"),
+  2: embeddedSvgFromPath("/bootstrap-icons/question-lg.svg"),
+  null: embeddedSvgFromPath("/bootstrap-icons/question.svg"),
+  undefined: embeddedSvgFromPath("/bootstrap-icons/question-lg.svg")
+}
+
+const statusCodeClasses = {
+  1: "u-colorPositive",
+  0: "u-colorNegative",
+  2: "u-colorPrimary",
+  null: "u-colorGrey",
+  undefined: "u-colorGrey"
+}
+
+const statusCodeButtonClasses = {
+  1: "Button--yes",
+  0: "Button--no",
+  2: "Button--maybe",
+  null: "",
+  undefined: ""
+}
+exports.flagsString = (flags) => {
+  return flags != null ? Array.from(flags).join(",") : ''
+};
+exports.plus1 = (i) => Number(i)+1;
+exports.positions = () => ["P", "C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "EH", "DH", "DR"];
+exports.defense_positions = () => ["C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "P"];
+exports.avail_status_code_class = (status_code) => statusCodeButtonClasses[status_code];
+exports.avail_status_code_icon = (status_code) => statusCodeIcons[status_code];
+exports.positionLabelWithoutFlags = (label) => {
+  const {positionLabelWithoutFlags} = parsePositionLabel(label);
+  return positionLabelWithoutFlags
+};
+exports.positionLabelWithoutPOFlag = (label) => {
+  const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
+  positionFlags.delete('PO')
+  return compilePositionLabel(positionLabelWithoutFlags, positionFlags)
+};
+exports.positionFlags = (label)=> {
+  const {positionFlags} = parsePositionLabel(label);
+  return `[${Array.from(positionFlags).join(",")}]`
+};
+exports.hasPositionFlags = (label) => {
+  const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
+  return positionFlags.size > 0;
+};
+exports.comparePositionWithFlags = (labelWithoutFlags, eventLineupEntry, options) => {
+  labelWithFlags = eventLineupEntry?.label
+  const {positionLabelWithoutFlags} = parsePositionLabel(labelWithFlags);
+  return positionLabelWithoutFlags == labelWithoutFlags;
+};
+exports.isStarting = (member) => {
+  return (member.benchcoach?.eventLineupEntry != null);
+};
+exports.isInStartingLineup = (member) => {
+  if (member.benchcoach.eventLineupEntry == null || member.benchcoach.eventLineupEntry.label == '') return false;
+  const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
+  return (!positionFlags.has("PO"))
+};
+exports.isInPositionOnly = (member) => {
+  if (!member.benchcoach || member.benchcoach.eventLineupEntry == null) return false;
+  const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
+  return (member.benchcoach.eventLineupEntry != null && positionFlags.has("PO"))
+};
+exports.isInBench = (member) => {
+  if ((member.benchcoach.eventLineupEntry != null && member.benchcoach.eventLineupEntry.label != '') || member.isNonPlayer) return false;
+  return (member.benchcoach.availability?.statusCode != 0 && member.benchcoach.availability?.statusCode != null)
+};
+exports. isInOut = (member) => {
+  if ((member.benchcoach.eventLineupEntry != null && member.benchcoach.eventLineupEntry.label != '') || member.isNonPlayer) return false;
+  return (member.benchcoach.availability?.statusCode == 0 || member.benchcoach.availability?.statusCode == null)
+};
+exports.availabilityStatusShort = (availability) => {
+  const {YES, MAYBE, NO, NONE} = teamsnap.AVAILABILITIES
+  const statusShortLookup = {}
+  statusShortLookup[YES] = "YES"
+  statusShortLookup[MAYBE] = "MAY"
+  statusShortLookup[NO] = "NO"
+  statusShortLookup[NONE] = "UNK"
+  statusShortLookup[undefined] = "UNK"
+  return (statusShortLookup[availability?.statusCode])
+};
+exports.filterNonPlayers = (members) => {
+  return members.filter(m=>!m.isNonPlayer)
+};
+exports.joinMemberEmailAddresses = (members) => {
+  return members.map(m=>m.emailAddresses.join(',')).join(',')
+}
+exports.loadSlots = (options) =>{
+  var s = ""
+  const {members, event_lineup, event_lineup_entries, event, availabilities} = options.data.root
+  event_lineup_entries.forEach(eventLineupEntry =>{
+    const availability = availabilities.find(a=>a.memberId==eventLineupEntry.memberId)
+    const member = members.find(m=>m.id==eventLineupEntry.memberId)
+    const {positionFlags} = parsePositionLabel(eventLineupEntry.label)
+    const initial_slotset = `lineup-${positionFlags.has('PO') ? 'positiononly' : 'starting'}-${event.id}`
+    
+    s+=options.fn({eventLineupEntry, availability, member, event, initial_slotset})
+  })
+  const players_without_lineup_entry = members.filter(
+    member=>!event_lineup_entries.map(lue=>lue.memberId).includes(member.id) && !member.isNonPlayer
+    )
+  players_without_lineup_entry.forEach(member =>{
+      const availability = availabilities.find(a=>a.memberId==member.id)
+      let initial_slotset
+      if (availability.statusCode == 0 || availability.statusCode == null) {
+        initial_slotset =`lineup-out-${event.id}`
+      } else {
+        initial_slotset =`lineup-bench-${event.id}`
+      }
+      s+=options.fn({availability, member, event, initial_slotset})
+    })
+  return s
+}

src/lib/utils.js

@@ -84,6 +84,10 @@ const getPluralType = (type) =>{
   // is not generated in the lookup. this is a
   // kludge around that. (specifically availabilitySummary)
   plural = teamsnap.getPluralType(type) || (function() {
+    if (type === undefined){
+      return type
+    }
+
     switch (type.slice(-1)) {
       case 'y':
         return type.slice(0, -1) + 'ies';

src/public/css/eventsheet.css

@@ -153,13 +153,53 @@ table tr th:empty::after, table tr td:empty::after {
   flex-direction: column;
   align-items: stretch;
 }
-
 .eventsheet > section > div {
   display: flex;
   flex: 1;
   align-items: stretch;
   height: auto;
 }
+.eventsheet > section.NW {
+  grid-area: 1/1/2/2;
+}
+.eventsheet > section.NE {
+  grid-area: 1/2/2/3;
+}
+.eventsheet > section.SW {
+  grid-area: 2/1/3/2;
+}
+.eventsheet > section.SE {
+  grid-area: 2/2/3/3;
+}
+
+.eventsheet > .section-divider {
+  position: absolute;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  --divider-border: lightgrey dashed 1px;
+}
+.eventsheet > .section-divider .NW {
+  grid-area: 1/1/2/2;
+  border-right: var(--divider-border);
+  border-bottom: var(--divider-border);
+}
+.eventsheet > .section-divider .NE {
+  grid-area: 1/2/2/3;
+  border-bottom: var(--divider-border);
+}
+.eventsheet > .section-divider .SW {
+  grid-area: 2/1/3/2;
+  border-right: var(--divider-border);
+}
+.eventsheet > .section-divider .SE {
+  grid-area: 2/2/3/3;
+}
 
 .lineup-card th {
   width: inherit;
@@ -224,7 +264,7 @@ section.lineup-card th.sequence.counter::before {
 }
 
 .lineup-card table {
-  font-size: 22px;
+  font-size: 21px;
 }
 
 .lineup-card td {
@@ -703,6 +743,11 @@ header {
 }
 #roster-and-history th.availability-on-day div {
   transform: rotate(270deg);
+  margin-bottom: -5;
+  /* font-stretch: 40%; */
+  font-stretch: 75%;
+  font-weight: 500;
+  text-align: left;
 }
 #roster-and-history thead > tr, #roster-and-history tfoot > tr {
   border-bottom: solid black 1px;
@@ -735,14 +780,6 @@ td.is-present-checkbox.available-status-code-None > span {
   display: none;
 }
 
-.game-number .label {
-  font-size: xx-small;
-}
-
-.game-number .label, .game-number .value {
-  display: none;
-}
-
 #front-cover {
   border: solid 1px black;
 }
@@ -759,10 +796,18 @@ td.is-present-checkbox.available-status-code-None > span {
 }
 #front-cover .game-number, #front-cover .homeaway {
   display: grid;
-  font-size: xx-large;
   align-content: center;
   width: 1.4em;
+}
+#front-cover .homeaway {
   font-weight: 800;
+  font-size: xx-large;
+}
+#front-cover .game-number {
+  font-size: large;
+  font-stretch: extra-condensed;
+  font-weight: 700;
+  text-wrap: nowrap;
 }
 #front-cover .title {
   display: grid;

src/public/css/eventsheet.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AACA;EACE;IACE;;EAEF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;;AAGF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKF;EACE;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQN;EACE;;;AAGF;AACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;;;AAGF;EACE;;AACA;EACE;;AAEF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAeV;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAMI;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAUZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACI;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAON;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;AACA;AACA;AACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AASA;EACE;;AAEF;AACE;EACA;EACA;AACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/eventsheet.scss"],"names":[],"mappings":";AAAQ;AACA;AACA;AACA;AACA;AAER;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;AACA;EACE;IACE;;EAEF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAKA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;;AAKN;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA,qBACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQN;EACE;;;AAGF;AACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;;;AAGF;EACE;;AACA;EACE;;AAEF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA,qBACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAQJ;EACE;EACA;EACA;;AAEF;EACE;;;AAON;EACE;;AAGF;EACE;;AAIA;EACE;EACA;;AAMF;EACE;;AAGF;EAOE;EACA;EACA;EACA;;AATA;EACE;;AACA;EACE;;;AAeV;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAMI;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAIR;EACE,SALM;;AAUZ;EACE;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAIE;EACA;EACA;;AALA;EACE;;AAKF;EACI;;;AASV;EACE;AACA;EACA;EAEA;EACA;AACA;;AAEA;EACE;EACA;;AAGF;EACE;;AACA;EACE;;;AAON;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;AACA;AACA;AACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AASA;EACE;;AAEF;AACE;EACA;EACA;AACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;AACA;EACA;EACA;EACA;;AAQJ;EACE;;AAGF;EACE;;AAGF;EACE;;;AAOJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;AACA;AAAA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACI;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"eventsheet.css"}

src/public/js/eventlineup.js

@@ -635,8 +635,18 @@ function insertLineup(direction, teamId, eventId, element) {
 
 }
 
+function initSlots () {
+  const slots = Array.from(document.querySelectorAll('.lineup-slot'))
+  slots.forEach(slot=>{
+    console.log(slot,`.${slot.dataset.initialSlotset}`)
+    const parent = document.querySelector(`#${slot.dataset.initialSlotset}`)
+    parent.appendChild(slot)
+    slot.removeAttribute('data-initial-slotset')
+  })
+}
 function initPage (){
   colorPositions();
+  initSlots();
   initFlagsCheckboxes();
 	refreshLineup();
   for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {

src/scss/eventsheet.scss

@@ -153,10 +153,6 @@ table {
   float: left;
 }
 
-
-
-
-
 .B5 > .eventsheet {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -173,13 +169,58 @@ table {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+
+  > div {
+    display: flex;
+    flex: 1;
+    align-items: stretch;
+    height: auto;
+  }
+
+  &.NW {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+  &.NE {
+    grid-area: 1 / 2 / 2 / 3;
+    }
+  &.SW {
+    grid-area: 2 / 1 / 3 / 2;
+    }
+  &.SE {
+    grid-area: 2 / 2 / 3 / 3;
+    }
+
 }
 
-.eventsheet > section > div {
+.eventsheet > .section-divider {
-  display: flex;
+  position:  absolute;
-  flex: 1;
+  display: grid;
-  align-items: stretch;
+  grid-template-columns: repeat(2, 1fr);
-  height: auto;
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  --divider-border: lightgrey dashed 1px;
+
+  .NW {
+      grid-area: 1 / 1 / 2 / 2;
+      border-right:var(--divider-border);
+      border-bottom:var(--divider-border);
+    }
+  .NE {
+      grid-area: 1 / 2 / 2 / 3;
+      border-bottom:var(--divider-border);
+    }
+  .SW {
+      grid-area: 2 / 1 / 3 / 2;
+      border-right:var(--divider-border);
+    }
+  .SE {
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  
 }
 
 .lineup-card th {
@@ -231,8 +272,6 @@ div.grid-container > .substitution-table {
   grid-area: "substitution-table";
 }
 
-
-
 section.lineup-card {
   counter-reset: lineup-sequence-counter 0;
 
@@ -256,7 +295,7 @@ section.lineup-card {
 
 
 .lineup-card table {
-  font-size: 22px;
+  font-size: 21px;
 }
 
 .lineup-card td {
@@ -298,7 +337,7 @@ section.blank {
   }
   td.substitution {
     border-width: 0.5;
-}
+  }
 }
 
 #lineup-card-exchange td.player-name {
@@ -795,6 +834,11 @@ header {
 
     &.availability-on-day div {
       transform: rotate(270deg);
+      margin-bottom: -5;
+      /* font-stretch: 40%; */
+      font-stretch: 75%;
+      font-weight: 500;
+      text-align: left;
     }
 
     // .position-capability {
@@ -839,14 +883,6 @@ td.is-present-checkbox.available-status-code-None > span {
   display: none;
 }
 
-.game-number .label {
-  font-size: xx-small
-}
-
-.game-number .label, .game-number .value{
-  display:none;
-}
-
 #front-cover {
   border: solid 1px black;
 
@@ -864,10 +900,20 @@ td.is-present-checkbox.available-status-code-None > span {
 
   .game-number, .homeaway{
     display: grid;
-    font-size: xx-large;
     align-content: center;
     width: 1.4em;
+  }
+  
+  .homeaway {
     font-weight: 800;
+    font-size: xx-large;
+  }
+
+  .game-number {
+    font-size: large;
+    font-stretch: extra-condensed;
+    font-weight: 700;
+    text-wrap: nowrap;
   }
 
   .title {

src/views/eventlineup/edit.hbs

@@ -85,11 +85,7 @@
         {{/each}}
       </div>
       <div class="slot-set">
-        {{#each members}}
+
-          {{#if (isInStartingLineup this)}}
-            {{> slot member=this}}
-          {{/if}}
-        {{/each}}
       </div>
     </div>
   </div>
@@ -99,11 +95,7 @@
         <span>Position Only</span>
       </div>
       <div class="slot-set">
-        {{#each members}}
+        
-          {{#if (isInPositionOnly this)}}
-            {{> slot member=this}}
-          {{/if}}
-        {{/each}}
       </div>
   </div>
   <div id="lineup-bench-{{event.id}}" class="Panel u-maxWidthSm bench Panel--full">
@@ -112,11 +104,9 @@
         <span>Bench</span>
       </div>
     <div class="slot-set">
-      {{#each members}}
+      {{#loadSlots}}
-      {{#if (isInBench this)}}
+        {{>slot member=member event_lineup=event_event_lineup availablity=availability}}
-        {{> slot member=this event=../event}}
+      {{/loadSlots}}
-      {{/if}}
-      {{/each}}
     </div>
   </div>
   <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
@@ -129,11 +119,7 @@
         </div>
       </div>
     <div class="slot-set">
-      {{#each members}}
+      
-      {{#if (isInOut this)}}
-        {{> slot member=this}}
-      {{/if}}
-      {{/each}}
     </div>
   </div>
 </form>

src/views/eventlineup/partials/page_section_divider.hbs

@@ -0,0 +1,7 @@
+
+<div class="section-divider">
+    <div class="dotted-line NW" style=""></div>
+    <div class="dotted-line NE" style=""></div>
+    <div class="dotted-line SW" style=""></div>
+    <div class="dotted-line SE" style=""></div>
+</div>

src/views/eventlineup/partials/slot.hbs

@@ -1,10 +1,10 @@
-<div class="Panel-expandableRow lineup-slot">
+<div class="Panel-expandableRow lineup-slot" data-initial-slotset="{{initial_slotset}}">
-  <input type="hidden" name="label" value="{{member.benchcoach.eventLineupEntry.label}}">
+  <input type="hidden" name="label" value="{{eventLineupEntry.label}}">
-  <input type="hidden" name="flags" value="{{flagsString member.benchcoach.eventLineupEntry.flags}}">
+  <input type="hidden" name="flags" value="{{flagsString eventLineupEntry.flags}}">
-	<input type="hidden" name="sequence" value="{{member.benchcoach.eventLineupEntry.sequence}}">
+	<input type="hidden" name="sequence" value="{{eventLineupEntry.sequence}}">
 	<input type="hidden" name="eventId" value="{{event.id}}">
-	<input type="hidden" name="eventLineupEntryId" value="{{member.benchcoach.eventLineupEntry.id}}">
+	<input type="hidden" name="eventLineupEntryId" value="{{eventLineupEntry.id}}">
-	<input type="hidden" name="availabilityStatusCode", value="{{member.benchcoach.availability?.statusCode}}">
+	<input type="hidden" name="availabilityStatusCode", value="{{availability?.statusCode}}">
 	<input type="hidden" name="memberId" value="{{member.id}}">
 	<input type="hidden" name="lastName" value="{{member.lastName}}">
 	<input type="hidden" name="firstName" value="{{member.firstName}}">
@@ -18,11 +18,11 @@
     <div class="Panel-cell u-padXs u-sizeFill u-flex">
       <div
         class="Popup availability-status-code-{{
-          member.benchcoach.availability?.statusCode
+          availability?.statusCode
         }}"
       >
-        {{#if member.benchcoach.availability}}
+        {{#if availability}}
-          {{#with member.benchcoach.availability}}
+          {{#with availability}}
           <button class="Popup-toggle Button Button--smallSquare {{avail_status_code_class statusCode}}" 
             type="button" 
             data-control="popup" 
@@ -63,17 +63,17 @@
       <div class="u-flexGrow1"></div>
       <div class="Popup">
         <button type="button" class="Popup-toggle Button Button--smallSquare" onclick="this.closest('div').querySelector('.Popup-container').classList.toggle('is-open');this.blur();" href="javascript:void(0)">
-        {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/flag.svg"}}}
+        {{{embeddedSvgFromPath "/bootstrap-icons/three-dots.svg"}}}
         </button>
         <div class="Popup-container Popup-container--rightHang position-label-flags">
           <div class="Popup-content u-padSm u-textCenter">
             <div class="Checkbox Checkbox--inline">
-              <input class="Checkbox-input" type="checkbox" name="flag-drd" id="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}" onclick="refreshLineup()">
+              <input class="Checkbox-input" type="checkbox" name="flag-drd" id="flag-drd-{{member.id}}-{{eventLineupEntry.id}}" onclick="refreshLineup()">
-              <label class="Checkbox-label" for="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}">DR<small>d</small></label>
+              <label class="Checkbox-label" for="flag-drd-{{member.id}}-{{eventLineupEntry.id}}">DR<small>d</small></label>
             </div>
             <div class="Checkbox Checkbox--inline">
-              <input class="Checkbox-input" type="checkbox" name="flag-dhd" id="flag-dhd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}" onclick="refreshLineup()">
+              <input class="Checkbox-input" type="checkbox" name="flag-dhd" id="flag-dhd-{{member.id}}-{{eventLineupEntry.id}}" onclick="refreshLineup()">
-              <label class="Checkbox-label" for="flag-dhd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}">DH<small>d</small></label>
+              <label class="Checkbox-label" for="flag-dhd-{{member.id}}-{{eventLineupEntry.id}}">DH<small>d</small></label>
             </div>
           </div>
         </div>
@@ -86,7 +86,7 @@
             --
           </option>
           {{#each (positions)}}
-            <option value="{{this}}" {{#if (comparePositionWithFlags this ../member.benchcoach.eventLineupEntry)}}selected{{/if}}>
+            <option value="{{this}}" {{#if (comparePositionWithFlags this ../eventLineupEntry)}}selected{{/if}}>
               {{this}}
             </option>
           {{/each}}

src/views/eventsheet/sheet.hbs

@@ -2,8 +2,8 @@
 
 <body class="B5">
   <div class="sheet eventsheet" id="page-1">
-    {{!-- NW --}}
+    {{>page_section_divider}}
-    <section id="defense-card" data-card-location="NW">
+    <section class="NW" id="defense-card">
       <header>
         <div class="event-title float-left">
           {{event.formattedTitle}} – {{dateFormat event.startDate "ddd, MMM D h:mm A" }}
@@ -32,8 +32,7 @@
         </div>
       </div>
     </section>
-    {{!-- NE --}}
+    <section class="NE" id="roster-and-history">
-    <section id="roster-and-history" data-card-location="NE">
       <div class="roster-and-history">
         {{> roster_and_history 
           event=event 
@@ -44,8 +43,7 @@
           }}
       </div>
     </section>
-    {{!-- SW --}}
+    <section class="SW lineup-card dugout" id="lineup-card-dugout">
-    <section class="lineup-card" id="lineup-card-dugout" data-card-location="SW">
       <header>
         <div class="float-left event-title">{{event.formattedTitle}}</div>
         <div class="float-right homeaway">{{event.gameType}}</div>
@@ -83,8 +81,7 @@
         </table>
       </div>
     </section>
-    {{!-- SE --}}
+    <section class="SE lineup-card exchange" id="lineup-card-exchange">
-    <section class="lineup-card" id="lineup-card-exchange" data-card-location="SE">
       <header>
         <div class="float-left event-title">{{event.formattedTitle}}</div>
         <div class="float-right homeaway">{{event.gameType}}</div>
@@ -124,19 +121,18 @@
     </section>
   </div>
   <div class="sheet eventsheet" id="page-2">
-    {{!-- NW --}}
+    {{>page_section_divider}}
-    <section id="front-cover">
+    <section class="NW" id="front-cover">
       <header>
-        <div class="homeaway">
+        <div class="game-number">
-          <span>{{firstLetter event.gameType}}</span>
+          {{event.label}}
         </div>
         <div class="title">
           <span class="date-time">{{dateFormat event.startDate "ddd, MMM D h:mm A" }}</span>
           <span class="location">{{event.locationName}}</span>
         </div>
-        <div class="game-number">
+        <div class="homeaway">
-          <span class="label">Game #</span>
+          <span>{{firstLetter event.gameType}}</span>
-          <span class="value">XX</span>
         </div>
       </header>
       <div style="display:block;max-height: 1em;background-color: lightgray;border-bottom: solid 2px black;">
@@ -184,8 +180,7 @@
         {{/if}}
       </div>
     </section>
-    {{!-- NE --}}
+    <section class="NE blank" id="defense-card">
-    <section id="defense-card" class="blank">
       <header>
         <div class="event-title float-left">
           &nbsp;
@@ -214,8 +209,7 @@
         </div>
       </div>
     </section>
-    {{!-- SW --}}
+    <section class="SW lineup-card exchange blank" id="lineup-card-exchange-blank">
-    <section class="lineup-card exchange blank" id="lineup-card-exchange-blank">
       <div class="starting-lineup-table">
         <table>
           <thead>
@@ -247,8 +241,7 @@
         </table>
       </div>
     </section>
-    {{!-- SE --}}
+    <section class="SE lineup-card dugout blank" id="lineup-card-dugout-blank">
-    <section class="lineup-card exchange blank" id="lineup-card-dugout-blank">
       <div class="starting-lineup-table">
         <table>
           <thead>