alicethewhale

SELECT timeline_items.* FROM (
  
  # Query 1 
  SELECT lead_alerts.id AS id, lead_alerts.action AS body, users.first_name AS first_name, users.last_name AS last_name, lead_alerts.due_on AS date, "lead_alerts" AS model 
  FROM `lead_alerts` LEFT OUTER JOIN `users` ON `users`.`id` = `lead_alerts`.`author_id`   
  WHERE `lead_alerts`.`lead_id` = 1 
  UNION ALL 
  
  # Query 2
  SELECT completed_lead_alerts.id AS id, lead_alerts.action AS body, users.first_name AS first_name, users.last_name AS last_name, completed_lead_alerts.completed_on AS date, "completed_lead_alerts" AS model 

alicethewhale

def self.timeline_subquery(lead)
    select('lead_alerts.id AS id', 'lead_alerts.action AS body', 'users.first_name AS first_name', 'users.last_name AS last_name', 'lead_alerts.due_on AS date', '"lead_alerts" AS model')
      .left_joins(:author)
      .where(lead_id: lead)
End

alicethewhale

lead_alerts_query = LeadAlert.timeline_subquery(lead)
completed_lead_alerts_query = CompletedLeadAlert.timeline_subquery(lead)
notes_query = Note.timeline_subquery(lead)
transitions_query = LeadTransition.timeline_subquery(lead)

union_query = [lead_alerts_query, completed_lead_alerts_query, notes_query, transitions_query].map(&:to_sql).join(" UNION ALL ")

alicethewhale

select("timeline_items.*")
   .from("(#{union_query}) AS timeline_items")
   .where("timeline_items.date <= ?", Time.current)
   .order("timeline_items.date DESC")

alicethewhale

<style>
.grid {
	grid-column-end: span 3;
	display: grid;
	grid-gap: 2px;
	grid-template-areas:
		"A B C"
		"D E F"
		"G H I";
}

alicethewhale

.tile {
    background: url(https://source.unsplash.com/900x900/?christmas,holiday,festive);
    background-size: 300%;
}
.tile--empty {
  background: transparent;
}
.tile--1 {
  background-position: top left;
}

alicethewhale

tiles.map(tile => {
  tile.addEventListener("click", event => {
    const tileArea = tile.style.getPropertyValue("--area");
    const emptyTileArea = emptyTile.style.getPropertyValue("--area");

    emptyTile.style.setProperty("--area", tileArea);
    tile.style.setProperty("--area", emptyTileArea);

    forceGridAnimation();

alicethewhale

const areaKeys = {
  A: ["B", "D"],
  B: ["A", "C", "E"],
  C: ["B", "F"],
  D: ["A", "E", "G"],
  E: ["B", "D", "F", "H"],
  F: ["C", "E", "I"],
  G: ["D", "H"],
  H: ["E", "G", "I"],
  I: ["F", "H"]

alicethewhale

const inversionCount = array => {
  return array.reduce((accumulator, current, index, array) => {
    return array
      .slice(index)
      .filter(item => {
        return item < current;
      })
      .map(item => {
        return [current, item];
      })

alicethewhale

<svg width="420px" height="507px" viewBox="0 0 420 507">
    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="Triangle" fill="#507E1A" points="210 0 330 120 90 120"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 60 360 210 60 210"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 135 390 315 30 315"></polygon>
        <polygon id="Triangle" fill="#507E1A" points="210 225 420 435 0 435"></polygon>
        <rect id="Rectangle" fill="#8B572A" x="180" y="435" width="60" height="72"></rect>
    </g>
</svg>