markgarrigan/.nvmrc

## .nvmrc
16

## app.riot
<app>
  <h1>Tasks</h1>

  <p><button onclick={coolTask}>Cool Task</button></p>
  <p><button onclick={longCoolTask}>Long Cool Task</button></p>
  <p><button onclick={warmTask}>Warm Task</button></p>

  <script>
    let _queue = []
    export default {
      onMounted(props, state) {
        this.coolConsumerOne()
        this.warmConsumerOne()
      },
      queue(exchange, job) {
        _queue.push({
          exchange,
          job
        })
      },
      coolTask() {
        this.queue('cool', () => {
          console.log('cool task')
        })
      },
      longCoolTask() {
        this.queue('cool', () => {
          setTimeout(() => {
            console.log('long cool task')
          }, 2000);
        })
      },
      warmTask() {
        this.queue('warm', () => {
          console.log('warm task')
        })
      },
      coolConsumerOne(busy = 0, index = 0) {
        // I only take cool tasks
        setTimeout(() => {
          // console.log('coolConsumerOne', _queue);
          if (busy) {
            this.coolConsumerOne(true)
            // console.log('coolConsumerOne is busy')
            return
          }
          if (!_queue.length) {
            this.coolConsumerOne()
            // console.log('There are no tasks to do')
            return
          }
          let task = _queue[index]
          if (!task) {
            this.coolConsumerOne()
            // console.log('There are no tasks to do')
            return
          }
          if (task.pending === true) {
            this.coolConsumerOne(false, index + 1)
            // console.log(`task ${index} is pending`)
            return
          }
          task.pending = true
          if (task.exchange !== 'cool') {
            task.pending = false
            this.coolConsumerOne()
            // console.log('There are no tasks for coolConsumerOne to do')
            return
          }
          this.coolConsumerOne(true)
          _queue.splice(index, 1)
          task.job()
          this.coolConsumerOne()
        }, 300)
      },
      warmConsumerOne(busy, index = 0) {
        // I only take warm tasks
        setTimeout(() => {
          // console.log('warmConsumerOne', _queue);
          if (busy) {
            this.warmConsumerOne(true)
            // console.log('warmConsumerOne is busy')
            return
          }
          if (!_queue.length) {
            this.warmConsumerOne()
            // console.log('There are no tasks to do')
            return
          }
          let task = _queue[index]
          if (!task) {
            this.warmConsumerOne()
            // console.log('There are no tasks to do')
            return
          }
          if (task.pending === true) {
            task.pending = false
            this.warmConsumerOne(false, index + 1)
            // console.log(`task ${index} is pending`)
            return
          }
          task.pending = true
          if (task.exchange !== 'warm') {
            this.warmConsumerOne()
            // console.log('There are no tasks for warmConsumerOne to do')
            return
          }
          this.warmConsumerOne(true)
          _queue.splice(index, 1)
          task.job()
          this.warmConsumerOne()
        }, 300)
      }
    }
  </script>
</app>

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tasks</title>
  <script src="//unpkg.com/page@1.11.6/page.js"></script>
  <script src="app.riot" type="riot"></script>
  <script src="//unpkg.com/riot@7/riot+compiler.min.js"></script>
</head>

<body>
  <app></app>

  <script>
    (async function() {
      await riot.compile()
      riot.mount('app')
    })()
  </script>
</body>

</html>

## package.json
{
  "name": "task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "http-server --proxy http://localhost:8080?"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "http-server": "^14.1.1"
  }
}
	<app>
	<h1>Tasks</h1>

	<p><button onclick={coolTask}>Cool Task</button></p>
	<p><button onclick={longCoolTask}>Long Cool Task</button></p>
	<p><button onclick={warmTask}>Warm Task</button></p>

	<script>
	let _queue = []
	export default {
	onMounted(props, state) {
	this.coolConsumerOne()
	this.warmConsumerOne()
	},
	queue(exchange, job) {
	_queue.push({
	exchange,
	job
	})
	},
	coolTask() {
	this.queue('cool', () => {
	console.log('cool task')
	})
	},
	longCoolTask() {
	this.queue('cool', () => {
	setTimeout(() => {
	console.log('long cool task')
	}, 2000);
	})
	},
	warmTask() {
	this.queue('warm', () => {
	console.log('warm task')
	})
	},
	coolConsumerOne(busy = 0, index = 0) {
	// I only take cool tasks
	setTimeout(() => {
	// console.log('coolConsumerOne', _queue);
	if (busy) {
	this.coolConsumerOne(true)
	// console.log('coolConsumerOne is busy')
	return
	}
	if (!_queue.length) {
	this.coolConsumerOne()
	// console.log('There are no tasks to do')
	return
	}
	let task = _queue[index]
	if (!task) {
	this.coolConsumerOne()
	// console.log('There are no tasks to do')
	return
	}
	if (task.pending === true) {
	this.coolConsumerOne(false, index + 1)
	// console.log(`task ${index} is pending`)
	return
	}
	task.pending = true
	if (task.exchange !== 'cool') {
	task.pending = false
	this.coolConsumerOne()
	// console.log('There are no tasks for coolConsumerOne to do')
	return
	}
	this.coolConsumerOne(true)
	_queue.splice(index, 1)
	task.job()
	this.coolConsumerOne()
	}, 300)
	},
	warmConsumerOne(busy, index = 0) {
	// I only take warm tasks
	setTimeout(() => {
	// console.log('warmConsumerOne', _queue);
	if (busy) {
	this.warmConsumerOne(true)
	// console.log('warmConsumerOne is busy')
	return
	}
	if (!_queue.length) {
	this.warmConsumerOne()
	// console.log('There are no tasks to do')
	return
	}
	let task = _queue[index]
	if (!task) {
	this.warmConsumerOne()
	// console.log('There are no tasks to do')
	return
	}
	if (task.pending === true) {
	task.pending = false
	this.warmConsumerOne(false, index + 1)
	// console.log(`task ${index} is pending`)
	return
	}
	task.pending = true
	if (task.exchange !== 'warm') {
	this.warmConsumerOne()
	// console.log('There are no tasks for warmConsumerOne to do')
	return
	}
	this.warmConsumerOne(true)
	_queue.splice(index, 1)
	task.job()
	this.warmConsumerOne()
	}, 300)
	}
	}
	</script>
	</app>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tasks</title>
	<script src="//unpkg.com/page@1.11.6/page.js"></script>
	<script src="app.riot" type="riot"></script>
	<script src="//unpkg.com/riot@7/riot+compiler.min.js"></script>
	</head>

	<body>
	<app></app>

	<script>
	(async function() {
	await riot.compile()
	riot.mount('app')
	})()
	</script>
	</body>

	</html>
	{
	"name": "task",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"dev": "http-server --proxy http://localhost:8080?"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"http-server": "^14.1.1"
	}
	}